Пытаюсь загрузить данные через асинхронный метод в useEffect. Передаю все необходимые зависимости и в моем понимании useEffect должен отрабатывать при монтировании компонента, при первом рендере и при изменении зависимостей.
useEffect(() => {
console.log('effect')
if (ids.length === 0) {
api.images.all().then((data) => { console.log(data); setIDs(data) }).catch(console.log)
}
}, [ids])
В моем случае это 3 раза: монтирование (тут же он должен загрузить данные), первый рендер (не должно войти в if), и из-за изменения ids (также не должно войти в if). Но useEffect срабатывает 4 раза и загружает данные дважды, я не могу понять почему.
Полный код компонента:
//BuildIn
import { useEffect, useState } from 'react'
//Inside
import api from '../services/api.service'
import AsyncImage from '../components/AsyncImage.component'
const ImagesPage = () => {
const [ids, setIDs] = useState([])
useEffect(() => {
console.log('effect')
if (ids.length === 0) {
api.images.all().then((data) => { console.log(data); setIDs(data) }).catch(console.log)
}
}, [ids])
return(
<>
{(ids.length > 0) ? ids.map((id, index) => <AsyncImage guid={id} key={index} />) : <div>No data</div>}
</>
)
}
export default ImagesPage