Fundamentos

Controlled vs Uncontrolled

Controlled: React controla o valor via state. Uncontrolled: DOM mantém o valor, acesso via ref.

Definição

Controlled Components: o valor do input está no state do React (value={state} + onChange={setState}). Uncontrolled: o DOM gerencia internamente, React acessa via ref no momento necessário (defaultValue + ref.current.value).

Problema → Solução

Problema

Controlled com forms grandes causa re-render por keystroke. Uncontrolled é menos React-idiomático e dificulta validação em tempo real.

Solução

Controlled para forms simples e validação live. Uncontrolled para forms grandes e performance crítica. react-hook-form usa uncontrolled com a interface de controlled.

Dica de entrevista

Tip

Misturar value + defaultValue causa warning. Defina ou um ou outro. defaultValue só roda no primeiro render — útil para inicialização.

Código

// Controlled
function Controlled() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

// Uncontrolled
function Uncontrolled() {
  const ref = useRef(null);
  const handleSubmit = () => console.log(ref.current.value);
  return (
    <>
      <input ref={ref} defaultValue="Felipe" />
      <button onClick={handleSubmit}>OK</button>
    </>
  );
}

Perguntas de entrevista

Q.Quando usar uncontrolled?▾

A.1) Forms grandes onde performance importa. 2) Integração com libs não-React. 3) File inputs (sempre uncontrolled — não dá pra setar value programaticamente). 4) Inputs onde você só precisa do valor no submit.

Q.Como validar uncontrolled?▾

A.No submit ou onBlur, leia ref.current.value e valide. Bibliotecas como react-hook-form abstraem isso elegantemente, dando você a API de controlled mas com performance de uncontrolled.

Q.Por que defaultValue não atualiza?▾

A.defaultValue só é lido no primeiro render. Mudanças posteriores são ignoradas — esse é o comportamento de uncontrolled. Se precisa atualizar, é controlled (use value).

Termos relacionados

32/122← →