Como usar web workers resolveu um problema de processamento no meu trabalho?
Source: Dev.to
Contexto do Problema
Para começar eu tinha dois objetos diferentes e precisava unificá‑los em um só. Embora os objetos tivessem campos parecidos, os nomes eram escritos de forma distinta em cada um. Normalizar esses objetos não era viável no meu cenário, então precisei criar uma solução alternativa.
Pesquisei opções com a ajuda de IA e cheguei a duas possibilidades:
- Processamento no servidor – a versão do React que eu utilizava ainda não oferecia a feature necessária.
- Web Worker – executar o processamento no cliente, sem comprometer a performance da aplicação.
O que é um Web Worker?
Um Web Worker permite executar scripts em segundo plano, em uma thread separada da thread que controla a UI. Assim, enquanto a UI carrega layout e componentes, o worker pode processar dados intensivos, reduzindo o tempo de espera de minutos para segundos.
Implementação Prática
Separação da lógica
Crie um arquivo isolado que contenha a lógica “pesada”. No exemplo abaixo, o arquivo foi nomeado unificador.worker.js.
Comunicação via mensageria
O script principal envia os dois objetos brutos ao worker; o worker realiza a comparação e normalização e, ao terminar, devolve o resultado.
// unificador.worker.js
self.onmessage = function (e) {
const { objetoA, objetoB } = e.data;
// Lógica de mapeamento de campos, por exemplo 'nome_usuario' vs 'user_name'
const resultado = objetoA.map(item => {
const correspondente = objetoB.find(b => b.ref_id === item.id);
return { ...item, ...correspondente };
});
self.postMessage(resultado);
};Uso no componente React
// Importando o worker
const worker = new Worker(new URL('./unificador.worker.js', import.meta.url));
// Enviando os dados para processamento
worker.postMessage({ objetoA, objetoB });
// Recebendo o resultado e atualizando o estado
worker.onmessage = (e) => {
setDadosUnificados(e.data);
};