My Resume | Alex Muiruri - https://alexmuiruri.com

How React Render and Commit Works

React is a JavaScript library that creates user interfaces by separating the design into individual components. The library features a syntax markup called JSX, which allows you to write plain HTML inside Javascript. It makes developing and maintaining web and mobile apps efficient and easy.

However, do you often wonder how your React app goes from code to your browser? This article dives into React basics to learn exactly how that works.

How React Works

Photo by Antonio Batinić

In simple terms, React is plain HTML, CSS, and JavaScript written in one language. It implements React DOM to render HTML, CSS, and JavaScript to your browser.

When you start your app by visiting http://localhost:3000, you trigger an initial render on your browser. React invokes a function called createRoot from the React DOM Client library. The function creates a root to display React components inside your browser DOM Node.

import { createRoot } from 'react-dom/client';
const domNode = document.getElementById('root');
const root = createRoot(domNode);

The root element must exist in an HTML file for the app to run i.e. an element with an ID ‘root’. It is the top-most element and parent to all other components in your React app. Creating a root element allows you to call the render function, which displays a piece of JSX into the React root browser DOM Node.

React Render: Now We Render JSX

The createRoot function returns an object having two methods: render and unmount. React render interacts with the browser DOM node directly. It displays your JSX components in the root element while the unmount method will destroy the rendered tree inside the React root.

It’s good to note that the browser DOM node isn’t the HTML or XML markup you see on screen. It’s a document model representing a document on the browser as a node.

Therefore an HTML document with the following structure…

<html name="attr1" value="val1">
  <body>
    <h1>Welcome</h1>
    <p>This is my website.</p>
  </body>
</html>

…will be represented as:

{
   tag: "html",
   attributes: [{
        name: "attr1",
        value: "val1"
   }],
   children: [
       tag: "body",
       children: [
         {
             "Welcome",
             tag: "h1",
         },
         {
             "This is my Website",
             tag: "p",
         }
      ]
  ]}
}

Of course, the actual React DOM might look different.

On the initial render, React will remove all existing HTML content inside the root element and render the app component inside it.

Initial Render and Re-Render

Photo by Markus Spiske

There are two reasons for a component to render in React: during the initial render and when a component’s or its ancestor’s state changes. During the initial render, React will invoke the createRoot function with the target DOM node.

Once a component is rendered, you can trigger a re-render by updating its state. This sets an automatic re-render, calling the function whose state changed. If a component has more nested functions with components, React will recursively until there are no more nested components.

How React Commit Works

When rendering components, React calls all functions recursively. During the initial render, React will use the appendChild function in your browser DOM API to put all DOM nodes on the screen.

However, during re-render, React will make necessary calculations to ensure minimal changes to the DOM. This helps you ensure optimal performance, especially if you want to perform server actions like data fetching on the client side.

Conclusion

React is a popular library that simplifies web and mobile development. However, we often wonder how the library works. It turns out that the process is straightforward.

The library creates a virtual DOM node, then a tree representing the elements nested in your app, lastly, it mounts the node on the browser DOM node.