React 18

useDeferredValue (Tearing)

Mantém uma versão 'atrasada' do valor enquanto o React processa em background, evitando tearing.

Definição

useDeferredValue é um hook que retorna uma versão 'defasada' de um valor. O React mantém o valor anterior estável enquanto processa o novo em prioridade baixa, evitando tearing (estados visuais inconsistentes).

Problema → Solução

Problema

Tearing: partes da UI mostram valores diferentes durante renders pesados — estado visual inconsistente.

Solução

useDeferredValue mantém o valor anterior estável enquanto o novo processa — sem estado partido.

Dica de entrevista

Tip

useDeferredValue = para valores que alimentam renders pesados (filtros, listas, gráficos).

Código

function ListaFiltrada({ filtro }) {
  const filtroDeferido = useDeferredValue(filtro);

  const resultado = useMemo(
    () => heavyFilter(data, filtroDeferido),
    [filtroDeferido]
  );

  const isUpdating = filtro !== filtroDeferido;

  return (
    <div style={{ opacity: isUpdating ? 0.6 : 1 }}>
      <Lista items={resultado} />
    </div>
  );
}

Perguntas de entrevista

Q.useDeferredValue vs useTransition — qual usar?▾

A.useTransition quando você CONTROLA o setState (envolve a chamada). useDeferredValue quando recebe o valor de fora (props, contexto) e não pode envolver o setState.

Q.O que é tearing no React?▾

A.Estado visual inconsistente onde diferentes partes do componente mostram valores de versões diferentes do estado durante renders concorrentes. O Concurrent Mode pode interromper renders, e sem cuidado, partes podem ficar 'rasgadas'.

Q.useDeferredValue substitui debounce de input?▾

A.Pra renders pesados sim, é melhor. Pra calls de API ainda use debounce — useDeferredValue não atrasa execução, só prioriza.

Termos relacionados

4/122← →