11

I saw some stuff online about rendering React components with HTML5 WebWorkers..even Pete Hunt the head honcho behind React was talking about it.

I have some CPU intensive work over each element of an array followed by a React render of each element of the array, so I am thinking about putting each of those in a WebWorker and then posting the HTML string back to the main UI thread.

My question is - it looks like React.renderToString is deprecated in favor of ReactDOMServer.renderToString...so I ask all of you and Pete Hunt - are we supposed to use ReactDOMServer on the front-end if we wish to use WebWorkers to render React components or is there another recommended approach?

(The reason of course, is we can only pass strings / serialized data between threads in JS, so the idea is to render the React component to a string, then pass it back to the main UI thread as a string.)

Alexander Mills
  • 90,741
  • 139
  • 482
  • 817
  • Just a quick thought, do you really need to render the components in the webworker? Would simply passing the array data back be sufficient if not more efficient? – enjoylife Dec 17 '15 at 00:57
  • well, there's a lot of other work happening before the render, but yeah the render could go either in the webworker or not, but since I am already using the WW, then I thought, might as well do the render in there too while I am at it. for the sake of the question, assume it's necessary / or truly desired :) – Alexander Mills Dec 17 '15 at 01:05
  • Well I would say if it runs on the browser without modification, then why not. It may not be advocated only due to it being such a niche use case. But, hey, if it works and the performance is satisfactory, I would say run with it. – enjoylife Dec 17 '15 at 01:19
  • supposedly the virtual DOM diffing is sort of intensive, so maybe in some cases it's actually more performant, but probably not for most cases since you have send all that data across threads. It does work though using ReactDOMServer, I think. ReactDOMServer code is only abotu 20 lines and seems to be some sort of simple wrapper. – Alexander Mills Dec 17 '15 at 01:20
  • Good question! I have been wondering the same myself! – Joshua Dannemann Dec 17 '15 at 02:53
  • 1
    I think `ReactDOMServer` would perhaps have been better named `ReactDOMStatic`, but you might also think of your web worker as a type of "server." In short, it's fine to use this in any JS environment where you want to render *static* HTML from components. – Michelle Tilley Dec 17 '15 at 05:47

1 Answers1

6

I wrote up a quick implementation of React, rendering in a Web worker. It is not really a renderToString, but more like a custom renderer. I also found that this is much faster than the normal implementation.

The demo page has 2 applications - an example showing a CPU intensive app, and a simple TODO list with events.

Here are the performance numbers too -http://blog.nparashuram.com/2016/02/using-webworkers-to-make-react-faster.html

axemclion
  • 562
  • 3
  • 8