Fale sobre as diferenças entre componentes controlados e não controlados no React.

Os componentes controlados gerem o seu estado através de useState (ou this.state em classes) e recebem dados e funções de callback através de props. O estado do formulário, por exemplo, é armazenado no estado do React e atualizado através de manipuladores onChange.

Os componentes não controlados armazenam o seu estado dentro do DOM. Para aceder ao seu valor, usa-se useRef (ou React.createRef em classes) para obter uma referência ao elemento DOM. O valor dos elementos do formulário, por exemplo, é extraído diretamente do DOM ao submeter.

Característica	Componente controlado	Componente não controlado
Gestão do estado	Estado do React (useState)	DOM
Acesso ao valor	Através do estado e props	Através de Refs (useRef)
Atualização	Reativa, a cada alteração	Apenas numa ação explícita (por exemplo, submit)
Validação	Na lógica do React	Através da API HTML padrão ou manualmente após obter o valor

Exemplo de componente controlado:

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

Exemplo de componente não controlado:

import React, { useRef } from 'react';

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

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

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

A escolha entre eles depende da complexidade da lógica e da necessidade de reação instantânea às mudanças de entrada. Os componentes controlados são preferíveis para formulários complexos e validação em tempo real. Os não controlados são adequados para formulários simples ou para integração com bibliotecas DOM de terceiros.