A melhor forma de criar formulários no React (hook form + zod)

Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

[@giovanio.3581]

Ótimo conteúdo, veio bem na hora que eu precisava!

[@ThiagoOliveira-yk3sx]

Explicação sensacional, Diego!

[@guiaflutterflow]

Zod e React Hook Form: a união perfeita para trabalhar com formulários. Show

[@hoff_mann]

Show diegão! Tenta trazer aquele conteudo de UI Clone, era muito massA!

[@odevfocado]

ótimas dica!

[@clueroi8230]

Bicho, top conteúdos gratuitos, eu to doido para comprar o curso, se o gratuito está nesse nível imagina o pago

[@moranisdev]

massa demais !!

[@Damasgu]

ótimo vídeo.

[@entrepreneurdrive]

Podia rolar um video daqueles formulários avançados que tem steps

[@carlosricardoziegler2650]

Usamos muito hook form e ZOD ajuda muito. Acho que perguntei antes mas vc acha que Bun esta pronto para prod ?

[@pedrossoares]

Show, nessa validação do nome do produto seria legal adicionar um número mínimo de carácteres para não permitir salvar um produto com nome vazio. Tipo .string().min(3)…

[@RodrigoValenteInk]

Só tem q tomar cuidado com asiáticos, que tem nomes como yu

[@uelitoncamargo5621]

Caramba, resolveu minha vida kkkk

[@christianlopesdesouza6871]

Essas lives passam em qual lugar?

[@luan9909]

entre hook form + zod e formik + yup, qual é o melhor a se usar?

[@EdTheatch]

qual a lib de componentes de ui que ele ta usando ai ?

[@ioanefaumui3556]

Faço dessa forma, só que com o yup. Pretendo começar a fazer projetos com zod em breve.

[@vitvitvitvitvitvitvitvit]

quase a mesma coisa shahfsuhfds, mas o zod tem uma integração melhor com typescript. Se for usando js, acredito que o yup é melhor.

[@GarbDeveloper]

Vai disponibilizar no github?

[@pthiago_s5075]

Meu TCC tá com esse combo ai no Next.js

[@dididugamer]

Galera... alguém sabe como é aquele SNIPPET ali que o Diego faz em um novo arquivo que cria ao mesmo tempo a função e já as props da função?

[@ozaskean7055]

Se você já tem os snippets do react, acho que só de digitar “rfc” ou “rfce” e dar enter, vai criar. Acho que é isso.. não me lembro de instalar outra coisa e não estou pelo pc agora

[@peeksz]

Alguem sabe onde acompanhar as lives ao vivo? Nao achei os vods no canal da rocketseat nem no cana do diego

[@JeffersonSilva-tn8yb]

Ele faz live as vezes no Twitch

[@peeksz]

qual canal?

[@willianferreira1634]

Fala Diego, e aquela lib de vcs, a "Unform", foi descontinuada?

[@dieegosf]

Sim, o React Hook Form é a solução perfeita pra forms, não tem porque eu ficar "concorrendo" com uma lib perfeita.

[@willianferreira1634]

@@dieegosf Show diego, sempre usei o RHF, mas gostei muito da abordagem do unform, e usei ele num projetinho pequeno no ano passado, mas vi que não tinha atualizações. Valeu pela resposta!

[@Zhaunes]

União perfeita até precisar usar dropdown e outros recursos mais avançados de formulário, aí o perfeito já não é mais tão perfeito

[@dieegosf]

Então, é que daí quando é um custom element não existe NENHUMA opção no mercado que vai simplesmente ser um "register". No React Hook Form você pode usar o pra transformar aquele elemento em um controlled component: react-hook-form.com/docs/usecontroller/controller

[@Zhaunes]

@@dieegosf estou desenvolvendo um banco digital pra um cliente, tive que usar o Controller, ainda bem que tem essa funcionalidade. Mas confesso que conforme a complexidade vai aumentando, a dor de cabeça também, principalmente com esses Schemas do Zod. Mas enfim, é uma tecnologia boa sim, usei várias vezes esse combo já

[@RenatoMassi]

Eu uso hook forms a um bom tempo, pessoalmente eu prefiro fazer um wrapper de todos os meus componentes e utilizar o useController no lugar do Controller, fica muito mais limpo, passo somente a prop control retornada pelo userForm e a name, o useController retorna igual o render do Controller, field e fieldState, alem de ficar mais clean, fica muito mais facil criar componentes customizados

[@GuilhermeSilva-mc7nm]

Eu uso o RHF com YUP, é muito parecido.

[@dieegosf]

Sim, Yup, Joi, Typebox, Valibot, Zod, são ferramentas semelhantes :)

[@mateuscorreiaazevedo4950]

eu usava o Zod, mas to preferindo o Yup por conta de algumas validações a mais que precisei fazer em um projeto que já utiliava o yup, aí curti mais...

[@onildo_costa]

Tem uma live inteira ou então um vídeo do diego fazendo esse app inteiro?

[@dieegosf]

Tem, na Twitch :) (usuário dieegosf)

[@onildo_costa]

@@dieegosf o vod todo tá disponível Diegão?

[@marcos.padilha]

Diego, e se precisar validar as entradas enquanto digita? Como vc faz? Ex.: campo de CPF, informar ao usuário que o formato é inválido enquanto ele digita. Obs.: em muitos casos a experiência do usuário é melhor quando avisamos ele como deve ser feito para enviar o form uma vez só, não deixar ele preencher tudo e só validar no submit (provavelmente terá retrabalho se algum campo estiver inválido e ele não sabia enquanto preenchia).

[@dieegosf]

Basta você passar o "mode" como "onChange" no "useForm" (react-hook-form.com/docs/useform#mode)

[@marcos.padilha]

@@dieegosf Caraca, que honra. O cara me respondeu hehehe. Mas consigo aplicar essa validação "em tempo real" para apenas um dos campos do form ou vai valer para todos sempre?

[@marcos.padilha]

@@dieegosf E aproveitando que tu respondeu, quero agradecer por todo o aprendizado até hoje. Comecei desde o Skylab. A até então Semana Omnistack, com o projeto Dev Radar (se não me engano), serviu de base para o meu TCC na época e daí em diante evolui muito. Só agradecer e parabenizar por toda a equipe. O trabalho de vocês é fod@! Espero que continuem com essa essência e vontade de ajudar a galera. Vocês merecem muito sucesso. Se hoje posso dizer que mudei minha realidade através da qualificação e do conhecimento, vocês tem grande parcela nessa trajetória. Valeu de verdade.

[@dieegosf]

@@marcos.padilhaNesse caso você precisa usar o "onChange" presente no "register" do campo específico e nessa função repassada ao "onChange" você chama o método "trigger" que é devolvido pelo "useForm". O trigger é uma maneira de disparar a validação manualmente em um campo.

[@marcos.padilha]

@@dieegosf Valeu Diegão! Não sei se o meu KZbin bugou ou o que, mas meu comentário sumiu kkk Basicamente agradeci pelo repasse de conhecimento pra galera e pela participação na minha trajetória como Dev. Graças à vocês e outros professores da internet, consegui mudar a minha realidade. Sigam nessa pegada. Desejo todo o sucesso pra vocês!

[@nicolettifps]

Qual o theme do vscode?

[@alangabriel1671]

Min theme

[@fabioribeirodecarvalho2382]

Sinceramente não entendi a função do Zod, parece adicionar uma camada que poderia ser resolvido apenas com TS e `useForm`....o q o zod faz exatamente nesse caso, pois a validação não deveria ser feita com o próprio useForm? e utilizar o error caso precise mostrar mensagens como a documentção do react-hook-form sugere.... Em relação a validação, o useForm já traz essa ferrameta no register: {register("test", {required: true, })}

[@felip_nov]

alguém sabe aonde ele f

[@dieegosf]

e morreu no meio do comentário, mas acredito que a sequência era "aonde ele faz live", então: twitch (usuário dieegosf)

[@felip_nov]

@@dieegosf oxi, meu comentário morreu KKKKKKKK. vlww Diegão

[@contaassinante5984]

Faltou mostrar como exibir a mensagem de errro para cada input

[@dieegosf]

Boa! De qualquer forma, pra quem chegou nesse comentário, você pode obter os erros de dentro do "useForm" da seguinte forma: const { ..., formState: { errors } } = useForm(...)

[@contaassinante5984]

@@dieegosf obrigado, mestre

[@the.agent.k]

E formik?

[@dieegosf]

Particularmente não curto a API do Formik, mas é uma opção também.

[@the.agent.k]

@@dieegosf uso com o component

[@IgorSprovieri]

Prefiro Formik + Yup