Антипаттерны React JS useState

Написание чистого кода на React требует грамотного управления состоянием. Плохие паттерны управления состоянием приводят к багам и усложняют код.

Избегайте этих четырех распространенных ошибок:

  1. Группируйте связанные данные

Не создавайте отдельные хуки состояния для значений, которые изменяются одновременно.

Вместо:

  • const [x, setX] = useState(0);
  • const [y, setY] = useState(0);

Используйте объект:

  • const [position, setPosition] = useState({ x: 0, y: 0 });

Это сделает ваши обновления чистыми и организованными.

  1. Избегайте конфликтующих состояний

Когда несколько булевых значений отслеживают один и тот же процесс, это порождает баги.

Вместо того чтобы использовать:

  • isSubmitting
  • isSubmit

Используйте одну строку статуса:

  • status: 'TYPING'
  • status: 'SUBMITTING'
  • status: 'SUBMITTED'

Выстраивайте логику интерфейса на основе этого единого источника истины.

  1. Удаляйте избыточное состояние

Если значение можно вычислить во время рендеринга, не помещайте его в состояние.

Не храните:

  • firstName
  • lastName
  • fullName

Просто храните имя и фамилию. Вычисляйте полное имя «на лету»:

  • const fullName = firstName + " " + lastName;

Также никогда не сохраняйте пропсы в состоянии. Состояние инициализируется только один раз. Если пропс изменится, состояние не обновится. Используйте пропс напрямую.

  1. Перестаньте дублировать данные

Не храните одни и те же данные в двух разных состояниях.

Если у вас есть список задач и выбранная задача, не храните весь объект задачи в обоих местах. Это усложняет обновление данных.

Вместо этого:

  • Храните список задач.
  • Храните только selectedTaskId.
  • Находите задачу в списке по этому ID во время рендеринга.

Это гарантирует, что выбранная задача всегда будет соответствовать актуальным данным в вашем списке.

Источник: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9