🔥 Антипаттерн в React: избыточные зависимости useEffect

Встречали такое?


useEffect(() => {
fetchData(id);
}, [id, fetchData]);


❗️Проблема: fetchData — это функция, которая переопределяется при каждом рендере. В итоге эффект срабатывает чаще, чем должен, даже если id не менялся.

👎 Это вызывает лишние запросы, лаги и баги в логике.

💡 Решения:

1. Обёрнуть в useCallback:


const fetchData = useCallback((id: string) => {
// ...
}, []);


2. Вынести вне компонента (если она не зависит от состояния):


const fetchData = (id: string) => {
// ...
};


3. Игнорировать в зависимостях (как временный хак, но осторожно!):


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


✅ Правильное управление зависимостями в useEffect — ключ к стабильному и предсказуемому поведению компонентов.

📲 Мы в MAX

✍️ @React_lib