Vertel over de verschillen tussen gecontroleerde en…

De gecontroleerde componenten beheren hun staat via useState (of this.state in klassen) en ontvangen data en callback-functies via props. De formulierstatus wordt bijvoorbeeld opgeslagen in de React-status en bijgewerkt via onChange handlers.

De uncontrolled componenten slaan hun status op binnen de DOM. Om toegang te krijgen tot hun waarde, wordt useRef (of React.createRef in klassen) gebruikt om een referentie naar het DOM-element te krijgen. De waarde van formulier elementen wordt bijvoorbeeld direct uit de DOM gehaald bij verzending.

Kenmerk	Gecontroleerde component	Ongecontroleerde componenten
Statusbeheer	React State (`useState`)	DOM
Toegang tot waarde	Via state en props	Via Refs (`useRef`)
Bijwerking	Reactief, bij elke wijziging	Alleen bij expliciete actie (bijv. verzenden)
Validatie	In React-logica	Via standaard HTML API of handmatig na het verkrijgen van de waarde

Voorbeeld van een gecontroleerde component:

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  }

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

Voorbeeld van een ongecontroleerde component:

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    alert('Waarde input: ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Waarde ophalen</button>
    </>
  );
}

De keuze tussen hen hangt af van de complexiteit van de logica en de behoefte aan directe reactie op invoerwijzigingen. Gecontroleerde componenten zijn beter voor complexe formulieren en realtime validatie. Ongecontroleerde zijn geschikt voor eenvoudige formulieren of voor integratie met externe DOM-bibliotheken.

Vertel over de verschillen tussen gecontroleerde en uncontrolled componenten in React.