Что делать с ошибкой линтера и какие лучше зависимости включать для useEffect?

Question

[lexstile]

Код:

useEffect(() => dispatch(initialPayouts({ userId, filter })), [filter]);

Ошибка:

React Hook useEffect has missing dependencies: 'dispatch' and 'userId'. Either include them or remove the dependency array. (eslintreact-hooks/exhaustive-deps)

Нужно ли включать в зависимости userId? (он же не меняется на протяжении пользования приложением)
Нужно ли включать в зависимости dispatch? Почему?

Если достаточно фильтра, как можно обойти ошибку без костылей по типу комментария для линтера?

Answer 1

[Alexandroppolus]

Довольно спорная тема. На гитхабе было обсуждение, где Ден увещевал всех забыть про "componentDidMount" и мыслить зависимостями - раз уж компонент по сути отражение текущего стейта.
В твоём случае ничего не меняется, потому нужно просто добавить эти значения в депсы и не заморачиваться. Диспатч всегда постоянный, так что включай тоже.
Собственно, проблема может возникнуть, если интересует только значение на момент маунта и ты сознательно не хочешь эффектить при изменении. Тогда можно просто сделать, например, const firstValue = useRef(propValue).current; ,тогда в firstValue у тебя будет только первое значение, которое можно передать в useEffect. Это тоже костыль, но более явный код, чем еслинт-дизабл.