Почему ипортируемый компонент срабатывает быстрее хука в React?

Question

[szQocks]

Код в основном компоненте App.js

const instance = axios.create({
baseURL: env.API_URL
});

const [todos, setTodos] = useState();

const getAllTodos = () => {
instance.get()
.then(res => setTodos(res.data))
.catch(err => console.log(err))
};

useEffect(() => getAllTodos(), []);

И в этом же компоненте App я импортирую компонент TodoList и передаю в него стейт todos(то есть полученные данные при запросе через хук useEffect который вызывает функцию getAllTodos.
И проблема в том то что я не успеваю получить данные как мне уже вылетает ошибка из компонента TodoList
о том что todos - undefined при вызове методы map(то есть при отрисовке). Я решил эту проблему костыльно, используя оператор вопроса перед точкой в компоненте TodoList.

todos?.map

Пусть я даже и решил эту проблему костыльно... всё равно не пойму , почему компонент пытается отрендерить todos , быстрее чем срабатывает хук useEffect в родительском компоненте ?

Comments

[WbICHA]

почему компонент пытается отрендерить todos , быстрее чем срабатывает хук useEffect в родительском компоненте ?

Потому что вы не понимаете что такое асинхронность.
ЮзЭфеект срабатывает как надо (причём он в приницпе отрабатывает ПОСЛЕ рендера), но он вызывает функцию, которая вызывает асинхронный метод, так что при рендере тодос пустой.
Решается это либо добавлением лоадера, либо через опшинал чейнинг, либо:
const [todos, setTodos] = useState([]);

Answer 1

[Aetae]

Потому что компоненты никого сами по себе не ждут и рендерятся синхронно, т.е. "прямо сейчас", а ответ от сервера приходит асинхронно, т.е. "когда-нибудь потом". Более того, хук useEffect сам по себе только запускается уже после рендера.

Варианта два:
1. Задать стейт по умолчанию:
const [todos, setTodos] = useState([]);.
Сначала покажет пустой список, потом подгруженный.

2. Не рендерить компонент, пока нет нужных для него данных:

{todos ? <TodoList todos={todos}/> : <LoadingComponent/>}

Сначала покажет какой-нить спиннер, потом подгруженный список.

Comments

[szQocks]

Спасибо конечно , но меня больше напрягает то что когда загружается компонент , загружается первый консоль лог - с тем то что todos - undefined, после этого же , срабатывает хук useEffect который вызывает функцию на получение данных и после этого компонент по новой рендериться и вызывает консоль лог уже с полученными данными. Так вот в чем собственно проблема , когда срабатывает первый консоль лог - компонент дочерний в который отправляются todos со стейте - выдает ошибку - это проблема решаема на изи. Но тут еше 1 проблема, когда я решаю проблему с этим undefined, пишу проверку или делаю по дефолту в стейте пустой массив - это всё занимает время , и в получается - просто медленная подгрузка данных из api . Толи с хуком что-то не то, и либо вообще его не стоит мне использовать , либо у меня руки кривые и я делаю что-то не то.

[szQocks]

Как вы сказали:

"Потому что компоненты никого сами по себе не ждут и рендерятся синхронно, т.е. "прямо сейчас", а ответ от сервера приходит асинхронно, т.е. "когда-нибудь потом". Более того, хук useEffect сам по себе только запускается уже после рендера. "

В чем тогда вся соль ? Почему все пихают запросы на получение данных в хук?
Проще в компоненте первой же функцией написать запрос на получение данных и не париться? Если работадатель увидит что запрос не в хуке, подумает плохо?

[szQocks]

Понимаю когда в componenDidMount пихают запрос в классовых компонентах - там это будет наилучшим решением для реализации запросов, но зачем они пихают в useEffect в функциональном?

[szQocks]

Написал на классовом компоненте - все работает идеально и так как мне хотелось.

[Aetae]

szQocks,

когда я решаю проблему с этим undefined, пишу проверку или делаю по дефолту в стейте пустой массив - это всё занимает время

Условные операторы занимают меньше наносекунды.

получается - просто медленная подгрузка данных из api .

Загрузка данных из api всегда медленная и это то, о чём ты сам должен думать. Данные не могут прилететь с сервера моментально.

Проще в компоненте первой же функцией написать запрос

Функциональный компоннет - это по сути отдельный метод render вырванный из классового. Т.е. это функция, которая вызывается каждый раз, когда реакт хочет перерисовать компонент, сиречь при любых изменениях выше без memo или при изменениях props с memo и при любых изменениях в state.
Если не ясно: запрос будет происходить при каждом рендере, если не запихать его в хук.

Понимаю когда в componenDidMount пихают запрос в классовых компонентах - там это будет наилучшим решением для реализации запросов, но зачем они пихают в useEffect в функциональном?

componenDidMount выполняется тогда же, когда хук useEffect(и наоборот).

Написал на классовом компоненте - все работает идеально и так как мне хотелось.

Сомневаюсь, покажи код.

[szQocks]

Aetae, Вы правы. Что-то я увлекся...глючит меня ..., хуки срабатывают в одно и тоже время :|

Самый оптимальный вариант - не рендерить компонент пока данные не прийдут :|, обидно что нет возможно получить данные перед - рендером всего приложения, это было бы полезно.

[Aetae]

szQocks, ну почему нет.
Можно сначала всё запросить, а только потом делать ReactDom.render(). (И пялиться на белый экран, пока данные не прилетят)
Можно пошаманить с React.lazy(). (С почти аналогичным результатом)

[szQocks]

Aetae, да надо бы попробовать мне через ReactDom.render() или React.lazy().
Совсем не рендерить приложение , пока данные не прийдут.

Пока я сделал вот так

const [todos, setTodos] = useState(0);

{Array.isArray(todos) && todos.map(todo => {
return <TodoItem todo={todo} key={todo.id}/>})}

Спасибо в любом случае вам , что помогаете людям.

Answer 2

[Kentavr16]

Сделайте getlaatodos async function с try и catch. Это должно помочь

Comments

[szQocks]

Не помогло, так же дочерний компонент срабатывает быстрее. Я вижу много вариантов решений но они все костыльные... :D. Может быть логику по CRUD перенесу в сам компонент TodoList в котором и отрисовываю TodoItem проходясь по массиву данных методом map,как думаете?