This article focuses on how React manages the dynamic nature of the applications and renders them efficiently—also taking into consideration important aspects of React which include managing state, rendering, and re-rendering the components in case the state updates.

How vanilla JS would handle counter button

To start with let's take an example of a simple counter which updates when the button is pressed with its current value being reflected inside the button. Considering there is a button in the body of HTML with id as counterBtn with onClick attribute set as given function below:

function increaseCount() {
        const currentValue = document.getElementById("counterBtn").innerHTML;
        const newCounter = parseInt(currentCounter) + 1;
        document.getElementById("counterBtn").innerHTML = newCounter;
    }

Here the execution is pretty simple, when the button is pressed the current value is extracted using the document method getElementById after which it is incremented by 1 and again appended back to the original button.

React rendering the counter button

Taking the same example and executing using React JS would look something like this

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  function increaseCount() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counter Button</h1>
      <button onClick={increaseCount}>{count}</button>
    </div>
  );
}

export default App;

Here we see a bunch of new terminologies unlike vanilla JS such as useState and function returning HTML-like elements. Let's cover them one by one to understand how React renders the DOM. An important aspect that drives the rendering revolves around the state declared using React Hook - useState.

It is similar to declaring the variables using JS with the difference being these states are exclusively monitored by the React library and any changes in states will trigger React to re-render the components using the state. Again a component is something that takes in the current state and returns the HTML-like structure that is rendered in the DOM. In this case, it is a button that renders every time the state associated with it updates.

Unlike vanilla JS to update the variable in this state, it is done using setCount which is nothing but a function to update the count state which takes in the new value to be assigned to the state. Even though the React code looks concise it is difficult to understand how React propagates these changes to DOM. The next section covers how these can be correlated in vanilla JS to see what happens under the hood.

React rendering using plain JS

Here comes an interesting bit where we will try to mimic how React handles these state changes but using vanilla JS. Let's dive deep into the code:

let state = {
    count: 0
}

function increaseCount() {
    state.count+=1;
    buttonComponentReRender()
}

function buttonComponentRender() {
    const parent = document.getElementById("root");
    parent.innerHTML = "";
    const component = buttonComponent(state.count);
    parent.appendChild(component);
}

function buttonComponent(count) {
    const button = document.createElement("button");
    button.innerHTML = count;
    button.setAttribute("onclick", `onButtonPress()`);
    return button;
}

buttonComponentRender();

Declaring the state using the variable in JS, and declaring three functions - one for handling the count, another for rendering the button component, and a final function that creates the button with required attributes and values associated with it. Here we see only one function being executed on the initial render - it is responsible for adding the button in the empty div with the id as root using the document method appendChild which adds the element in the parent.

Components in JavaScript

The above function calls one more function buttonComponent which takes in the current value of the state variable and returns a new button with the updated count. As discussed above in the React section, the state change triggers this component to re-render which is taken into account using increaseCount function where after updating the state count variable calls the component render function. These cycles are repeated every time the state updates.

This is how React handles the component rendering under the hood, thus providing a rich developer experience by minimizing the code written for handling dynamic applications. I would like to thank harkirat singh for his mentoring and guidance thereby aiding this blog.