Не путайте структуру данных со структурой состояния
Когда вы создаете форму на React, вы часто объединяете всё в один большой объект состояния.
Вы видите раздел «Адрес» в своем интерфейсе. Вы создаете объект адреса в своем состоянии. Это выглядит организованно. Это выглядит чисто.
Это ловушка.
Проблема не в React. Проблема в структуре вашего состояния.
Формы — это не статические данные. Это интерактивные системы. Пользователи не обновляют формы раздел за разделом. Они обновляют их поле за полем.
Почему вложенное состояние вредит вашему проекту:
- Обновления становятся трудоемкими. Чтобы изменить только название города, вам придется заново создавать объект города, объект адреса и объект формы верхнего уровня, чтобы соблюсти иммутабельность.
- Утечка сложности. По мере роста формы логика валидации и рендеринга становится всё сложнее в управлении.
- Увеличивается количество ререндеров. Изменение одного вложенного значения создает новые ссылки на