# react-worker-dom

**Repository Path**: mirrors_Shopify/react-worker-dom

## Basic Information

- **Project Name**: react-worker-dom
- **Description**: Experiments to see the advantages of using Web Workers to Render React Virtual DOM
- **Primary Language**: Unknown
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-19
- **Last Updated**: 2026-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Renderer using Web Workers

A React Custom renderer using Web Workers. All the Virtual DOM reconcilliations happen in a WebWorker thread. Only node updates are sent over to the UI thread, result in a much more responsive UI.  

An existing React application can leverage WebWorkers using this library with minimal change. Look at the usage section for details. 

## Demo

The demo is hosted at [http://web-perf.github.io/react-worker-dom/](http://web-perf.github.io/react-worker-dom/). To run a local version of the demo, 

- Clone the repo run `npm install` to install all dependencies.
- Build the app using `npm run demo`
- Open `http://localhost:8080/test/dbmonster/` to view the demo app, or `http://localhost:8080/test/todo` for the todo app.
- Tweak the params in the URL to change to use web workers, increase number of components, etc. 

## Usage

### A typical React application

A typical React application would looks something like the following.

```js
// File: main.jsx
import React from 'react';
import reactDOM from 'react-dom';
reactDOM.render(<Component/>, document.getElementById('container'));
```

### Using it with Web Workers

To use this renderer, we would need to split the above file into 2 parts, one that is on the page, and another that starts as a web worker. 


```js
// File: main.js - included using a script tag in index.html
import React from 'react';
import reactDOM from 'react-worker-dom'; // Instead of using react-dom
reactDOM.render(new Worker('worker.js'), document.getElementById('container'));
```

The `worker.js` file is the one that now holds the actual Component. 

```js
// File: worker.jsx - loaded in index.html using new Worker('worker.jsx') in the file script above; 
import React from 'react';
import ReactWorkerDOM from 'react-worker-dom-worker';
ReactWorkerDOM.render(<Component/>);
```

Look at `test\dbmonster` and `test\todoapp` directory for the examples. 

## Testing Performance

To manually look at frame rates, load the dbmonster [demo pages](http://web-perf.github.io/react-worker-dom/) in Chrome, and view the [frame meter](https://developer.chrome.com/devtools/docs/rendering-settings#show-fps%20meter) in devtools.

To automatically collect frame rates and compare it with the normal version
- Run `npm run demo` to start the server and host the web pages
- Run `npm run perf chrome worker` to test frame rates for various rows in chrome in a Web Worker. Instead of `chrome`, you could use `android`, and instead of `worker`, you could use `normal` to test the other combinations.
- The frame rates are available in `_dbmonster.json` file, for each row count. 

## Roadmap
Here are the things that need to be done next. 

- Add support for form elements like `<input>`, `<select>`, etc.
- Support event utilities that enable things like autofocus, etc. 
- Enable preventDefault() semantics in events.