useWorker

https://useworker.js.org/docs/
Admin
useWorker is a JavaScript library that allows running expensive tasks using the Web Worker API...
Tokens:3,718
Snippets:42
Trust Score:8.1
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install useworker via npm

Source: https://useworker.js.org/docs/installation

Use this command to install the latest version of the @koale/useworker package as a dependency.

```bash
npm install --save @koale/useworker
```

--------------------------------

### Web Worker: hardwareConcurrency - determining number of CPU cores

Source: https://useworker.js.org/docs/limitations

Web Workers are limited by CPU and memory, and this example shows how to determine the available CPU cores using the navigator.hardwareConcurrency property.

```javascript
navigator.hardwareConcurrency
```

--------------------------------

### Bubble Sort with useWorker

Source: https://useworker.js.org/docs/examples/examples-sort

This example shows how to import a bubble sort algorithm and execute it asynchronously using the useWorker hook within a React component.

```javascript
import bubbleSort from "./algorithms/bublesort";  
  
const numbers = [...Array(50000)].map(() =>  
  Math.floor(Math.random() * 1000000)  
);  
  
function App() {  
  const [sortWorker, { status: sortWorkerStatus, kill: killWorker }] = useWorker(bubbleSort);  
  
  const onWorkerSortClick = () => {  
    sortWorker(numbers).then(result => {  
      console.log("Bubble Sort useWorker()", result);  
      addToast("Finished: Sort using useWorker.", { appearance: "success" });  
    });  
  };  
}  
```

--------------------------------

### useWorker options example with remote dependency

Source: https://useworker.js.org/docs/api-useworker

Example of using useWorker with a timeout of 50000 milliseconds and a remote dependency for date-fns. The worker function sorts dates using dateFns.compareAsc.

```javascript
import { useWorker } from "@koale/useworker";  
  
const fn = dates => dates.sort(dateFns.compareAsc)  
  
const [workerFn, {status: workerStatus, kill: workerTerminate }] = useWorker(fn, {  
  timeout: 50000 // 5 seconds  
  remoteDependencies: [  
    "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js" // dateFns  
  ],  
});  
```

--------------------------------

### Implement useWorker for non-blocking sorting

Source: https://useworker.js.org

This example demonstrates how to use the useWorker hook to sort a large array of numbers in a background thread, keeping the UI responsive.

```javascript
import React from "react";  
import { useWorker, WORKER_STATUS } from "@koale/useworker";  
  
const numbers = [...Array(5000000)].map(e => ~~(Math.random() * 1000000));  
const sortNumbers = nums => nums.sort();  
  
const Example = () => {  
  const [sortWorker, { status, kill }] = useWorker(sortNumbers);  
  const runSort = async () => {  
    const result = await sortWorker(numbers); // non-blocking UI  
    console.log("End.");  
  };  
  return (<button type="button" onClick={runSort}> Run Sort</button>);  
};  
```

--------------------------------

### Web Worker: No document or window access - not allowed (LIMITATION: 1)

Source: https://useworker.js.org/docs/limitations

Workers lack access to the document and window objects. Attempting to use these APIs will fail. This example shows two disallowed calls.

```javascript
document.querySelectorAll('#demoId'); // not allowed!!
window.navigator // not allowed!!
```

--------------------------------

### index.js: Using useWorker to sort numbers

Source: https://useworker.js.org/docs/introduction

Defines a sort function and uses useWorker() to get a worker that can be invoked with await to sort array [1,2,3].

```javascript
const sortNumbers = numbers => ([...numbers].sort())  
const [sortWorker] = useWorker(sortNumbers);  
  
const result = await sortWorker([1,2,3])  
```

--------------------------------

### Sort 5 million numbers with useWorker

Source: https://useworker.js.org/docs/usage

Complete example sorting 5,000,000 numbers in a web worker without blocking the UI. The worker is invoked with await and logs "End." after completion.

```javascript
import React from "react";  
import { useWorker } from "@koale/useworker";  
  
const numbers = [...Array(5000000)].map(e => ~~(Math.random() * 1000000));  
const sortNumbers = nums => nums.sort();  
  
const Example = () => {  
  const [sortWorker] = useWorker(sortNumbers);  
  
  const runSort = async () => {  
    const result = await sortWorker(numbers); // non-blocking UI  
    console.log("End.");  
  };  
  
  return (  
    <button type="button" onClick={runSort}>  
      Run Sort  
    </button>  
  );  
};
```

--------------------------------

### Web Worker: Multiple useWorker instances to avoid re-call while running

Source: https://useworker.js.org/docs/limitations

The web worker cannot be invoked again while running unless it is finished or killed. Creating multiple instances with the hook overcomes this. The example defines three separate useWorker calls with different configurations.

```javascript
const [sort1] = useWorker(sort, { timeout: 10000 });
const [sort2] = useWorker(sort, { autoTerminate: false });
const [sort3] = useWorker(sort);
```

--------------------------------

### Web Worker: Return function is not allowed but return sum is allowed

Source: https://useworker.js.org/docs/limitations

Workers cannot return a function because responses are serialized. Only serializable data such as numbers or sums can be returned. The example contrasts the disallowed function return with the allowed sum return.

```javascript
const fn = () => {
  return () => 1 + 2 // not allowed!!
}

const fn = () => {
  const sum = 1 + 2
  return sum; // allowed!!
}
```

--------------------------------

### index.js: Create and communicate with a raw Web Worker

Source: https://useworker.js.org/docs/introduction

Main script that instantiates a new Worker from './webworker.js', sends an array [3,2,1], and listens for the sorted response, logging [1,2,3].

```javascript
var webworker = new Worker("./webworker.js");  
  
webworker.postMessage([3,2,1]);  
  
webworker.addEventListener("message", function(event) {  
    console.log("Message from worker:", event.data); // [1,2,3]  
});
```

--------------------------------

### CSV parsing with useWorker

Source: https://useworker.js.org/docs/examples/examples-csv

Demonstrates initializing workers for CSV generation and parsing, and handling the asynchronous result of the parsing operation.

```javascript
import csvToJson from "./parser/csvToJson";  
import generateCsv from "./parser/generateCsv";  
  
function App() {  
  const [generateWorker] = useWorker(generateCsv);  
  const [csvWorker, {status: csvWorkerStatus, kill: killWorker }] = useWorker(csvToJson);  
  
 const onWorkerCsvClick = async () => {  
    const fakeCsv = await generateWorker();  
    csvWorker(fakeCsv).then(result => {  
      console.log("Csv useWorker()", result);  
      addToast("Finished: Csv parsed using useWorker()", {  
        appearance: "success"  
      });  
    });  
  };  
}  
```

--------------------------------

### Import useWorker from @koale/useworker

Source: https://useworker.js.org/docs/api-useworker

Import the useWorker hook from the @koale/useworker package.

```javascript
import { useWorker } from "@koale/useworker";  
```

--------------------------------

### Import useworker components

Source: https://useworker.js.org/docs/installation

Import the useWorker hook and WORKER_STATUS constant from the package.

```javascript
import { useWorker, WORKER_STATUS } from "@koale/useworker";
```

--------------------------------

### useWorker(fn, options)

Source: https://useworker.js.org/docs/api-useworker

The useWorker hook takes a pure function and optional options, and returns a worker function and a controller object. The worker function runs the provided function in a web worker, and the controller provides status and kill methods.

```APIDOC
## useWorker(fn, options)

### Description
The useWorker hook creates a web worker from a pure function and returns a worker function and a controller. The worker function runs the provided function in a web worker, and the controller provides status and kill methods.

### Import
```
import { useWorker } from "@koale/useworker";
```

### Usage
```
const [workerFn, controller] = useWorker(fn, options);
```

### Parameters
#### fn (Function) - Required
The pure function to run with web workers.

#### options (Object) - Optional
The object containing the options of the worker.

### Returns
- **workerFn** (Promise) - The function that allows you to run `fn` with web worker.
- **controller** (Object) - Hook controller (see Controller API).

### Options
- **timeout** (Number) - Default: undefined - The number of milliseconds before killing the worker.
- **remoteDependencies** (Array of String) - Default: [] - An array that contains the remote dependencies needed to run the worker.
- **autoTerminate** (Boolean) - Default: true - Kill the worker once it's done (success or error).
- **transferable** (String) - Default: 'auto' - Enable Transferable Objects, to disable it set transferable: 'none'.

### Example
```
import { useWorker } from "@koale/useworker";

const fn = dates => dates.sort(dateFns.compareAsc)

const [workerFn, {status: workerStatus, kill: workerTerminate }] = useWorker(fn, {
  timeout: 50000 // 5 seconds
  remoteDependencies: [
    "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js" // dateFns
  ],
});
```
```

--------------------------------

### Call useWorker with a sorting function

Source: https://useworker.js.org/docs/usage

useWorker returns an array with the worker function, a status object (using WORKER_STATUS constants), and a kill function to terminate the worker.

```javascript
const sortNumbers = numbers => ([...numbers].sort())  
const [sortWorker, { status: sortStatus, kill: killSortWorker }] = useWorker(sortNumbers);
```

--------------------------------

### Controller API

Source: https://useworker.js.org/docs/api-useworker

The controller object returned by useWorker provides the status of the worker function and a kill function to terminate the worker.

```APIDOC
## Controller API

### Description
The controller object returned by useWorker provides the status of the worker function and a kill function to terminate the worker.

### Properties
- **status** (@WORKER_STATUS) - The status of `workerFn`.
- **kill** (Function) - The function that allows killing the worker.
```

--------------------------------

### Import WORKER_STATUS

Source: https://useworker.js.org/docs/api-workerstatus

Import the WORKER_STATUS constants from the @koale/useworker package to track the lifecycle of a web worker.

```javascript
import { WORKER_STATUS } from "@koale/useworker";
```

--------------------------------

### useWorker hook usage signature

Source: https://useworker.js.org/docs/api-useworker

Shows the destructured return values: workerFn and controller, obtained by calling useWorker with a function and options.

```javascript
const [workerFn, controller] = useWorker(fn, options);  
```

--------------------------------

### Sort Dates with useWorker and date-fns Remote Dependency

Source: https://useworker.js.org/docs/examples/examples-external

Sorts a dates array using date-fns compareAsc inside a Web Worker via the useWorker hook. It specifies a 5000ms timeout and the remote dependency URL for date-fns, then asynchronously processes the sort and displays a success toast.

```javascript
const sortDates = (dates) => {  
  return dates.sort(dateFns.compareAsc);  
};  
  
const [sortWorker, { status: sortWorkerStatus, kill: killWorker }] = useWorker(  
  sortDates,  
  {  
    timeout: 5000,  
    remoteDependencies: [  
      "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js",  
    ],  
  }  
);  
  
const onWorkerSortClick = () => {  
  sortWorker(dates).then((result) => {  
    console.log("Bubble Sort useWorker()", result);  
    addToast("Finished: Sort using useWorker.", { appearance: "success" });  
  });  
};  

```

--------------------------------

### webworker.js: Message event listener for sorting numbers

Source: https://useworker.js.org/docs/introduction

A minimal Web Worker that receives an array of numbers via a message event, copies it, sorts it, and posts the sorted array back.

```javascript
self.addEventListener("message", function(event) {  
  var numbers = [...event.data]  
  postMessage(numbers.sort())  
});  
```
Tokens:
Raw