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.

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.

Virtual DOM & Diffing (“Reconciliation”) Algorithm

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.

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.

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.

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.

Animated Hooks Next?

I consider this tutorial a Virtual DOM and lifecycle postmortem.

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