Как исправить ошибку линтинга реакции-крючков / исчерпывающих ошибок без зависимости

Question

У меня ошибка задержки (react-hooks/exhaustive-deps), которую я сейчас отключаю в двух строках. Я понимаю, как код нарушает правило, но я не понимаю, почему это правило применимо к этой ситуации.

Я хочу, чтобы эффект запускался только в целях очистки, когда компонент отключается. У меня есть функция clearMessages, которая унаследована от реквизита, который сбрасывает состояние редуктора обратно в его пустое состояние по умолчанию. Он работает нормально, когда я запускаю свой проект локально, но когда я запускаю сборку-реагирующие скрипты, выдает вышеприведенную ошибку линтинга, и сборка завершается неудачей.

Вот небольшой фрагмент, показывающий эффект, вызывающий проблему.

const Search = ({ clearMessages }) => {

useEffect(() => () => clearMessages(), [])

...
...

}

Это сообщение об ошибке, которое генерирует build-скрипт.

Строка 25: React Hook useEffect отсутствует зависимость: 'clearMessages'. Либо включите его, либо удалите массив зависимостей. Если 'clearMessages' меняется слишком часто, найдите родительский компонент, который определяет его и обернуть это определение в useCallback реагирующие-крюки / исчерпывающий-Deps

Я бы не ожидал, что clearMessages изменится, поэтому я не уверен, почему так важно предоставить его в качестве зависимости. Я не хочу, чтобы эффект запускался только при изменении значения clearMessages.

Answer 1

Наряду с приведенным выше ответом я обнаружил, что эта документация очень полезна для реорганизации моего useEffect при наличии функциональной зависимости:

https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

Answer 2

Если clearMessages не изменяется, это эквивалентно пустому массиву зависимостей - [].

В любом случае, потому что "I не ожидал бы, что clearMessages изменится«Вы должны использовать его в массиве dep, как подсказывает Линтер.

const Search = ({ clearMessages }) => {

// Equivalent to an empty dependency array !if! clearMessages never change.
useEffect(() => () => clearMessages(), [clearMessages]) 

Есть две фазы для useEffect, упомянутые выше:

1. useEffect будет работать, когда clearMessages изменяется (если этого не произойдет, он будет работать только при монтировании компонента).
2. При указании обратного обратного вызова обратный вызов будет выполняться при размонтировании компонента.

Цитата из документации : Когда именно React очищает эффект? React выполняет очистку, когда компонент отключается.