Не плутайте форму даних із формою стану
Коли ви створюєте форму на React, ви часто групуєте все в один великий об'єкт стану.
Ви бачите розділ «Адреса» у своєму інтерфейсі. Ви створюєте об'єкт адреси у своєму стані. Це виглядає організовано. Це виглядає охайно.
Це пастка.
Проблема не в React. Проблема у формі вашого стану.
Форми — це не статичні дані. Це інтерактивні системи. Користувачі не оновлюють форми розділ за розділом. Вони оновлюють їх поле за полем.
Чому вкладений стан шкодить вашому проєкту:
- Оновлення стають важкими. Щоб змінити лише назву міста, вам потрібно заново створити об'єкт міста, об'єкт адреси та об'єкт форми верхнього рівня, щоб зберегти незмінність (immutability).
- Складність розповсюджується. У міру зростання форми вашу логіку валідації та рендерингу стає дедалі важче контролювати.
- Збільшується кількість ререндерів. Зміна одного вкладеного значення створює нові посилання на об'єкти. Це може спричинити непотрібні оновлення в усій дереві компонентів.
- Зростає когнітивне навантаження. Ви перестаєте думати про користувача і починаєте думати про шляхи до об'єктів.
Малі форми прощають помилки. Продуктові форми — ні.
Продуктивна форма потребує валідації, автозбереження та умовної логіки. Якщо ви будуєте це на основі глибоко вкладеного об'єкта, кожна нова функція здаватиметься «дорогою» у реалізації.
Рішення полягає в тому, щоб проєктувати стан навколо того, як змінюються дані, а не того, як вони виглядають.
Більш пласка форма стану дає такі переваги:
- Швидші оновлення. Ви змінюєте менше коду для оновлення одного значення.
- Простіше налагодження. Оновлення залишаються локальними та передбачуваними.
- Кращі межі компонентів. Ви можете передавати невеликі фрагменти даних замість величезних об'єктів.
Не робіть усе пласким наосліп. Якщо дані змінюються рідко і завжди рухаються разом, вкладеність — це нормально. Але не робіть вкладеними ті частини форми, які змінюються постійно.
Поставте собі ці запитання перед тим, як писати код:
- Які поля змінюються найчастіше?
- Які розділи потребують незалежної валідації?
- Які оновлення мають залишатися ізольованими від решти інтерфейсу?
Якщо оновлення одного поля здається складнішим, ніж саме змінення, то проблема у структурі вашого стану.
Припиніть моделювати стан за зразком вашого інтерфейсу. Почніть моделювати його за зразком поведінки вашого користувача.