Performance

Web Workers no React

Workers processam código pesado em thread separada sem travar a UI. Comunicação via postMessage + setState.

Definição

Web Workers permitem rodar JavaScript em threads separadas do main thread. Não têm acesso ao DOM. Ideais para cálculos pesados (parsing, encriptação, image processing). Comunicação via postMessage/onmessage.

Problema → Solução

Problema

Cálculos pesados no thread principal travam a UI — scroll, animações e inputs ficam sem resposta.

Solução

Criar Worker no useEffect (uma vez). Enviar via postMessage. Receber resultado e aplicar via setState.

Dica de entrevista

Tip

Nunca criar Worker dentro do render ou de useMemo — cria nova thread a cada render. Sempre useEffect + useRef.

Código

useEffect(() => {
  workerRef.current = new Worker(
    new URL('./worker.js', import.meta.url)
  );
  workerRef.current.onmessage = ({ data }) => setResult(data);
  return () => workerRef.current?.terminate();
}, []);

Perguntas de entrevista

Q.Worker vs SharedWorker vs Service Worker?▾

A.Worker: thread por aba. SharedWorker: compartilhado entre abas da mesma origem. Service Worker: roda em background mesmo sem aba aberta, intercepta requests (PWA, offline).

Q.Comlink simplifica Workers?▾

A.Sim. Comlink (Google) abstrai postMessage/onmessage em chamadas async normais. Você chama worker.heavyFunc(data) como se fosse local, e ele lida com a comunicação por baixo.

Q.Workers podem fazer fetch?▾

A.Sim, fetch funciona em Workers. Útil para descarregar parsing de respostas grandes (JSON gigante, CSV, etc.) sem travar a UI.

Termos relacionados

19/122← →