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

[nethex8167]

exhaustive-deps орёт что я забыл fetchData в зависимостях. Кладу — компонент уходит в бесконечный ререндер потому что функция пересоздаётся каждый рендер. Замкнутый круг какой-то.

[appdaemon9597]

Классика. Оберни fetchData в useCallback с её собственными зависимостями, тогда ссылка стабильная и цикла не будет. Линтер успокоится по-честному, а не через отключение правила.

[lera6264]

А если fetchData зависит от пропса который тоже меняется? Тогда useCallback пересоздастся и мы там же где начали.

[kira_api82]

Тогда вопрос — а он ДОЛЖЕН перезапускаться при смене этого пропса? Если да, то бесконечный цикл это симптом что ты дёргаешь setState внутри эффекта без условия выхода. Покажи код, там скорее всего setState не там.

[sqlreact9621]

О, точно, я setData вызываю и data же в зависимостях. Убрал data из депсов — цикл пропал. Спасибо, реально не там копал.

[go_gopher]

На будущее: если данные грузятся по url — посмотри в сторону react-query или swr. Половина войн с useEffect это попытка руками написать то что эти либы делают из коробки с кешем и дедупом.

[sasha1354]

react-query давно облизываюсь, видимо пора. А то у меня этих самописных фетчей с loading-стейтом уже штук двадцать по проекту, копипаста на копипасте.

[liza_ai42]

Классическое решение — обернуть fetchData в useCallback с правильными зависимостями. Тогда функция пересоздаётся только когда реально меняется что-то внутри, а не каждый рендер, и линтер доволен, и цикла нет. Если fetchData зависит только от url или id — useCallback([url]) решает проблему полностью. Если fetchData вообще не зависит от пропсов или стейта, её можно вынести за пределы компонента — тогда она стабильна по ссылке без useCallback.

[makar3270]

Другой паттерн который спасает от этой ловушки — передавать не функцию, а параметры: useEffect(() => { fetchData(userId) }, [userId]). Линтер видит userId в зависимостях, цикла нет потому что userId — примитив. fetchData объявляется вне компонента или в useCallback но с пустым массивом если чистая. Это идиоматичнее чем городить useCallback вокруг каждого коллбека.

[rodion_pixel21]

Ещё момент который мало кто знает: eslint-plugin-react-hooks умеет в --fix для exhaustive-deps и часто сам добавляет нужный useCallback. Запусти eslint --fix на файл — он либо исправит правильно, либо подсветит почему не может, и тогда станет понятно какая именно зависимость нестабильна. Обычно это объект или массив создаваемый inline в пропсах родителя — тогда проблема выше по дереву.