Пост Негласные правила React хуков

Негласные правила React хуков При объявлении хука 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