Formulários são fundamentais para toda aplicação web porque permitem que você lide com a entrada do usuário, colete dados e acione ações. No React, formulários são gerenciados usando state ou refs, dando a você controle total sobre seu comportamento e validação. Essas duas formas de gerenciar formulários são chamadas de entrada "controlled" e "uncontrolled". Vamos ver o que são entradas controladas e não controladas. Entrada controlada é a forma mais "React-like" de lidar com inputs de formulário. Com entradas controladas, você armazena o valor do campo de entrada no estado e o atualiza através de eventos onChange. Isso lhe dá controle completo sobre os dados do formulário e permite validação instantânea e renderização condicional. O processo funciona assim: o React mantém o estado do formulário com o hook useState e você o atualiza a cada alteração. Quando um usuário digita em um campo de entrada, o evento onChange é disparado, atualiza o estado e o React re-renderiza o componente com o novo valor.

import { useState } from "react";

function App() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(name);
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">Your name</label> <br />
        <input value={name} id="name" onChange={handleChange} type="text" />
        <button type="submit">Submit</button>
      </form> 
    </>
  );
}

export default App;

Os benefícios dos inputs controlados incluem o seguinte:

• Acesso imediato aos dados do formulário.
• Você pode implementar validação instantânea.
• Você pode desabilitar condicionalmente o botão de envio.
• Você pode controlar o valor de entrada programaticamente.

Entradas não controladas por outro lado são mais vistas em formulários HTML tradicionais. Então, ao invés de lidar com as entradas através do hook useState, as entradas não controladas em HTML mantêm seu próprio estado interno com a ajuda do DOM. Como o DOM controla os valores de entrada, o que você precisa é obter os valores dos campos de entrada com ref. Esta abordagem requer menos código e tem melhor desempenho porque refs não fazem o React re-renderizar. Aqui está um exemplo de entradas não controladas:

import { useRef } from "react";

function App() {
  const nameRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Your</label>{" "}
      <input type="text" ref={nameRef} id="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Uma vantagem muito perceptível dos inputs não controlados é que eles exigem menos código. Eles também têm um desempenho melhor e parecem mais naturais para iniciantes em React que estão familiarizados com HTML. Então, qual você deve usar entre inputs controlados e não controlados?  Use entradas controladas quando precisar de atualizações dinâmicas de formulário, validação em tempo real ou quando quiser sincronizar valores de entrada com o estado. Eles fornecem melhor controle mas exigem mais re-renderizações. Use entradas não controladas quando precisar de formulários mais simples, quiser acessar valores apenas na submissão ou quando estiver trabalhando com código não React. Independentemente de você usar inputs controlados ou não controlados, aqui estão algumas melhores práticas que você deve seguir ao criar formulários em React:

• Sempre previna o envio padrão do formulário.
• Certifique-se de validar as entradas antes da submissão.
• Sempre forneça feedback claro aos usuários com carregamento, erros de validação ou outros estados relacionados.