Хук useEffect вызывается снова и снова при смене url, без изменения зависимостей. Как исправить?
Мое приложение состоит из двух страниц. На одной из них я вызываю dispatch внутри хука useEffect, что бы хук срабатывал при изменении массива [rolledDices]. Но хук вызывается каждый раз при смене url с одной страницы на другую.
Этот dispatch должен добавлять новый элемент в массив Истории и каждый раз при смене страницы в массив добавляется новый элемент со значением последнего броска.
Вот как я вызываю хук в коде:
useEffect(() => { dispatch(addNewHistoryAC(rolledDices)) }, [rolledDices]) |
useEffect(() => { dispatch(addNewHistoryAC(rolledDices)) }, [rolledDices])
Дополнительно:
Если хук вызывается, значит:
а) rolledDices меняется. (массивы проверяются по ссылке, а не по содержимому, если это новый массив но с теми же значениями - хук всё равно будет вызван)
б) Компонент рисуется как новый. (например по if скрывается на некоторое время).
Ищи где и почему может происходить первое или второе.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы предотвратить вызов хука useEffect при смене URL без изменения зависимостей, можно использовать второй аргумент useEffect - массив зависимостей.
В этом массиве вы указываете переменные, от которых зависит выполнение эффекта. Если ни одна из зависимостей не изменилась, то эффект не будет вызван повторно.
Вот пример того, как можно использовать массив зависимостей в хуке useEffect:
useEffect(() => { // ваш код здесь }, [url]); // в квадратных скобках указывается переменная, от которой зависит выполнение эффекта
В данном примере хук useEffect будет вызываться только в случае изменения переменной url. Если вы не хотите использовать зависимости вообще, то можно передать пустой массив зависимостей:
useEffect(() => { // ваш код здесь }, []); // пустой массив означает, что эффект будет вызываться только один раз при монтировании компонента
Таким образом, используя правильно массив зависимостей в хуке useEffect, вы сможете избежать повторного вызова этого эффекта при смене URL без изменения зависимостей.