ReactJS | Learning Virtual DOM and React Diff Algorithm

In the previous post we discussed few features of react, learned about pre-processor JSX and little bit about event handling and binding them. In here will continue to discover, advance features with React like, knowing how React deals with Virtual DOM and Unidirectional Flow of react for improved performance.

As we see, paradigm of computing have shift towards component driven architecture, Salesforce launched Salesforce Lighting Platform, on the other hand Google have Polymer and upcoming Angular 2.0 supports components and Virtual DOM

Virtual DOM

React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM. render() methods return a description of the DOM, and React can diff this description with the in-memory representation to compute the fastest way to update the browser. 

Additionally, React implements a full synthetic event system such that all event objects are guaranteed to conform to the W3C spec despite browser quirks, and everything bubbles consistently and efficiently across browsers. You can even use some HTML5 events in IE8!

I recommend watching this video by Peter (Project Manager at Facebook for React,Instagram) for enlightenment and knowing how optimization has been done behind using React.js and Modules

Nesting of components 

By calling render we attach this component into the document body in the DOM. After 1 second, we call render again, but this time with a different input to the component-function. The call to render with replace the contents of the document body with the new component. The render function is the abstraction of the DOM manipulation, so the component-function does not need to manipulate the DOM itself. This also means that we do not need to keep state in the component-functions.

I built an application below (see codepen) that demonstrate, how a virutal dom (react components)  updates the name without refreshing page, I am using chance.js to generate the random name

See the Pen Reactor by Harshit Pandey (@oyecode) on CodePen.

React Diff Algorithm

React re-thought diff algorithm to identify the difference in the tree of data-structure. Traditionally parse a tree based data-structure if of complexity O(n3) with the powerful heuristics facebook managed to turn a O(n3) problem into a O(n).

Batching in Algorithm 

Whenever you call setState on a component, React will mark it as dirty. At the end of the event loop, React looks at all the dirty components and re-renders them. This batching means that during an event loop, there is exactly one time when the DOM is being updated, in react you can get this property fairly easily

Sub-tree Rendering via Diff Algo 

When setState property is called, React rebuids the virtual DOM for all its childer. But the problem would be if you re-render root element, you will end up rendering whole app, even if major of other node din't even chance, clearly ineffient practice



React facilitates you, and you do not have to call setState on parent note everytime when something changes. You can invoke specific component of few component up/down. You will rarely go all the way up in node structure, this makes re-rendering blazing fast.

I also recommend watching this discussion below to know reasons and geographical adoption

Stay tuned to learn, more concepts on how to populate component with Salesforce data in the coming post(s).