⚛️⏳Parte 3: Criando um Timer com Histórico em React

Seguindo com a terceira parte do projeto que construí na formação React da Rocketseat, um projeto de duas páginas/telas, onde uma tela contém o timer, e a outra tela contém o histórico dos ciclos realizados. Nesta terceira parte do projeto vamos focar no formulário, validação e desempenho. Caso queira adquirir os cursos da Rocketseat com o meu cupom de desconto Acesse esse link Links úteis: Meu repositório do projeto Repositório oficial do Rocketseat Figma do projeto feito pela Rocketseat Capítulos: 1 - Controlled vs Uncontrolled 2 - O melhor dos dois mundos com React Hook Form 3 - Usando React Hook Form 4 - Validação com Zod 5 - Validação com o botão habilitado 6 - TypeScript no Formulário 7 - Resetando o Formulário 1 - Controlled vs Uncontrolled Neste conteúdo vamos entender como podemos criar bons formulários em React. Olhando o nosso formulário da página Home temos o campo onde colocamos o nome da tarefa e outro campo onde informamos por quanto tempo iremos trabalhar nessa tarefa. E, a primeira coisa que precisamos é de validação nesses campos, para que o usuário não faça o submit desse formulário sem preencher esses campos, ou preenchendo com o valor errado. Outra coisa é o botão que fica ativo somente quando todos os campos estiverem preenchidos. Então, precisamos monitorar de alguma forma se o usuário está preenchendo, se já preencheu esses campos, podemos dizer em tempo real, para só depois habilitar o botão. Há duas formas de trabalhar com formulários, a forma controlada e a forma não controlada (Controlled / Uncontrolled), e é muito importante entender esses dois termos, porque eles têm muito a ver como o React funciona. A forma controlada (Controlled) é sobre manter em tempo real o estado, a informação que o usuário insere na nossa aplicação numa variável do componente. Então há todo momento que o usuário estiver digitando no input, o estado é atualizado com a nova informação, assim sempre teremos o valor mais atual do que o usuário digitou. Estamos falando de formulário, mas isso pode ser usado em qualquer lugar que tenha um input. Um exemplo fazendo da forma controlada: Como temos esse valor em tempo real, a gente consegue facilmente ter acesso a esse valor no momento de fazer o submit. E, facilmente, conseguimos refletir visualmente alterações na interface, baseado no valor desses inputs. Um exemplo disso é quando queremos habilitar o botão apenas quando o valor da tarefa esteja preenchido: Então Controlled Components dentro do React, ou seja, qualquer componente que seja monitorado em tempo real o input do usuário, traz muita fluidez para mostrar ou deixar de mostrar algo na interface da aplicação, baseado nesse input do usuário. O lado negativo do componente controlado Toda vez que a gente faz uma atualização de estado, a gente provoca uma nova renderização, ou seja, toda vez que o setTask é chamado por qualquer motivo, o React precisa recalcular todo o conteúdo do componente, do estado que mudou. Isso de recalcular todo o conteúdo do componente, não necessariamente é lento, mas se a interface for muito complexa, com muita informação, pode, sim, virar um gargalo. Então em alguns casos, lidar com formulários desta maneira controlada, pode ser um problema para a aplicação em questão de desempenho. Na maioria das vezes não vai ser um problema, mas em alguns momentos, vai ser. A forma Uncontrolled Como seria então a forma Uncontrolled? Desta forma Uncontrolled a gente acaba perdendo a fluidez. Quando é indicado cada? Controlled (Monitorado em tempo real): formulários simples com poucos campos; interface simples; formulário de login, por exemplo; Uncontrolled (Não Monitorado): formulários gigantes com muitos campos; 2 - O melhor dos dois mundos com React Hook Form Nessa parte vamos utilizar a biblioteca React Hook Form. Ela nos ajuda a trabalhar com Controlled Components sem perder o desempenho, evitando renderizações desnecessárias. O React Hook Form é uma biblioteca popular para gerenciar formulários em React por várias razões importantes: Performance otimizada - Minimiza a quantidade de re-renderizações usando um sistema de registro de campos não controlados, o que melhora significativamente a performance comparado com formulários controlados tradicionais. Menos código - Reduz significativamente a quantidade de código necessário para gerenciar formulários. Você não precisa criar estados para cada campo nem gerenciar suas atualizações manualmente. Validação eficiente - Oferece validação integrada e fácil de implementar, incluindo: Validação em tempo real Validação personalizada Integração com bibliotecas como Yup, Zod ou Joi Melhor experiência de desenvolvimento - Fornece: Tipagem forte com TypeScript DevTools para debugar Tratamento de erros intuitivo Gerenciamento de estados do formulário - Gerencia automaticamente estados como: touched/untouched dirty/pristine validação submissão

Feb 26, 2025 - 00:37

⚛️⏳Parte 3: Criando um Timer com Histórico em React

Seguindo com a terceira parte do projeto que construí na formação React da Rocketseat, um projeto de duas páginas/telas, onde uma tela contém o timer, e a outra tela contém o histórico dos ciclos realizados.

Nesta terceira parte do projeto vamos focar no formulário, validação e desempenho.

Caso queira adquirir os cursos da Rocketseat com o meu cupom de desconto Acesse esse link

Links úteis:

Capítulos:

1 - Controlled vs Uncontrolled
2 - O melhor dos dois mundos com React Hook Form
3 - Usando React Hook Form
4 - Validação com Zod
5 - Validação com o botão habilitado
6 - TypeScript no Formulário
7 - Resetando o Formulário

1 - Controlled vs Uncontrolled

Neste conteúdo vamos entender como podemos criar bons formulários em React.

Olhando o nosso formulário da página Home temos o campo onde colocamos o nome da tarefa e outro campo onde informamos por quanto tempo iremos trabalhar nessa tarefa. E, a primeira coisa que precisamos é de validação nesses campos, para que o usuário não faça o submit desse formulário sem preencher esses campos, ou preenchendo com o valor errado.

Outra coisa é o botão que fica ativo somente quando todos os campos estiverem preenchidos. Então, precisamos monitorar de alguma forma se o usuário está preenchendo, se já preencheu esses campos, podemos dizer em tempo real, para só depois habilitar o botão.

Há duas formas de trabalhar com formulários, a forma controlada e a forma não controlada (Controlled / Uncontrolled), e é muito importante entender esses dois termos, porque eles têm muito a ver como o React funciona.

A forma controlada (Controlled) é sobre manter em tempo real o estado, a informação que o usuário insere na nossa aplicação numa variável do componente. Então há todo momento que o usuário estiver digitando no input, o estado é atualizado com a nova informação, assim sempre teremos o valor mais atual do que o usuário digitou.

Estamos falando de formulário, mas isso pode ser usado em qualquer lugar que tenha um input.

Um exemplo fazendo da forma controlada:

Como temos esse valor em tempo real, a gente consegue facilmente ter acesso a esse valor no momento de fazer o submit. E, facilmente, conseguimos refletir visualmente alterações na interface, baseado no valor desses inputs.

Um exemplo disso é quando queremos habilitar o botão apenas quando o valor da tarefa esteja preenchido:

Então Controlled Components dentro do React, ou seja, qualquer componente que seja monitorado em tempo real o input do usuário, traz muita fluidez para mostrar ou deixar de mostrar algo na interface da aplicação, baseado nesse input do usuário.

O lado negativo do componente controlado

Toda vez que a gente faz uma atualização de estado, a gente provoca uma nova renderização, ou seja, toda vez que o setTask é chamado por qualquer motivo, o React precisa recalcular todo o conteúdo do componente, do estado que mudou. Isso de recalcular todo o conteúdo do componente, não necessariamente é lento, mas se a interface for muito complexa, com muita informação, pode, sim, virar um gargalo.

Então em alguns casos, lidar com formulários desta maneira controlada, pode ser um problema para a aplicação em questão de desempenho. Na maioria das vezes não vai ser um problema, mas em alguns momentos, vai ser.

A forma Uncontrolled

Como seria então a forma Uncontrolled?

Desta forma Uncontrolled a gente acaba perdendo a fluidez.

Quando é indicado cada?

Controlled (Monitorado em tempo real):
- formulários simples com poucos campos;
- interface simples;
- formulário de login, por exemplo;
Uncontrolled (Não Monitorado):
- formulários gigantes com muitos campos;

2 - O melhor dos dois mundos com `React Hook Form`

Nessa parte vamos utilizar a biblioteca React Hook Form. Ela nos ajuda a trabalhar com Controlled Components sem perder o desempenho, evitando renderizações desnecessárias.

O React Hook Form é uma biblioteca popular para gerenciar formulários em React por várias razões importantes:

Performance otimizada - Minimiza a quantidade de re-renderizações usando um sistema de registro de campos não controlados, o que melhora significativamente a performance comparado com formulários controlados tradicionais.
Menos código - Reduz significativamente a quantidade de código necessário para gerenciar formulários. Você não precisa criar estados para cada campo nem gerenciar suas atualizações manualmente.
Validação eficiente - Oferece validação integrada e fácil de implementar, incluindo:
- Validação em tempo real
- Validação personalizada
- Integração com bibliotecas como Yup, Zod ou Joi
Melhor experiência de desenvolvimento - Fornece:
- Tipagem forte com TypeScript
- DevTools para debugar
- Tratamento de erros intuitivo
Gerenciamento de estados do formulário - Gerencia automaticamente estados como:
- touched/untouched
- dirty/pristine
- validação
- submissão

Para fazer a instalação execute o comando em seu terminal:

$ npm i react-hook-form

commit: build: ➕ add react-hook-form lib $ npm i react-hook-form

3 - Usando `React Hook Form`

No arquivo src/pages/Home/index.tsx vamos importar a função useForm:

import { useForm } from 'react-hook-form'

useForm é um hook. Por convenção, um hook começa com use no nome. Os hooks são funções que acoplam uma funcionalidade em um componente existente.

useForm() retorna um objeto, então conseguimos fazemos a desestruturação desse objeto, e as funções principais são register e handleSubmit:

export function Home() {
  const { register, handleSubmit } = useForm()
}

register é uma função que vai adicionar um input ao nosso formulário. useForm() é como se a gente tivesse criado um novo formulário para a aplicação. E a função register diz quais os campos que vamos ter no nosso formulário.

Para registrar o TaskInput:

<TaskInput
 id="task"
 list="task-suggestions"
 placeholder="Dê um nome para o seu projeto"
 {...register("task")}
/>

A função register recebe o nome do input como argumento/valor e retorna vários métodos/funções e propriedades usadas no HTML:

Então com o spread operator {...register("task")} estamos pegando todos os métodos e as propriedades do register e passando para o componente TaskInput.

E o mesmo para o MinutesAmountInput:

<MinutesAmountInput
  type="number"
  id="minutesAmount"
  placeholder="00"
  step={5}
  min={5}
  max={60}
  {...register("minutesAmount", { valueAsNumber: true })}
/>