The virtual DOM is one of the key characteristics of React. When you render a component, React creates a lightweight description of the UI, diffs it with the previous version, and generates a minimal set of changes to apply to the DOM. That diffing algorithm is very fast, making React particularly well suited for apps with a lot of UI changes.
That prompted me to revisit a type of application I’ve built in the past with different languages and frameworks: a trader desktop showing real time market data updates. This new version uses React for the client-side and Socket.io to push simulated market data updates to the client.
Inspecting Browser Repaints
In the Chrome Dev Tools, check Show paint rectangles and Show FPS meter to inspect the DOM updates and the frame rate.
The video below shows that, when a stock update comes in, only the minimum number of elements are being repainted: the “Last value” cell, the “Change” cell, and (only if applicable) the “High” or “Low” cells.
Installing the Socket.io Version
The version running in this page uses a mock push service. To install the full Socket.io implementation: