Como usar React Hook Form Watch para formularários dinâmicos

E aí, devzada! Beleza? Vamos falar de coisa boa: React Hook Form Watch. Você que já suou a camisa tentando gerenciar estado de input e refazer render desnecessário, segura essa que hoje eu vou te mostrar o poder do React Hook Form Watch. É tipo um superpoder pra quem quer controle fino sobre inputs sem se afogar em um mar de estados controlados. Portanto, bora!

Por que o React Hook Form salva sua pele

Seguinte, se você já teve que lidar com formulários complexos, sabe que gerenciar estados com useState em cada input é um rolê pesado. Cada mudança dispara renderizações e pode virar um caos total. No entanto, o React Hook Form resolve boa parte desse trampo sujo e deixa tudo organizadinho.

Coisas que fazem o RHF ser massa:

• Performance: Ele evita renderizações desnecessárias porque não depende do estado do React pra tudo.
• Validações integradas: Validação direto no registro do input é prático demais.
• Simplicidade: Seus formulários ficam muito mais limpos e fáceis de ler.

Agora bora meter a mão na massa e aprender como usar o React Hook Form Watch na prática.

O que o Watch faz de bom?

Basicamente, o Watch é tipo aquele colega que fica de olho em tudo e te avisa quando algo muda. Com ele, você pode observar valores de inputs registrados em tempo real e fazer mágica na interface. Por isso, ele é uma mão na roda!

Imagina isso: um select que muda os valores conforme o input do usuário. Com Watch, você faz isso de boa sem precisar de malabarismos. Além disso, a facilidade em implementar é um ponto forte.

Quer um guia completo? O site oficial do React Hook Form tem tudo bem documentado.

Passo a passo do rolê

1. Configurando o React Hook Form

Primeiro de tudo, instala a bagaça:

npm install react-hook-form

Depois, configure o useForm no seu componente:

import { useForm } from "react-hook-form";

const Formulario = () => {
  const { register, handleSubmit, watch } = useForm({
    defaultValues: {
      product: "",
      quantity: 1,
    },
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Inputs aqui */}
    </form>
  );
};

Pronto, você já tem o RHF rodando no seu projeto. Portanto, bora pro próximo.

• 
  Melhor Linguagem de Programação 2025: Explorando as Opções para sua Carreira em Tecnologia
• 
  Hidratação no Front-End: O que é e como ela resolve problemas de SSR e CSR
• 
  Como Sair de Pleno para Senior em 2025: O Guia Definitivo Sem Ficar Batendo Cabeça
• 
  Guia Definitivo: Como e Quando Usar find e findIndex no JavaScript
• 
  Diferença entre every e some no JavaScript: O Guia Definitivo para Quem Já Quebrou a Cabeça com Arrays
• 
  Testes Unitários no Angular: Chega de Código Porco

2. Registrando os campos

Agora é só adicionar o register nos seus inputs e pronto:

<select {...register("product")}> 
  <option value="Product 1">Product 1</option>
  <option value="Product 2">Product 2</option>
</select>

<input type="number" {...register("quantity")} />

Quer mais detalhes sobre como configurar inputs? Este artigo do Blog do Glaubin explica tudinho.

3. Monitorando com o Watch

A graça do Watch é que ele fica de olho no que importa. Aqui vai um exemplo:

const watchedProduct = watch("product");
const watchedQuantity = watch("quantity");

return (
  <div>
    <p>Produto Selecionado: {watchedProduct}</p>
    <p>Quantidade: {watchedQuantity}</p>
  </div>
);

Se você mudar o produto ou a quantidade, os valores já aparecem atualizados ali em tempo real. Dessa forma, fica fácil manter tudo sincronizado.

4. Fazendo cálculos dinâmicos

Agora vamos deixar isso um pouco mais útil: calcular o total baseado no produto e na quantidade.

const calculateTotal = (price, quantity) => price * quantity;

const productPrice = watchedProduct === "Product 1" ? 10 : 20;
const total = calculateTotal(productPrice, watchedQuantity);

return (
  <div>
    <p>Total: ${total}</p>
  </div>
);

Agora é só mexer nos inputs e ver o total mudando em tempo real. Ademais, você pode ajustar para mais funcionalidades conforme a necessidade. Top, né?

Truques do Watch

1. Observando todos os campos

Se você quiser observar todos os inputs de uma vez, é só fazer assim:

const allFields = watch();
console.log(allFields);

Isso retorna um objeto com todos os valores do formulário. Ideal pra quem tem formulários cheios de campos. Aliás, é uma solução muito útil em formulários mais complexos.

2. Valores padrão são importantes

Um detalhe importante: o Watch executa antes do registro dos inputs. Então, se você não passar valores padrão com defaultValues, ele pode retornar undefined. Sendo assim, sempre defina esses valores para evitar problemas.

3. Usando useWatch

Se você quer observar apenas um campo sem causar renders desnecessários, use o useWatch. Ele é uma alternativa mais controlada:

import { useWatch } from "react-hook-form";

const watchedProduct = useWatch({ control, name: "product" });

Quer aprender mais? Confira esse guia detalhado sobre useWatch.

Quando usar React Hook Form?

“Pô, Glaubin, e se meu formulário for simples? Preciso disso tudo?”

Olha, se for um formulário de login com dois campos, nem precisa usar RHF. Contudo, se você tem formulários mais complexos, dinâmicos ou que precisam de validações robustas, ele é um baita investimento.

Conclusão

O React Hook Form Watch é tipo aquele atalho esperto que resolve vários problemas antes de você até perceber que tinha. Ele ajuda a criar formulários mais dinâmicos, performáticos e simples de manter. Portanto, vale muito a pena usar.

Se você curtiu essas dicas sobre React Hook Form Watch, comenta aí o que achou ou compartilha como você usa o RHF nos seus projetos. Valeu e até a próxima, devzada!

Links Relacionados:

Documentação Oficial do React Hook Form

Angular performance Angular Signals Apps Multiplataforma automação de tarefas Backend Boas Práticas boas práticas Git controle de versão desenvolvedores desenvolvimento backend Desenvolvimento de Software Desenvolvimento Frontend Desenvolvimento Mobile Desenvolvimento Web desenvolvimento ágil devops dicas para devs escalabilidade ferramentas de Git ferramentas de programação Front-end Git Hooks integração contínua inteligência artificial JavaScript Linguagens de Programação Media Queries mercado de tecnologia Mercado de Trabalho Tech Node.js produtividade dev Programação Programação Orientada a Objetos programação para iniciantes programação reativa Python React React Suspense Rust Tecnologia Trunk-Based Development web development workflow Git workflows Git