Usando React Refs e o hook useRef

O React utiliza uma abordagem declarativa. Você atualiza o estado e o React atualiza a interface do usuário (UI). Isso funciona para a maioria das tarefas.

Mas, às vezes, você precisa sair do Virtual DOM. Pode ser necessário manipular um elemento HTML real diretamente. É aqui que entram as Refs e o hook useRef.

O que é uma Ref? Uma Ref é um ponteiro. Ela conecta o React diretamente a um nó nativo do DOM.

Por que usar useRef em vez de useState? Atualizações de estado disparam uma re-renderização. Isso significa que o React redesenha o componente na tela. Atualizações de Ref não disparam uma re-renderização. Isso as torna perfeitas para valores que mudam, mas não precisam aparecer na UI imediatamente.

Casos de uso comuns: • Focar um campo de entrada (input) automaticamente. • Controlar elementos de vídeo ou áudio (play/pause). • Medir a largura ou altura de um elemento. • Armazenar IDs de timers para intervalos ou timeouts.

Como usar o useRef:

  1. Importe useRef do React.
  2. Inicialize-o: const myRef = useRef(null).
  3. Anexe-o a um elemento: <input ref={myRef} />.
  4. Acesse o valor via: myRef.current.

Exemplo 1: Auto-foco em um input Quando um usuário entra em uma página, você quer que o cursor esteja na caixa de texto. Você usa o useEffect para chamar myRef.current.focus() após a montagem do componente.

Exemplo 2: Um Cronômetro Se você armazenar um ID de setInterval no estado, o componente será renderizado novamente toda vez que o cronômetro avançar. Isso é lento. Se você armazenar o ID em uma ref, o componente permanece rápido. O valor permanece seguro entre as renderizações sem causar trabalho extra para o navegador.

State vs Ref: • State: Dispara re-render. Usado para dados da UI. As atualizações são assíncronas. • Ref: Sem re-render. Usado para acesso ao DOM e memória. As atualizações são síncronas.

Dicas Pro para Seniores: • Evite o uso excessivo. Use refs apenas quando a lógica declarativa falhar. • Limpe a memória. Sempre limpe intervalos ou ouvintes de eventos (event listeners) em sua função de limpeza (cleanup function). • Não escreva em refs durante a renderização. Atualize ref.current apenas dentro do useEffect ou de manipuladores de eventos (event handlers). Isso evita efeitos colaterais (side effects). • Use forwardRef. Se você quiser passar uma ref para um componente filho personalizado, você deve envolver esse filho em React.forwardRef.

Fonte: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde