Vorbește despre diferențele dintre componentele controlate și cele necontrolate în React.

Componente controlate își gestionează starea prin useState (sau this.state în clase) și primesc date și funcții callback prin props. Starea formularului, de exemplu, este stocată în starea React și actualizată prin handler-e onChange.

Componentele necontrolate își păstrează starea în interiorul DOM-ului. Pentru a accesa valoarea lor, se folosește useRef (sau React.createRef în clase) pentru a obține o referință la elementul DOM. Valoarea elementelor de formular, de exemplu, se extrage direct din DOM la submit.

Caracteristică	Component controlat	Component necontrolat
Gestionarea stării	Stare React (useState)	DOM
Accesul la valoare	Prin stare și props	Prin Refs (useRef)
Actualizare	Reacțiv, la fiecare modificare	La acțiune explicită (de exemplu, submit)
Validare	În logica React	Prin API HTML standard sau manual după obținerea valorii

Exemplu de component controlat:

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

Exemplu de component necontrolat:

import React, { useRef } from 'react';

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

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

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Obține valoarea</button>
    </>
  );
}

Alegerea între ele depinde de complexitatea logicii și de necesitatea unei reacții imediate la modificările de intrare. Componentele controlate sunt preferate pentru formulare complexe și validare în timp real. Cele necontrolate sunt potrivite pentru formulare simple sau pentru integrarea cu biblioteci DOM terțe.