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.

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

Image for post
Image for post
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 hoodvisually.

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:

Image for post
Image for post
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.

If both virtual DOM trees are different most recent one is sent to the browser.

Then this new virtual DOM becomes the old one & we await for a future one.

React Components

A React component is nothing more than a JavaScript object. React creates its own virtual DOM which is a representation of your entire UI structure in the form of a binary tree. It keeps this virtual DOM tree in memory, adding, updating, and deleting various components multiple times before it is finally rendered in the actual browser DOM and UI is physically updated in browser.

Don’t use render() for anything other than rendering the UI. If you need to change state or props, you must use React’s built-in lifecycle methods.

render() should remain a pure function at all times

The render() function updates virtual DOM components. If this new virtual DOM tree is different from the previously rendered virtual DOM tree, React will also update the actual browser’s DOM. It is not your job to update browser’s DOM directly anywhere — especially not from render() function.

Image for post
Image for post
Don’t pollute render() method with functions that in some way update DOM directly.

You should not change state (even with setState) make HTTP requests, jQuery, Ajax or fetch calls inside render() because it’s should be kept pure. The render function is always executed as final step only to update the UI assuming that all virtual DOM updates have already been executed.

Lifecycle Events

When a component is mounted to DOM for the first time, React creates a componentWillMount event. After the virtual component is actually mounted (rendered for the first time) in actual browser’s DOM, another lifecycle event called componentDidMount will be executed.

Throughout your entire application’s life cycle you are expected to write most of your component’s logic within these life cycle event methods.

Animated Hooks Next?

I consider this tutorial a Virtual DOM and lifecycle postmortem.

Many developers have switched to hooks. Component life-cycle events are even considered to be unsafe and may become obsolete in the future according to React docs. Still it was fun to make these animations. I’m sure there is a lesson or two at least for those new to React… or someone who is interested in history of its development.

Some believe that hooks is not a replacement but an alternative. I won’t lean toward making any claim with regard to that.

Hooks is something I am still learning myself. Hopefully one day I’ll make animated hooks tutorial! Until then, stay in touch!

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

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store