useRef: referências sem nova renderização

Nem toda informação precisa aparecer na tela. useRef guarda um valor mutável entre renderizações sem pedir uma nova renderização quando current muda. Um uso muito comum é acessar um elemento do DOM.

import { useRef, useState } from 'react';

export default function SearchBox() {
  const inputRef = useRef(null);
  const [query, setQuery] = useState('');

  function clearAndFocus() {
    setQuery('');
    inputRef.current?.focus();
  }

  return (
    <section>
      <label htmlFor="search">Busca</label>
      <input
        ref={inputRef}
        id="search"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
      />
      <button type="button" onClick={clearAndFocus}>
        Limpar e focar
      </button>
    </section>
  );
}

O texto digitado fica em estado porque muda a interface. A referência do input fica em ref porque só precisamos do nó DOM para chamar focus().

Refs também podem guardar ids de timer ou valores anteriores que não participam da renderização.

• ref.current: persiste entre renderizações.
• Alterar ref não re-renderiza: o componente.
• DOM ref: é útil para foco, medição e integração com APIs imperativas.

Dica: não use ref como "atalho" para fugir do estado. Se mudar o valor deveria atualizar o que aparece na tela, estado continua sendo a ferramenta principal.

No próximo nó, vamos combinar Hooks existentes em um Custom Hook reutilizável.