При объявлении хука useEffect нужно указывать список зависимостей, массив переменных, которые используются внутри хука. Например:
const [x, setX] = useState(0);
useEffect(() => {
console.log(x);
}, []);
В этом случае хук объявлен неправильно, переменная x не указана как зависимость. Однако, это правило не универсальное. Некоторые переменные являются стабильными, т.е. ссылка на них не меняется при ре-рендере, и их можно не указывать. Для того чтобы не ошибаться, нужно использовать плагин eslint-plugin-react-hooks. Например, какие переменные плагин считает стабильными:
const [state, setState] = useState() / React.useState()
// ^^^ стабильная ссылка
const [state, dispatch] = useReducer() / React.useReducer()
// ^^^ стабильная ссылка
const [state, dispatch] = useActionState() / React.useActionState()
// ^^^ стабильная ссылка
const ref = useRef()
// ^^^ стабильная ссылка
const onStuff = useEffectEvent(() => {})
// ^^^ стабильная ссылка
Остальные ссылки не стабильны
В своем блоге автор высказывает мнение, что есть недостаток в этом подходе. Если использовать хуки из сторонних библиотек, то возвращаемые в них переменные всегда нужно указывать в зависимостях эффекта. Это может быть setter useAtom из Jotai или вызов функции useMutation из tanstack-query. По идее эти переменные тоже стабильные, но их придется указывать в зависимостях, иначе будет ошибка плагина eslint-plugin-react-hooks.
https://macwright.com/2024/09/19/the-extra-rules-of-hooks