11.01.2026 20:01
Перестаньте пихать всё в useEffect.
Перестаньте пихать всё в useEffect. Серьезно.
Вижу это на каждом код-ревью. Джуны (и иногда уставшие мидлы) используют useEffect для синхронизации стейта. Это выстрел себе в ногу.
🔴 Как делать не надо:
У вас есть firstName и lastName, и вы создаете эффект, чтобы обновить fullName.
const [firstName, setFirstName] = useState('Alex');
const [lastName, setLastName] = useState('Dev');
const [fullName, setFullName] = useState('');
useEffect(() => {
setFullName(`${firstName} ${lastName}`);
}, [firstName, lastName]);
Почему это плохо?
1. Лишний рендер. Компонент рендерится, запускается эффект, обновляется стейт -> компонент рендерится снова.
2. Сложность отладки. Попробуйте отследить цепочку из 5 таких эффектов в большом компоненте.
🟢 Как надо (Derived State):
Вычисляйте значение прямо во время рендера.
const fullName = `${firstName} ${lastName}`;
Если вычисления тяжелые, используйте useMemo. Но в 90% случаев вам не нужен ни эффект, ни стейт.
💡 Правило большого пальца: Если вы можете вычислить что-то из уже имеющихся пропсов или стейта - не создавайте для этого новый стейт.
#react #bestpractices #performance
👉 @frontend_1
Вижу это на каждом код-ревью. Джуны (и иногда уставшие мидлы) используют useEffect для синхронизации стейта. Это выстрел себе в ногу.
🔴 Как делать не надо:
У вас есть firstName и lastName, и вы создаете эффект, чтобы обновить fullName.
const [firstName, setFirstName] = useState('Alex');
const [lastName, setLastName] = useState('Dev');
const [fullName, setFullName] = useState('');
useEffect(() => {
setFullName(`${firstName} ${lastName}`);
}, [firstName, lastName]);
Почему это плохо?
1. Лишний рендер. Компонент рендерится, запускается эффект, обновляется стейт -> компонент рендерится снова.
2. Сложность отладки. Попробуйте отследить цепочку из 5 таких эффектов в большом компоненте.
🟢 Как надо (Derived State):
Вычисляйте значение прямо во время рендера.
const fullName = `${firstName} ${lastName}`;
Если вычисления тяжелые, используйте useMemo. Но в 90% случаев вам не нужен ни эффект, ни стейт.
💡 Правило большого пальца: Если вы можете вычислить что-то из уже имеющихся пропсов или стейта - не создавайте для этого новый стейт.
#react #bestpractices #performance
👉 @frontend_1