Сейчас покажу вам приём, который сильно упрощает 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