Gerenciando o foco com refs e useEffect
Controle o foco em um mundo baseado em componentes.
Gerenciando o foco com refs e useEffect é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Por que é preciso gerenciar o foco
Quando a interface aparece, desaparece ou é atualizada, o foco do teclado pode parar no lugar errado ou desaparecer. No React, você o direciona deliberadamente com referências e efeitos.
Uma ref aponta para um nó do DOM
useRef fornece uma referência estável para um elemento real. Após a renderização, ref.current é o nó real do DOM no qual você pode chamar .focus().
const inputRef = useRef(null);
<input ref={inputRef} />useEffect é executado após a renderização
O foco precisa acontecer depois que o elemento existir no DOM. useEffect é executado depois que o navegador desenha a interface, portanto este é o local seguro para mover o foco.
useEffect(() => {
inputRef.current.focus();
}, []);Foco na montagem
Uma matriz de dependências vazia significa que o efeito é executado uma vez, quando o componente é montado. Use isso para colocar o foco no primeiro campo de um formulário ou etapa.
Foco quando algo é aberto
Adicione uma dependência como isOpen para que o efeito seja executado novamente quando o estado mudar. Quando um painel for aberto, você poderá mover o foco diretamente para dentro dele.
useEffect(() => {
if (isOpen) panelRef.current.focus();
}, [isOpen]);Proteja-se contra valores nulos
Uma ref pode ser nula se o nó ainda não tiver sido renderizado. Verifique se ref.current existe antes de chamar .focus(), para evitar uma falha causada por um elemento ausente.
ref.current?.focus();Torne elementos que não são entradas focáveis
Títulos e divs não podem receber foco por padrão. Adicione tabindex de -1 para que o script possa colocar o foco neles sem incluí-los na ordem natural da tecla Tab.
<div tabindex="-1" ref={regionRef}>...</div>Restaure o foco durante a limpeza
Um efeito pode retornar uma função de limpeza. Use-a para devolver o foco ao elemento acionador quando uma camada for desmontada, para que os usuários não sejam deixados no topo da página.
useEffect(() => {
const prev = document.activeElement;
return () => prev.focus();
}, []);Cuidado com fechamentos obsoletos
Um efeito captura valores da própria renderização. Se você definir o foco com base em dados, inclua-os na matriz de dependências para que o efeito use valores atuais, não obsoletos.
forwardRef para elementos filhos
Para colocar o foco em um elemento dentro de um componente filho, envolva-o com forwardRef. O componente pai passa a manter uma ref para o nó interno e pode colocar o foco nele.
const Field = forwardRef((props, ref) =>
<input ref={ref} {...props} />);Não aplique foco em excesso
Mova o foco somente quando isso realmente ajudar o usuário, como ao abrir uma caixa de diálogo ou mostrar um erro. Capturar o foco em toda renderização frustra todos.
Verificação rápida
Você quer mover o foco do teclado para um elemento logo depois que o React o renderizar. Onde isso deve ser feito?
Recapitulação: refs e efeitos
Combine um useRef com um useEffect para mover o foco após a renderização. Proteja-se contra valores nulos, restaure o foco durante a limpeza e só direcione o foco quando isso ajudar. 🎯
Perguntas Frequentes
A aula “Gerenciando o foco com refs e useEffect” é grátis?
Sim — o texto completo de “Gerenciando o foco com refs e useEffect” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Gerenciando o foco com refs e useEffect”?
Controle o foco em um mundo baseado em componentes. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Gerenciando o foco com refs e useEffect”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Alterações de rota sem recarregar a página
- Gerenciando o foco com refs e useEffect
- Fragmentos, portais e a armadilha da ordem no DOM
- jsx-a11y e proteções no nível dos componentes