Почему useEffect предупреждает о полях, которые мне не нужно помещать в массив зависимостей?

Question

Я просмотрел документацию useEffect и не понимаю, почему я получаю предупреждение для каждой переменной и функции, которые я использую внутри useEffect, но я не зависим от них.

Рассмотрим мой useEffect здесь

const [updatedComm, setUpdatedComm] = useState<ICommunication>(props.comm)
const [isEditOn, setIsEditOn] = useState<boolean | false>(false)
const getPublishedComm = () => { /* function implementation */ }
const dispatch = useDispatch();

useEffect(() => {
        if (!isEditOn && updatedComm !== props.comm) {
            const publishedComm = getPublishedComm()
            dispatch(editCommunication(publishedComm))
            setCurrentComm(publishedComm)
        }
    }, [isEditOn])

Мне нужно только запустить этот эффект, когда меняется isEditOn. Однако этот код регистрирует предупреждения

  Line 66:8:  React Hook useEffect has missing dependencies: 'dispatch', 'getPublishedComm', 'props.comm', and 'updatedComm'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

Что я могу сделать, чтобы удалить эти предупреждения, или я действительно что-то упустил принципиально?

Пожалуйста, помогите мне понять.

Спасибо вы

Answer 1

Поскольку useEffect отслеживает использование вами состояний и установщиков состояний, оно обеспокоено тем, что у вас есть много изменяющихся вещей внутри обратного вызова, но вы используете небольшие зависимости.

Потому что в функциональном компоненте Обработчик функций также изменился в новом рендере

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

Но это настоятельно не рекомендуется - если вы чувствуете, что делаете что-то не так, это, вероятно, правда, прочитайте документы еще раз

function editChanged (isEditOn) { // only isEditOn guaranteed to be fresh
   if (!isEditOn && updatedComm !== props.comm) {
      const publishedComm = getPublishedComm();
      dispatch(editCommunication(publishedComm));
      setCurrentComm(publishedComm);
   }
}

useEffect(() => {
   editChanged(isEditOn)
}, [isEditOn])

Answer 2

Сделайте это, чтобы "заставить замолчать" это предупреждение, особенно если вы уверены, что повторный рендеринг должен / должен быть / основан на специфике c dependencies

useEffect(() => {
   if (!isEditOn && updatedComm !== props.comm) {
      const publishedComm = getPublishedComm();
      dispatch(editCommunication(publishedComm));
      setCurrentComm(publishedComm);
   }
   // eslint-disable-next-line
}, [isEditOn])

Но из того, что я вижу, даже updatedComm должен быть частью этого array of dependencies , Стоит понять суть массива зависимостей в том, что касается оптимизации производительности путем пропуска эффектов.