This site runs best with JavaScript enabled.

What the Fork is the React Virtual DOM


Evergreen
šŸŒ³
Last tended Jan 20, 2019
React
Web Development
JavaScript
Illustrated Notes


When I was first

I couldn't quite wrap my head around why it was any different to JavaScript.

The idea of the virtual DOM system helped clarify a few things for me. Primarily it got me to understand the DOM, the virtual DOM, and your React app are all separate systems talking to one another. Not one big mesh. While learning it I drew out an explanation you can see below.


āš ļø

HOWEVER

This post is slightly dated, and the React team isn't keen on the term "Virtual DOM" as a mental model for how React works under the hood.

Instead Dan wrote up a nice long explanation on

which clarifies the details how React updates the UI.

They still have a section of the docs about the

, but it's not an essential piece of the React ecosystem to learn about.

The below explanation will still help you understand the basic concept that React figures out what needs to change on the DOM before changing it, but go to other sources if you want a more in-depth explanation.


One of the reasons React is so darn fast at updating changes  is that it uses a virtual DOM
All the code we write in React only interacts with this virtual DOM
This is helpful because passing the actual DOM lots of changes is slow
React's DOM runs a diffing algorithm

Want more illustrated notes on web development?

Take a look at

,
JSX is a Lovechild
or find out
What the Fork is Babel?

Want to share?

Join the newsletter

For weekly notes on visual thinking, ethical technology, and cultural anthropology.

Maggie Appleton Ā© 2022