Verwar Data Shape niet met State Shape
Wanneer je een React-formulier bouwt, groepeer je vaak alles in één groot state-object.
Je ziet een adressectie in je UI. Je maakt een adres-object aan in je state. Het ziet er georganiseerd uit. Het ziet er overzichtelijk uit.
Dit is een valkuil.
Het probleem is niet React. Het probleem is de vorm van je state.
Formulieren zijn geen statische data. Het zijn interactieve systemen. Gebruikers werken formulieren niet sectie voor sectie bij. Ze werken ze veld voor veld bij.
Waarom geneste state je project schaadt:
- Updates worden zwaar. Om één plaatsnaam te wijzigen, moet je de stad, het adres en het state-object op het hoogste niveau opnieuw aanmaken om immutability te behouden.
- Complexiteit lekt door. Naarmate het formulier groeit, wordt je validatie- en renderinglogica moeilijker te beheren.
- Re-renders nemen toe. Het wijzigen van één geneste waarde creëert nieuwe objectreferenties. Dit kan onnodige updates triggeren in je hele componentboom.
- De mentale belasting neemt toe. Je stopt met denken aan de gebruiker en begint te denken in objectpaden.
Kleine formulieren zijn vergevingsgezind. Productformulieren niet.
Een productieformulier heeft validatie, autosave en conditionele logica nodig. Als je deze bouwt bovenop een diep genest object, voelt elke nieuwe feature kostbaar aan.
De oplossing is om de state te ontwerpen rondom hoe data verandert, niet hoe het eruitziet.
Een vlakkere state-structuur biedt deze voordelen:
- Snellere updates. Je hoeft minder code aan te raken om een enkele waarde te wijzigen.
- Makkelijker debuggen. Updates blijven lokaal en voorspelbaar.
- Betere componentgrenzen. Je kunt kleine stukjes data doorgeven in plaats van enorme objecten.
Maak niet blindelings alles plat. Als data zelden verandert en altijd samen beweegt, is nesten prima. Maar nest de onderdelen van je formulier die constant veranderen niet.
Stel jezelf deze vragen voordat je gaat coderen:
- Welke velden veranderen het vaakst?
- Welke secties hebben onafhankelijke validatie nodig?
- Welke updates moeten geïsoleerd blijven van de rest van de UI?
Als het bijwerken van één veld moeilijker aanvoelt dan de wijziging zelf, dan is je state-structuur het probleem.
Stop met het modelleren van je state op basis van je UI. Begin het te modelleren op basis van het gedrag van je gebruiker.