Canvas vs DOM, and Why React Need Not Apply

I’m using HTML5 Canvas more in the roller derby software, because it updates faster than the DOM.

I used the Developer Tools in Chromium to compare updating the game clock for ten seconds between Canvas and the DOM (drawing a bitmap vs setting the text of an HTML element).

The result was that time spent rendering was massively reduced when using canvas. For a time-sensitive application where 1/10th of a second can decide a championship, it’s clear where my UI code needs to do it’s work.

React Need Not Apply

Speaking of rendering, for the past few months I’ve been trying my hardest to put React into my application, where it would be useful. However, I’ve concluded React is horrible for an application that relies on instant communication of data between peers.

Yes, instant. As in microseconds that can’t wait for React to decide when to commit the state. By commit the state, I mean that the actual state has been updated in data, before it has been rendered. Yes, there are functions such as shouldComponentUpdate, but for my case, even intercepting the state and sending it from there is not fast enough (or reliable).

I can’t rely on asynchronous functions and callbacks of when to update peers (such as what’s on the scoreboard), and the user’s UI.

Now, maybe there is a case where React could apply in my software. That is, if I’m displaying hundreds of records to the user. When I get to the part of recording stats, and generating reports for coaches / trainers, then it’s possible I will revisit React.