Родительский кастомный хук срабатывает после выполнения логики дочернего компонента?

Question

[Vann Damm]

Есть кастомный хук родителя, в котором есть useEffect, который делает запись redux store. На основе эти данных из стора дочерний компонент делает отрисовку. Но данные из стора в нём, при первом рендере присутсвуют дефолтные , хотя в родителе я задиспатчил новые.

Answer 1

[hzzzzl]

useEffect после рендера выполняется, то есть сначала рендерится всё дерево родителя с дочками, и потом уже мамкин useEffect

... you might find it easier to think that effects happen “after render”. React guarantees the DOM has been updated by the time it runs the effects.

https://reactjs.org/docs/hooks-effect.html

Comments

[Vann Damm]

Как это можно решить до того как всё дерево отрендерилось?

[hzzzzl]

Vann Damm, не рисовать компоненты, пока стор не заполнится

if (!this.state.auth) return <p>loading please wait ....</p>

[Vann Damm]

hzzzzl, Спасибо. Еще вопрос, почему не перерисовывется дочерний компонент который зависит от данных из стора, когда я поменял данные в сторе, в родительском компоненте. Да и не только в родительском, в любом даже, должно перерендерить ведь? Даже если навесить на useEffect зависимость данных из стора, всё равно не ререндерит

[hzzzzl]

Vann Damm,

не перерисовывется дочерний компонент который зависит от данных из стора

можно посмотреть, как именно компонент получает данные из стора? через connect() или useSelector()?

// такого по идее должно хватить
// и когда auth {} будет меняться, то будет происходить пере-рендер
const auth = useSelector(state => state.auth);

[Vann Damm]

хуком не пробовал доставать, сейчас попробую //
Я получал данные с помощь connect //

На компонент Аpplication стоит Route exact //

[Vann Damm]

hzzzzl, Кстати дочерний хук, который выводит значения из стора в консоль, срабатывает раньше чем родительский хук, который меняет данные в сторе... т.к мой кастомный хук , это обычная ф-ция, при вызове которой, внутри её и срабатывает useEffect , в самую последнюю очередь

[hzzzzl]

Vann Damm, это не противоречит :)
отрисовал рендер -> запустил useEffect, то есть дочерние рендеры произойдут раньше родительского, поэтому родительский хук вызовется только когда все рендеры снизу в дереве компонентов отработают

а скрин я если честно не понял - если isAuth не определен, то редирект сразу произойдет, и обратно в этот компонент Application мы уже не вернемся?

то есть я думаю, что правильнее было бы определить какую нибудь переменную isAuthLoaded: false, и подождать с рендером Application до того момента, когда мы узнаем от сервера, залогинен этот юзер или нет

[Vann Damm]

hzzzzl, Ну да, сперва цепочка рендеров, потом цепочка Эффектов.

Вернёмся, когда пользователь , перейдёт по роуту с логином,залогинится, создастся токен, и в редакс сторе isAuth станет true

Хорошо,спасибо

Вот родительский хук

И не знаю как быть с login logout , он мне в самом вверху не нужен. А нужен внизу , когда редирекчу на login, мб в стор их запихать , useContextом было бы красивее , но уже выбрал редакс.
p.s при задержке рендера дочерних компонентов с помощью условия, когда dispatch записал с стор нужные данные , useEffect начал работать в нормальном режиме , по цепочке от родителя.
p.p.s Но почему в предыдщей версии моей реализации когда я обновляю данные в сторе, то ничего не перересовывется. Получается, что, любые эффекты, которые взаимодействуют со стором, должны сопутсвоваться условием, чтобы рендер дальше не шел и ничего не ломалось?)