Usare i web workers in React

In Javascript i web workes ci permettono di eseguire dei long task in background, senza impattare sulla UI.

In questo articolo vediamo un esempio basico di come usarli in React.

Cominciamo con il creare una funzione che crea un pò di dati fittizzi (src/fetc_data.ts):

export function fetchData() {
  const items = [];

  for (let i = 0; i < 25000; i++) {
    let item = {
      id: i + 1,
      nome: "sito " + i
    };

    items.push(item);
  }

  return Promise.resolve(items);
}

Nulla di trascendentale.

A questo punto creaimo il file src/app.worker.js:

export default () => {
    self.addEventListener('message', e => {
        if (!e) return;
        let {items, type} = e.data;

        if (type === "asc") {
            items = items.sort((a, b) => a.nome - b.nome);
        } else {
            items = items.sort((a, b) => b.nome - a.nome);
        }

        postMessage(items);
    })
}

Creiamo anche una classe per il WebWorker (src/WebWorker.js):

export default class WebWorker {
    constructor(worker) {
        const code = worker.toString();
        const blob = new Blob(['(' + code + ')()']);
        return new Worker(URL.createObjectURL(blob));
    }
}

Questa ci serve sostanzialmente per "convertire" il worker di prima in un oggetto URL.

Infine il nostro componente:

import React, {useEffect, useState} from 'react';
import worker from './app.worker.js';
import WebWorker from './WebWorker';
import {fetchData} from "./fetch_data";

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [items, setItems] = useState([]);
  const webWorker = new WebWorker(worker);

  useEffect(() => {
    fetchData().then(res => {
      // @ts-ignore
      setItems(res);
      setIsLoading(false);
      console.table(res);
    });

    return () => {
      // @ts-ignore
      webWorker.terminate();
    }

  }, []);

  return (
      <div className="App"></div>
  );
}

export default App;

Come vedete qui non ho toccato l'interfaccia.

Vi lascio il compito di farlo per capire come impatta il WebWorker sulla UI.

Enjoy!