Parla delle differenze tra componenti controllati e non controllati in React.

I componenti controllati gestiscono il loro stato tramite useState (o this.state nelle classi) e ricevono dati e funzioni di callback tramite le props. Lo stato del modulo, ad esempio, viene memorizzato nello stato di React e aggiornato tramite gestori onChange.

I componenti non controllati memorizzano il loro stato all’interno del DOM. Per accedere al loro valore, si utilizza useRef (o React.createRef nelle classi) per ottenere un riferimento all’elemento DOM. Il valore degli elementi del modulo, ad esempio, viene estratto direttamente dal DOM al momento dell’invio.

Caratteristica	Componente controllato	Componente non controllato
Gestione dello stato	Stato di React (useState)	DOM
Accesso al valore	Tramite stato e props	Tramite Refs (useRef)
Aggiornamento	Reattivo, ad ogni modifica	Solo in azione esplicita (ad esempio, submit)
Validazione	Nella logica di React	Tramite API HTML standard o manualmente dopo aver ottenuto il valore

Esempio di componente controllato:

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} />
  );
}

Esempio di componente non controllato:

import React, { useRef } from 'react';

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

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

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

La scelta tra i due dipende dalla complessità della logica e dalla necessità di reazioni istantanee ai cambiamenti di input. I componenti controllati sono preferibili per moduli complessi e validazione in tempo reale. Quelli non controllati sono adatti per moduli semplici o per integrazione con librerie DOM di terze parti.