Curso avançado de React: #07 - Atualizando registro por seu id com handleSubmit do react hook form

Sobre esta lección

Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nessa aula do curso avançado de React, vamos finalmente implementar a funcionalidade de edição da nossa Todo List. Até agora, conseguimos adicionar novos itens, mas ainda faltava o comportamento completo de editar um registro existente. Nesta etapa, vamos utilizar o useEffect junto com o React Hook Form para buscar os dados de um todo pelo ID e preencher o formulário com essas informações automaticamente, garantindo uma experiência fluida e sem complicações para o usuário. Durante a aula, também vamos trabalhar a lógica de decisão entre criar ou atualizar um item com base no ID recebido pela rota. Isso significa que, ao clicar em um item da lista, ele será carregado no formulário e poderá ser editado normalmente. Mostro ainda como usar a função reset do React Hook Form para popular os dados no formulário e como gerenciar os estados de carregamento com useState para evitar que o usuário edite o formulário antes de ele estar pronto. Além disso, discutimos alguns ajustes de usabilidade, como desabilitar campos enquanto os dados estão sendo carregados ou enviados, prevenindo bugs e garantindo consistência. Essa aula também é essencial para quem está focando em entregar aplicações com experiência de usuário profissional. Discutimos sugestões para melhorar a interface, como usar um spinner ou barra de progresso enquanto os dados carregam, e falamos sobre detalhes técnicos importantes do React Hook Form com TypeScript, como a tipagem dos dados no handleSubmit e o uso correto de condicionais baseadas na URL. Se você quer construir uma aplicação React robusta e preparada para produção, essa aula é fundamental. Então, confere aí, implementa junto comigo e comenta se surgir qualquer dúvida! Links mencionados no vídeo: 📖 Repositório do projeto - https://github.com/lvsouza/curso-base-de-react/tree/28b4d54d852472114e1538d3b45090afdd73d68a 🗨️ Discord - https://discord.gg/ZC7JrPZn7P 🎬 CodarSe - https://codarse.com Outros cursos no canal: 🎩 Figma para DEVs - https://youtu.be/4rSPV1NbM10 ☪️ Curso de estilização no React - https://youtu.be/oUbPkR799fc 💎 Curso base de React - https://youtu.be/ggtWTKbhN_U 👑 React, Material UI 5 e Typescript - https://youtu.be/wLH1Vv86I44 🏆 Curso de API Rest, Node e Typescript - https://youtu.be/SVepTuBK4V0 Livros recomendados: 📘 Código limpo - https://amzn.to/43Xiick 📘 Arquitetura limpa - https://amzn.to/3ZMCStr 📘 Migrando sistemas monolíticos - https://amzn.to/45ByPDZ 📘 The Micro SaaS Handbook - https://amzn.to/4jCan93 Conteúdo: 0:00 | Apresentação da aula 0:35 | Avisos importantes 0:59 | Entendendo o problema 2:00 | Carregando os detalhes de um registro para edição 6:00 | Atualizando o registro pelo id 9:50 | Adicionando o loading para o carregamento do dados na edição 12:25 | Finalização e agradecimentos CODARSE - [Membros apenas] Formulários avançados #ReactJS #Vite #TypeScript #JavaScript #FrontEnd #Programação