Curso base de React 2025: #26 - Como usar o useRef, entenda de uma vez mesmo que seja dev jr.

Sobre esta lección

Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nessa aula do curso Base de React, eu vou te mostrar como usar o hook useRef para resolver um problema comum em formulários: dar foco automático em um input depois de uma ação. A gente já avançou bastante na construção do nosso to-do list, mas agora vamos dar aquele toque a mais na usabilidade. Depois de adicionar uma nova tarefa, queremos que o cursor volte automaticamente para o input, pronto para o próximo item. E é aí que o useRef entra em cena, te permitindo acessar diretamente elementos HTML dentro do React. Só que o useRef vai muito além disso. Ele não serve apenas para focar inputs ou acessar elementos da tela. Na verdade, ele é uma ferramenta poderosa para armazenar qualquer tipo de valor que não precisa disparar uma nova renderização no componente. Ou seja, se tu precisa guardar um contador, uma lista, ou qualquer dado que vai ser usado internamente sem impactar o render da tela, o useRef é a escolha certa. A aula vai te mostrar isso na prática, com exemplos bem simples para te ajudar a entender quando e por que usar esse hook. Se tu já está curtindo o curso até aqui, essa aula é mais uma peça importante para aprofundar teu conhecimento em React. Além de aprender como usar o useRef de forma eficiente, tu ainda vai entender melhor a diferença entre estados e referências no React. E lembra: o curso avançado, que é a continuação direta dessas aulas, já está disponível para os membros do canal. Então, se tu quiser seguir aprendendo comigo e mergulhar ainda mais fundo no React, considera se tornar membro e garantir acesso completo. Bora pra aula! Links mencionados no vídeo: 📖 Repositório do projeto - https://github.com/lvsouza/curso-base-de-react/tree/abf7193a455b260fcf72210c3f218ca6e8bf8f33 🗨️ 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:25 | Avisos importantes 1:00 | Entendendo o problema 2:15 | Entendendo a base de uso para o useRef 6:40 | O que mais dá pra fazer com o useRef 11:50 | Finalização e agradecimentos CODARSE - Navegação entre páginas e parâmetros na URL #ReactJS #Vite #TypeScript #JavaScript #FrontEnd #Programação