Плохие практики использования useState
Хук useState используется чаще всего при работе с React. Есть несколько плохих практик при работе с ним, которые приводят к более сложному коду, увеличению количества багов и ухудшению производительности компонента.
Йоханнес Кеттманн в блоге Profy собрал список плохих практик использования useState и предложил к каждому свое решение. Кратко про часть из них:
Избыточный стейт. Стейт, который зависит от другой переменной стейта, скорее всего можно безболезненно заменить на производную переменную. Пример избыточного стейта:
const onChangeFirstName = (event) => {
setFirstName(event.target.value);
setFullName(`${event.target.value} ${lastName}`);
};
Дублирование стейта. Проблема появляется, когда одни и те же данные дублируются в нескольких стейтах. Эта проблема указывает на нарушение принципа единого источника правды. Пример дублирования стейта:
function DuplicateState({ items }) {
const [selectedItem, setSelectedItem] = useState();
const onClickItem = (item) => {
setSelectedItem(item);
};
// --snip--
}
При изменении пропса items в selectedItem могут оказаться устаревшие данные. Чтобы избежать обращения к устаревшим данным, вместо selectedItem используйте selectedItemId. А selectedItem будет вычисляться по выбранному id из items.
Обновление стейта в useEffect. При обновлении стейта в useEffect происходит дополнительный рендер. Также бывает сложно вызвать эффект в нужное время. Например, эффект вызывается при инициализации компонента. Поэтому старайтесь избегать обновления стейта в useEffect. Кстати, есть интересный доклад про useEffect от Дэвида Хуршиди. В нем он призывает вообще отказаться от useEffect.
profy.dev/article…pitfalls
