React virtual DOM

When a web browser displays content, it keeps a representation of the webpage in the Document Object Model (DOM). You may remember from earlier that when modifying a webpage with Javascript, you would insert or modify HTML elements directly through the DOM, which would then update the webpage/browser and be displayed to the end user. If you want a refresher, we’ve covered the DOM in the javascript section.

In contrast, when you write React applications, you’re never actually working with the DOM. Instead, you work with the React Virtual DOM by creating, deleting and rendering React Elements. React takes care of keeping it’s virtual DOM synced with the actual DOM that is presented in the web browser. Because operations on the DOM are slow, React tries to minimise the amount of DOM operations it has to do and only modifies the relevant parts of the DOM when something has changed. The exact technical details are complicated, but the video below explains it in a simple manner.

Key points

• You aren’t actually writing HTML or Javascript when you are writing JSX, it goes through an extra transpiling step.

• This transpiling step creates React Elements which are Javascript representations of React Elements.

• You aren’t modifying the DOM directly. React is doing it for you in an optimized way with the virtual DOM.

• It may be tempting to modify the DOM directly with Javascript (f.ex: .innerHTML="text") when you are learning React. While this works it rarely makes sense when creating react applications.