Почему dispatch нельзя использовать в потоке кода при отрисовке компонента?

Question

[Boris007]

Столкнулся с ошибкой в виде

Warning: Cannot update a component (re) while rendering a different component (wi). To locate the bad setState() call inside wi, follow the stack trace as described in

В коде компонента был вызов
dispatch(setToken(token))

Проблему удалось решить путем переноса диспатча в эффект по примеру из поста в сообществе про эту ошибку

useEffect(() => {
        dispatch(setToken(token))
}, [])

Но там был пример, где в массив эффекта добавили и сам dispatch
Не совсем понял логику, как значение dispatchвызывает повторно эффект, если это ссылка на хук useDispatch
Как отрабатывает эффект при добавлении в массив значенияdispatch?

useEffect(() => {
        dispatch(setToken(token))
}, [dispatch])

Answer 1

[Михаил Р.]

Почему dispatch нельзя использовать в потоке кода при отрисовке компонента?

- Проблемы с производительностью: Если бы dispatch вызывался прямо в теле компонента (то есть во время его рендеринга), каждый раз, когда компонент рендерится (например, из-за изменения других данных на странице), он бы снова и снова добавлял товар в корзину (в контексте интернет-магазина). Это приведет к бесконечному циклу и сильно замедлит работу приложения.
- Непредсказуемость поведения: Поскольку рендеринг компонентов может происходить по разным причинам и в разное время, использование dispatch в процессе может привести к непредсказуемым и нежелательным изменениям в состоянии приложения. В контексте интернет-магазина, товары могли бы добавляться в корзину без Вашего ведома.
- Сложности в управлении состоянием: Использование dispatch во время рендеринга усложняет понимание того, когда и почему происходят изменения в состоянии приложения, что затрудняет отладку и поддержку кода.

Именно поэтому лучше использовать dispatch внутри обработчиков событий (например, при клике на кнопку) или внутри useEffect, где Вы имеете полный контроль над тем, когда и по какой причине должны происходить изменения состояния.

Comments

[Boris007]

Спасибо, а по какой логике срабатывает эффект, когда мы в массив добавляем dispatch?
Мы же ссылаемся на useDispatch, а не какое-либо значение
Когда нужно его добавлять в массив, а когда нет?

useEffect(() => {
        dispatch(setToken(token))
}, [dispatch])