Сейчас покажу вам приём, который сильно упрощает React-код: не храните в state то, что ...
Сейчас покажу вам приём, который сильно упрощает React-код: не храните в state то, что можно вычислить. Очень часто вижу такое: const [fullName, setFullName] = useState('') useEffect(() => { setFullName(`${user.firstName} ${user.lastName}`) }, [user]) На первый взгляд всё нормально. Но по факту это лишний state, лишний useEffect и лишний ререндер. Гораздо проще так: const fullName = `${user.firstName} ${user.lastName}` Или если вычисление тяжёлое: const filteredItems = useMemo(() => { return items.filter(item => item.active) }, [items]) Что это даёт: • меньше кода • меньше багов из-за рассинхрона • проще поддержка • компонент легче читать Я обычно задаю себе один вопрос: это данные, которые реально меняются отдельно, или это просто производное значение? Если производное почти всегда не нужен useState. Вот где особенно часто ошибаются: • fullName из firstName и lastName • isFormValid из значений формы • sortedList из массива и сортировки • visibleItems из фильтра и исходных данных Чем меньше лишнего state в компоненте, тем спокойнее вам потом его дебажить. ✍️ @React_lib