Begrip: Controlled component

Een controlled component is een component waarin de formuliergegevens door React beheerd worden. Dit betekent dat er voor elk formulierelement een corresponderende useState hook is.

Controlled components staan tegenover uncontrolled components, i.e. componenten die de formuliergegevens laten beheren door de DOM, door de browser en dus niet in de state van een component. Dit betekent dat je in zo'n situatie, bij het inzenden van een formulier, alle formuliergegevens moet uitlezen via het React equivalent van document.getElementById (of via de FormData API).

React heeft dan geen controle meer, dit maakt het bijvoorbeeld moeilijker om tijdens het invullen de data te valideren. Verder is het idee achter React dat alles een functie is van de state, alles zou uit de state berekend moeten worden, dit betekent dat een uncontrolled component dus tegen de principes van React ingaat.

Alhoewel we hierboven enkel over formulierelementen gesproken hebben, kan het concept eenvoudig uitgebreid worden naar ander onderdelen van het UI zoals tabs, carousels, accordions, ...