Controlled components vs Uncontrolled components no React

O "form" é um dos elementos mais populares em HTML para fazer sites. Quando o React foi lançado, ele mudou a maneira como lidamos com os formulários em muitos aspectos.

No React, existem duas formas de trabalhar com dados de formulário em nossos componentes. A primeira forma é usando o "estado" para manipular os dados do formulário, o que chamamos de "Controlled Components". A segunda forma é deixando a própria DOM lidar com os dados do formulário, sem intervenção direta do componente - isso é chamado de "Uncontrolled Components".

Neste artigo, vou explicar a diferença entre esses dois tipos de componentes no React, usando exemplos práticos.

O que são Controlled Components?

Controlled Components no React são aqueles onde os dados são controlados pelo estado do componente.

Os formulários são usados para guardar informações em um documento, geralmente para enviar ao servidor fazer alguma coisa. E essas informações são guardadas por elementos de entrada de formulário, como input, textarea, select, e outros que controlam o estado ou valor deles.

Onde eu quero chegar?

Sabe quando preenchemos um formulário na internet? Cada campo tem um valor que pode ser digitado pelo usuário ou selecionado através de um menu. Quando mudamos o valor de um campo, o estado dele também muda.

Para conseguir o valor de um campo, usamos uma propriedade do próprio campo. Também podemos usar essa propriedade para definir valores nos campos do formulário. Ela se chama ".value".

Agora, podemos usar essa mudança de estado para gerenciar os valores dos campos em um formulário. Veja um exemplo:

function App(){
    const [email, setEmail] = useState("");
    const [senha, setSenha] = useState("");

    function onSubmit(){
        console.log("Valor do email: "+ email);
        console.log("Valor da senha: "+ senha);
    } return (
        <form onSubmit={onSubmit}>
            <input
                type="email"
                name="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
            />
            <input
                type="password"
                name="senha"
                value={senha}
                onChange={(e) => setSenha(e.target.value)}
                required
            />
            <input type="submit" value="Submit" />
        </form>
    );
}

Aqui temos dois estados: um para o email e outro para a senha. O que a gente faz é atribuir um valor a cada um deles, usando a propriedade "value".

O campo do email guarda o valor digitado nele. Quando a pessoa digita algo nesse campo, um evento chamado "onchange" é acionado e atualiza o valor do email usando uma função chamada "setEmail", que atualiza o estado do email.

A mesma coisa acontece com o campo da senha. Quando a pessoa digita algo nele, o evento "onchange" atualiza o valor da senha usando a função "setSenha".

Resumindo: os valores digitados nos campos de email e senha são controlados pelo estado do componente. Esse estado se torna a fonte única e verdadeira para os campos, então o componente é chamado de "componente controlado".

O problema de usar um componente controlado é que, conforme adicionamos mais campos ao formulário, o número de estados também aumenta. Isso pode causar muitas renderizações e tornar o componente difícil de controlar.

O que são Uncontrolled Components?

Uncontrolled components são aqueles em que os dados do formulário são tratados diretamente pela DOM. O nome "Uncontrolled" vem do fato de que esses componentes não são controlados pelo estado do React.

Os valores dos campos do formulário são normalmente controlados e armazenados na própria DOM. Para obter os valores dos campos, precisamos acessar a instância desses elementos no DOM.

function App() {
  function onSubmit() {
    console.log("Valor do email: " + window.email.value);
    console.log("Valor da senha: " + window.senha.value);
  }
  return (
    <form onSubmit={onSubmit}>
      <input type="email" name="email" id="email" required />
      <input type="password" name="senha" id="senha" required />
      <input type="submit" value="Submit" />
    </form>
  );
}

No código acima, demos aos campos de email e senha um ID com valores "email" e "senha", respectivamente. Usamos esses IDs para obter os valores dos campos quando o formulário é enviado.

O componente acima é chamado de "Uncontrolled Component", porque o React não controla o valor dos campos de entrada do formulário.

Nesse exemplo, usamos as APIs da DOM diretamente. Agora, vamos dar uma repaginada no código para usar elementos do React.

function App() {
  const emailRef = useRef();
  const senhaRef = useRef();


  function onSubmit() {
    console.log("Valor do email: " + emailRef.current.value);
    console.log("Valor da senha: " + senhaRef.current.value);
  }
  return (
    <form onSubmit={onSubmit}>
      <input type="email" name="email" ref={emailRef} required />
      <input type="password" name="senha" ref={senhaRef} required />
      <input type="submit" value="Submit" />
    </form>
  );
}

Criamos duas referências no React, uma para o nome e outra para o email. Depois, as conectamos às entradas de email e senha usando o atributo 'ref'. Isso faz com que as referências guardem os elementos HTML correspondentes. A partir daí, podemos usar a propriedade '.current' para acessar os valores inseridos nos campos de entrada.

Controlled components vs. Uncontrolled components: Principais diferenças

1. Quando usamos componentes controlados, é mais fácil prever o comportamento do nosso formulário, porque o componente está no controle do estado dos elementos do formulário.
2. Já nos componentes não controlados, as coisas podem ficar imprevisíveis, porque os elementos do formulário podem perder a referência ou serem afetados por outras fontes durante o ciclo de vida do componente.
3. Usando componentes controlados, podemos fazer validações de formulários de maneira mais eficaz. Isso porque os valores dos elementos do formulário são armazenados em nosso estado local e, portanto, são mais seguros. É aqui que realizamos nossas validações.
4. Com componentes controlados, temos muito controle sobre os valores dos elementos do formulário. Podemos ditar o que é permitido e o que não é, e como os valores devem ser tratados.

Conclusão

Neste tutorial, ensinamos como lidar com elementos de formulário no React e como estruturar os dados. Falamos sobre duas maneiras diferentes de lidar com dados de formulário em componentes de React: controlados e não controlados. E, por fim, exploramos os dois tipos de componentes em detalhes e demos exemplos práticos para demonstrar como eles funcionam.