Почему useEffect - это не костыль, а инструмент, и как им не надо пользоваться 😅

Очень часто вижу в коде:

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

и всё вроде бы ок… пока не появляется зависимость, вроде userId, и кто-то лениво добавляет её в массив зависимостей, не понимая, что произойдёт при каждом изменении.

👉 Проблема не в useEffect - а в том, что мы не до конца понимаем его модель.
useEffect = реакция на изменение состояния.
Если у тебя эффект, который не зависит от UI - например, загрузка данных - вынеси его в кастомный хук или вообще за пределы компонента.

Например:

function useUser(userId) {
const [user, setUser] = useState(null);

useEffect(() => {
let ignore = false;
async function load() {
const data = await fetch(`/api/user/${userId}`).then(r => r.json());
if (!ignore) setUser(data);
}
load();
return () => (ignore = true);
}, [userId]);

return user;
}

Теперь у тебя эффект чистый, изолированный и переиспользуемый.
Компонент не знает ничего про загрузку - он просто получает user.

💡 Маленький лайфхак: если ты пишешь эффект и не можешь объяснить словами, почему он зависит от этих переменных - скорее всего, архитектура требует пересмотра, а не новый костыль в useEffect.

✍️ @React_lib