🚨 Осторожно с useEffect
: ловушка зависимости на функцию!
В React легко попасть в ловушку, передавая функции внутрь useEffect
, не задумываясь об их зависимости.
useEffect(() => {
fetchData(); // ⚠️ Эта функция может пересоздаваться на каждый рендер!
}, [fetchData]);
Если
fetchData
определена внутри компонента, она будет новой при каждом рендере, и эффект снова выполнится. Это может вызвать бесконечные циклы или лишние вызовы.🛠 Решения:
1. Вынести функцию наружу, если она не зависит от пропов/стейта.
2. Обернуть в
useCallback
:
const fetchData = useCallback(() => {
// ...
}, []);
📌 Всегда проверяй зависимости в
useEffect
. Полагайся на ESLint-плагин react-hooks — он поможет не попасть в ловушку.👉 @frontend_1
>>Click here to continue<<
