Зачем передавать dispatch в хук useEffect?

Question

[dron112]

Для чего передают dispatch в массив зависимостей useEffect, что это даёт ?

const dispatch = useDispatch()

useEffect(() => {...}, [dispatch])

Answer 1

[Sun_Day]

В основном чтобы пофиксить предупреждения от eslint. То же самое будет, если написать вот так

useEffect(() => { вызов dispatch }, [])

The dispatch function reference will be stable as long as the same store instance is being passed to the <Provider>. Normally, that store instance never changes in an application.

However, the React hooks lint rules do not know that dispatch should be stable, and will warn that the dispatch variable should be added to dependency arrays for useEffect and useCallback. The simplest solution is to do just that:

ссылка на документацию

В общем, правила линта не знают, что вы ссылаетесь на один и тот же экземпляр стора. Если ссылка не изменяется, то новый вызов useEffect происходить не должен. И поэтому предупреждает, что переменная должна быть добавлена в массив зависимостей.

Варианты:
1) Сделать то, что показано вами выше.
2) Отключить правило линтера в данном конкретном месте строчкой // eslint-disable-line
3) Отключить правило глобально в самом конфиге eslint. Гугл в помощь.

Comments

[Александр Серый]

Отключить правило глобально в самом конфиге eslint.

Хотелось бы правило не отключать полностью глобально, а только лишь исключить "dispatch".

Answer 2

[Mikhail Osher]

eslint-plugin-react-hooks не знает, что данная функция не меняет свой референс.
Можно настроить через advanced configuration.

{
  "rules": {
    // ...
    "react-hooks/exhaustive-deps": ["warn", {
      "additionalHooks": "useDispatch|useOtherHookWhichWillDefinitelyNotChange"
    }]
  }
}

Comments

[Александр Серый]

Использовал ваш ответ по другому назначению. Добавил проверку линтером для кастомного хука.

"rules": {
    // ...
    'react-hooks/exhaustive-deps': [
      'warn',
      // add deps for custom hooks
      {
        additionalHooks: 'useNonInitialEffect',
      },
    ],
  }

Автор вопроса имел ввиду, как избавиться от написания "dispatch" в массив зависимостей. Но в "additionalHooks" передается список хуков, которым наоборот нужна проверка :)