Hooks

useRef & forwardRef

useRef retorna ref mutável que persiste entre renders. forwardRef expõe ref a componentes pai.

Definição

useRef cria um objeto { current: ... } que persiste entre renders sem causar re-render quando alterado. Usado para: 1) Acessar elementos DOM. 2) Guardar valores mutáveis (timers, instâncias). forwardRef permite que componentes funcionais recebam refs do pai.

Problema → Solução

Problema

Precisa acessar um elemento DOM (focar input, scroll, medir). Ou guardar valor que muda mas não deve causar re-render.

Solução

useRef para refs locais. forwardRef para expor refs internas a componentes pais. ref.current é mutável e não dispara re-render.

Dica de entrevista

Tip

Mudar ref.current NÃO causa re-render. Se precisa que UI atualize quando o valor muda, use useState.

Código

// useRef + forwardRef
const Input = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

function Form() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus(); // acesso direto ao DOM
  };

  return (
    <>
      <Input ref={inputRef} />
      <button onClick={handleClick}>Focar</button>
    </>
  );
}

Perguntas de entrevista

Q.useRef vs useState — quando usar cada?▾

A.useRef: valores que não afetam a renderização (timers, contadores internos, refs DOM). useState: valores que, quando mudam, devem re-renderizar a UI.

Q.O que é forwardRef?▾

A.Por padrão, refs não passam para componentes funcionais (props.ref é undefined). forwardRef envolve o componente para receber e repassar refs. Necessário para componentes de biblioteca (Button, Input, etc).

Q.useImperativeHandle — para que serve?▾

A.Customiza o que o ref do componente expõe ao pai. Em vez de expor o DOM bruto, você expõe métodos específicos (focus, scrollIntoView, validate). Melhora encapsulamento.

Termos relacionados

25/122← →