React Virtual DOM Postmortem

There is a chasm between using React to build UIs and needing to know how it actually works under the hood.

Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

You can follow me on Twitter to get tutorials, JavaScript tips, etc.

My Coding Books

Follow me @ Twitter, Instagram & fb to never miss premium articles.

Launching a React <App /> For The First Time

React will automatically mount App class to root application container

Mounting <App/> For The First Time.

Now that your app is mounted to DOM let’s dive deeper.

Virtual DOM & Diffing (“Reconciliation”) Algorithm

To build React apps you probably don’t <Really /> have to know the inner bells and whistles. But… I decided to create this tutorial — if for any reason — to get a better grasp of what’s going on in React under the hood… visually.

The DIFFing algorithm looks for differences between two virtual DOM. Wait. Two virtual DOMs? I thought there was just one. Well, React compares the previous virtual DOM with the newly generated one. Only if changes are detected it finally updates your browser’s DOM:

An abstract animation of React’s Diffing Algorithm. If the two virtual DOM trees are found to be different then the most recent one (the newest one) is reconciled to the actual DOM in browser.

Brief description of what’s going on here:

API.tweet() is called with POST data containing message on a click event.

The payload will be sent back and received in (event) => { … } callback.

If returned payload data should cause props change, trees will be DIFFed.