React Internals

_
"React doesn't update your UI because your code changed. It updates your UI because its understanding of the application's state changed."_

**

Introduction

**
One of the biggest misconceptions among React developers is believing that React's job is just to manipulate the DOM (Document Object Model). It isn't.

React's primary responsibility is computing what the user interface should look like for a given application state. The DOM is merely the final destination of that computation.

This distinction may seem subtle, but it fundamentally changes how you approach React applications. Developers who understand this principle write components that are more predictable, easier to debug, and more performant.

To appreciate React's architecture, we need to answer a simple question: What problem was React designed to solve?

The Problem Before React

Before React became popular, developers built interfaces by directly manipulating the Document Object Model (DOM).

Suppose we have the following HTML:

HTML

<h1 id="counter">0</h1>

<button onclick="increment()">
  Increment
</button>

The accompanying JavaScript might look like this:

JavaScript

let count = 0;

function increment() {
    count++;
    document.getElementById("counter").textContent = count;
}

This approach is straightforward for a small application. However, imagine a production dashboard containing:

• Hundreds of components
• Dynamic tables
• Forms with validation
• Notifications
• Authentication state
• User preferences
• Charts
• Real-time updates

Every interaction requires you to manually identify which DOM nodes need to change. Instead of solving business problems, your application becomes dominated by DOM manipulation logic:

JavaScript

const userName = document.querySelector(".username");
userName.textContent = "John";

const button = document.querySelector(".save");
button.disabled = true;

const modal = document.querySelector(".modal");
modal.style.display = "none";

Notice the pattern: The developer is actively telling the browser how to update the interface. As applications grow, this command-based (imperative) style becomes difficult to maintain because every UI change introduces more instructions for manipulating the DOM.

**

How React Works

**
React approaches UI development from a completely different perspective.

Instead of asking:

"How do I modify the interface?"

React asks:

"What should the interface look like right now?"

This is known as the declarative programming model. Rather than issuing commands to manipulate individual DOM nodes, developers describe the desired UI for the current application state.

Consider the following React component:

JavaScript

import React, { useState } from 'react';

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

    return (
        <>
            <h1>{count}</h1>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </>
    );
}

Notice that nowhere do we instruct React to update an <h1> element. We simply describe what the UI should represent. React assumes responsibility for determining exactly how to transition the browser from one UI state to another.

This separation of concerns is one of the primary reasons React applications scale so effectively.
**

Understanding State

**
Everything in React revolves around state. State represents the data that influences what the user sees.

Some common examples include:

• Current User
• Theme (Light/Dark mode)
• Shopping Cart contents
• Authentication Status
• Notifications
• Loading Status
• Search Queries

At any point in time, there exists only one correct UI for the current application state. Conceptually, React behaves like a mathematical function:

UI = f(State)

This expression is one of the most important mental models in React. If the state changes, the output of the function changes. When the output changes, React recalculates the user interface. This principle is the very foundation of the rendering process.

**

A Walk Through setState

**
(Author's Note: You can continue expanding on how state updates work here using the component below!)

Consider the following component:

JavaScript

import React, { useState } from 'react';

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

    return (
        <>
            <h1>{count}</h1>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </>
    );
}