Как исправить отсутствующее предупреждение о зависимости при использовании useEffect React Hook

Вы используете useEffect, и когда вы это делаете, очень часто вы хотите использовать некоторые переменные, которые используются в качестве реквизита или состояния внутри вашего компонента.

В eslint встроено правило, которое требует, чтобы вы ссылались на любое другое свойство или часть состояния внутри массива зависимостей useEffect. Это массив, который управляет выполнением useEffect. Это правило хочет видеть его в списке внутри этого массива, который решает, когда повторно запустить функцию useEffect.

Поэтому вам нужно добавить [fetchBusinesses] и предупреждение должно исчезнуть.

Теперь, почему это правило требует, чтобы мы поместили это туда?

Есть некоторые сценарии, в которых использование <65345555522264> и неправильное перечисление всех частей состояния и свойств внутри массива может привести к странным и трудным для отладки проблемам.

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

Теперь произвольное добавление к этому массиву также может привести к ошибкам. Так что в любом случае вы сталкиваетесь с ошибками, которые вы должны решить. В соответствии с вашими комментариями, которые, казалось, решили эту проблему для вас, но я хотел бы продолжить расследование, чтобы узнать, получили ли вы случайно второй запрос GET на вкладке Сеть в Chrome после добавления в fetchBusinesses в ваш массив useEffect.

используя UseEffect fetchBusinesses вызов функции, объявить в useEffect(), объявив константную переменную после вызова имени функции,

useEffect(()=>{
const fetchBusinesses=()=>{
   console.log(useeffect fetchbussinesses functions)
}
 fetchBusinesses();
},[declare the variable used in useeffect hooks ])

Это не ответ, специфичный для варианта использования вопроса, а более общий случай, и он охватывает случай, когда использованиеEffect или извлечение и импорт не работает. Сценарий useRef:

Иногда сценарий заключается в том, что useEffect должен иметь пустой массив, и вы по-прежнему хотите использовать его внутри частей состояния useEffect, но все же не хотите внедрять их в качестве зависимостей, также вы можете попробовать использовать useCallback, и теперь реакция жалуется про зависимости useCallback и ты застрял. При этом в некоторых случаях можно использовать useRef. например:

const locationRef = useRef(location);
useEffect(()=>{
const qs = locationRef.current.search
...
},[])

Вы должны быть осторожны при использовании этой техники и помнить, что useRef не активирует процесс рендеринга.

Кажется, функция fetchBusinesses объявлена ​​в компоненте. Это означает, что в каждом рендере объявляется новая функция, которая запускает хук.

Есть 2 подхода к устранению проблемы.

1. Переместите объявление функции fetchBusinesses из компонента.

2. Оберните функцию fetchBusinesses хуком useCallback.

Первый вариант предпочтительнее.

Вы можете избавиться от этого предупреждения Es-lint, передав ссылку на него:

Пример указан ниже, однако вы можете посмотреть решение по этой ссылке: https://www.youtube.com/watch?v=r4A46oBIwZk&t=8s

Предупреждение: Строка 13:8: React Hook В React.useEffect отсутствуют зависимости: «история» и «currentUser?.role». Либо включите их, либо удалите массив зависимостей react-hooks/exhaustive-deps

React.useEffect(() => {
    if (currentUser?.role !== "Student") {
        return history.push("/")
    }
}, [])

Разрешение: Шаг 1. Переместите бизнес-логику в отдельную константу

Теперь предупреждение: React Hook React.useEffect имеет недостающую зависимость: 'roleChecking'.

const roleChecking = () =>{
   if (currentUser?.role !== "Student") {
        return history.push("/")
    }
}

React.useEffect(() => {
    roleChecking()
}, [])

Последний шаг — создать ссылку на функцию:

  const roleRef = React.useRef();

  const roleChecking = () => {
    if (currentUser?.role !== "Student") {
      return history.push("/");
    }
  };
  roleRef.current = roleChecking;

  React.useEffect(() => {
   return roleRef.current();
  }, [currentUser?.role]);

В моем случае это предупреждение было связано с моей локальной переменной organization, и когда я поместил organization в массив зависимостей, useEffect будет выполняться бесконечно. Поэтому, если у вас есть проблемы, подобные моей, используйте useEffect с массивом зависимостей и разделите:

Потому что если у вас есть несколько вызовов API, которые изменяют состояние, он вызывает useEffect несколько раз.

От:

  const { organization } = useSelector(withOrganization)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getOrganization({}))
    dispatch(getSettings({}))
    dispatch(getMembers({}))
  }, [dispatch, organization])

Кому:

  const { organization } = useSelector(withOrganization)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getOrganization({}))
    dispatch(getSettings({}))
  }, [dispatch, organization])

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

Это предупреждение возникает, если переменные, которые вы используете внутри useEffect, определены внутри компонента или переданы компоненту в качестве реквизита. Поскольку вы определили fetchBusinesses() внутри того же компонента, вы должны передать его в массив зависимостей.

Но если вы импортировали fetchBusinesses(), а затем использовали его внутри useEffect, вам не нужно было бы добавлять его в массив зависимостей. Вот как мы на самом деле настроили наши приложения Redux: мы всегда импортируем создателей действий и запускаем их внутри useEffect, не добавляя их в массив зависимостей.

То же верно и для useMemo.

Что ж, если вы хотите взглянуть на это по-другому, вам просто нужно знать, какие опции есть у React, кроме exhaustive-deps. Одна из причин, по которой вам не следует использовать функцию замыкания внутри эффекта, заключается в том, что при каждом рендеринге он будет воссоздан/уничтожен снова.

Таким образом, есть несколько методов React в хуках, которые считаются стабильными и неисчерпаемыми, где вам не нужно применять к зависимостям useEffect и, в свою очередь, не нарушать правила взаимодействия react-hooks/exhaustive-deps. Например, вторая возвращаемая переменная useReducer или useState, которая является функцией.

const [,dispatch] = useReducer(reducer, {});

useEffect(() => {
    dispatch(); // Non-exhausted - ESLint won't nag about this
}, []);

Так что, в свою очередь, все ваши внешние зависимости могут сосуществовать с вашими текущими зависимостями в вашей функции-редукторе.

const [,dispatch] = useReducer((current, update) => {
    const { foobar } = update;
    // Logic

    return { ...current, ...update };
}), {});

const [foobar, setFoobar] = useState(false);

useEffect(() => {
    dispatch({ foobar }); // non-exhausted `dispatch` function
}, [foobar]);

Просто передайте функцию в качестве аргумента в массиве useEffect...

useEffect(() => {
   functionName()
}, [functionName])

Попробуйте так:

const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"})
        .then(res => normalizeResponseErrors(res))
        .then(res => {
            return res.json();
        })
        .then(rcvdBusinesses => {
            // Some stuff
        })
        .catch(err => {
            // Some error handling
        });
  };

и

useEffect(() => {
    fetchBusinesses();
});

Это работает для вас.

Но я предлагаю попробовать этот способ, и он также работает для вас. Это лучше, чем предыдущий способ. Я использую это так:

useEffect(() => {
    const fetchBusinesses = () => {
        return fetch("theURL", {method: "GET"})
            .then(res => normalizeResponseErrors(res))
            .then(res => {
                return res.json();
            })
            .then(rcvdBusinesses => {
                // Some stuff
            })
            .catch(err => {
                // Some error handling
            });
    };

    fetchBusinesses();
}, []);

Если вы получаете данные на базе определенного id, то добавьте в callback useEffect [id]. Тогда он не может показать вам предупреждение React Hook useEffect has a missing dependency: 'any thing'. Either include it or remove the dependency array

const [mount, setMount] = useState(false)
const fetchBusinesses = () => {
   // Function definition
}
useEffect(() => {
   if(!mount) {
      setMount(true);
      fetchBusinesses();
   }
},[fetchBusinesses, mount]);

Это решение довольно простое, и вам не нужно переопределять предупреждения ESLint. Просто сохраните флаг, чтобы проверить, смонтирован ли компонент или нет.

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

Если вы не хотите помещать fetchBusinesses в зависимости хука, вы можете просто передать его в качестве аргумента функции обратного вызова хука и установить для него основной fetchBusinesses в качестве значения по умолчанию следующим образом:

useEffect((fetchBusinesses = fetchBusinesses) => {
   fetchBusinesses();
}, []);

Это не лучшая практика, но в некоторых случаях она может быть полезна.

Кроме того, как Shubham написал, вы можете добавить приведенный ниже код, чтобы указать ESLint игнорировать проверку вашего хука.

// eslint-disable-next-line react-hooks/exhaustive-deps

Эти предупреждения очень полезны для поиска компонентов, которые не обновляются последовательно: Безопасно ли исключать функции из списка зависимостей?.

Однако, если вы хотите удалить предупреждения во всем проекте, вы можете добавить это в конфигурацию ESLint:

  {
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": 0
    }
  }

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

Для полноты картины:

1. (Перестал работать) Использовать функцию как useEffect обратный вызов

useEffect(fetchBusinesses, [])

2. Объявить функцию внутри useEffect()

useEffect(() => {
  function fetchBusinesses() {
    ...
  }
  fetchBusinesses()
}, [])

3. Запомнить с useCallback()

В этом случае, если у вас есть зависимости в вашей функции, вам придется включить их в массив зависимостей useCallback, и это снова вызовет useEffect, если параметры функции изменятся. Кроме того, это много шаблонного... Так что просто передайте функцию непосредственно useEffect как в 1. useEffect(fetchBusinesses, []).

const fetchBusinesses = useCallback(() => {
  ...
}, [])
useEffect(() => {
  fetchBusinesses()
}, [fetchBusinesses])

4. Аргумент функции по умолчанию

По предложению Бехнама Азими

Это не лучшая практика, но в некоторых случаях она может быть полезна.

useEffect((fetchBusinesses = fetchBusinesses) => {
   fetchBusinesses();
}, []);

5. Создайте пользовательский хук

Создайте пользовательский хук и вызывайте его, когда вам нужно запустить функцию только один раз. Может быть чище. Вы также можете вернуть обратный вызов для сброса повторного запуска «инициализации», когда это необходимо.

// customHooks.js
const useInit = (callback, ...args) => {
  const [mounted, setMounted] = useState(false)
  
  const resetInit = () => setMounted(false)

  useEffect(() => {
     if(!mounted) {
        setMounted(true);
        callback(...args);
     }
  },[mounted, callback]);

  return [resetInit]
}

// Component.js
return ({ fetchBusiness, arg1, arg2, requiresRefetch }) => {
  const [resetInit] = useInit(fetchBusiness, arg1, arg2)

  useEffect(() => {
    resetInit()
  }, [requiresRefetch, resetInit]);

6. Отключить предупреждение eslint

Отключение предупреждений должно быть вашим последним средством, но когда вы это сделаете, лучше сделать это встроенным и явным образом, потому что будущие разработчики могут запутаться или создать неожиданные ошибки, не зная, что линтинг отключен

useEffect(() => {
  fetchBusinesses()
}, []) // eslint-disable-line react-hooks/exhaustive-deps

Решение также предоставлено React. Они советуют вам использовать useCallback, который вернет версию вашей функции memoize:

Функция fetchBusinesses изменяет зависимости хука useEffect (в строке NN) при каждом рендеринге. Чтобы это исправить, оберните определение fetchBusinesses в собственный хук useCallback()

useCallback прост в использовании, поскольку имеет ту же подпись, что и useEffect. Разница в том, что useCallback возвращает функцию. Это будет выглядеть так:

 const fetchBusinesses = useCallback( () => {
        return fetch("theURL", {method: "GET"}
    )
    .then(() => { /* Some stuff */ })
    .catch(() => { /* Some error handling */ })
  }, [/* deps */])
  // We have a first effect that uses fetchBusinesses
  useEffect(() => {
    // Do things and then fetchBusinesses
    fetchBusinesses();
  }, [fetchBusinesses]);
   // We can have many effects that use fetchBusinesses
  useEffect(() => {
    // Do other things and then fetchBusinesses
    fetchBusinesses();
  }, [fetchBusinesses]);

Можно удалить второй массив типов аргументов [], но fetchBusinesses() также будет вызываться при каждом обновлении. Вы можете добавить оператор IF в реализацию fetchBusinesses(), если хотите.

React.useEffect(() => {
  fetchBusinesses();
});

Другой — реализовать функцию fetchBusinesses() вне вашего компонента. Только не забудьте передать любые аргументы зависимостей вашему вызову fetchBusinesses(dependency), если таковые имеются.

function fetchBusinesses (fetch) {
  return fetch("theURL", { method: "GET" })
    .then(res => normalizeResponseErrors(res))
    .then(res => res.json())
    .then(rcvdBusinesses => {
      // some stuff
    })
    .catch(err => {
      // some error handling
    });
}

function YourComponent (props) {
  const { fetch } = props;

  React.useEffect(() => {
    fetchBusinesses(fetch);
  }, [fetch]);

  // ...
}

Просто отключите ESLint для следующей строки;

useEffect(() => {
   fetchBusinesses();
// eslint-disable-next-line
}, []);

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

обновлено

или

const fetchBusinesses = useCallback(() => {
 // Your logic in here
 }, [someDeps])

useEffect(() => {
   fetchBusinesses();
// No need to skip the ESLint warning
}, [fetchBusinesses]);

fetchBusinesses будет вызываться каждый раз при изменении someDeps.

./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

Это не ошибка JavaScript/React, а предупреждение ESLint (eslint-plugin-react-hooks).

Это говорит вам, что ловушка зависит от функции fetchBusinesses, поэтому вы должны передать ее как зависимость.

useEffect(() => {
  fetchBusinesses();
}, [fetchBusinesses]);

Это может привести к вызову функции при каждом рендеринге, если функция объявлена ​​в таком компоненте, как:

const Component = () => {
  /*...*/

  // New function declaration every render
  const fetchBusinesses = () => {
    fetch('/api/businesses/')
      .then(...)
  }

  useEffect(() => {
    fetchBusinesses();
  }, [fetchBusinesses]);

  /*...*/
}

потому что каждый раз функция переобъявляется с новой ссылкой.

Правильный способ сделать это:

const Component = () => {
  /*...*/

  // Keep the function reference
  const fetchBusinesses = useCallback(() => {
    fetch('/api/businesses/')
      .then(...)
  }, [/* Additional dependencies */])

  useEffect(() => {
    fetchBusinesses();
  }, [fetchBusinesses]);

  /*...*/
}

Или просто определите функцию в useEffect.

Подробнее: [ESLint] Отзыв о правиле lint 'exhaustive-deps' #14920

Эта статья является хорошим пособием по извлечению данных с помощью ловушек: https://www.robinwieruch.de/react-hooks-fetch-data/

По существу, включите определение функции выборки внутрь useEffect:

useEffect(() => {
  const fetchBusinesses = () => {
    return fetch("theUrl"...
      // ...your fetch implementation
    );
  }

  fetchBusinesses();
}, []);