How React Works Behind the Scenes

📝 Introduction

React is one of the most popular libraries for building user interfaces, but have you ever wondered how it actually works under the hood? This article unpacks React’s internal mechanics in a beginner-friendly yet technically solid way—helping you understand what happens from rendering to updates.

🔍 What Is React?

React is a declarative, component-based JavaScript library developed by Meta (formerly Facebook). It allows developers to build interactive user interfaces with ease.

Instead of manually updating the DOM, React lets you declare how the UI should look for a given state. React handles rendering and updating the DOM efficiently using advanced techniques like the Virtual DOM and a reconciliation algorithm.

🧱 Core Principles of React

1. Declarative UI: You describe what you want to see, and React figures out how to make it happen.

2. Component-Based: UIs are broken down into small, reusable components.

3. Unidirectional Data Flow: Data flows one way (top-down) via props, making state easier to manage.

🪞 Virtual DOM vs Real DOM

🧾 Real DOM

• Direct manipulation of the browser DOM is slow.

• Updating even a small part can trigger a full re-render of the page layout.

🪞 Virtual DOM

• React keeps a lightweight in-memory tree (the Virtual DOM).

• On updates, React:

  1. Creates a new Virtual DOM.

  2. Diffs it with the old one.

  3. Calculates the minimal set of changes.

  4. Applies those changes to the real DOM.

const [count, setCount] = useState(0);
return <p>{count}</p>; // Only updates this text when `count` changes.

⚙️ JSX Compilation

JSX is syntactic sugar for React.createElement.

// JSX
const element = <h1>Hello World</h1>;
// Compiled
const element = React.createElement('h1', null, 'Hello World');

This returns a plain object:

{
  type: 'h1',
  props: {
    children: 'Hello World'
  }
}

React builds a Virtual DOM tree out of these objects.

🔄 Reconciliation and the Fiber Architecture

🔁 Reconciliation

When state or props change:

• React compares the new Virtual DOM with the previous one.

• It calculates a diff to determine what needs updating.

• Updates are batched and rendered efficiently.

🧵 Fiber Architecture

Since React 16, the Fiber architecture enables:

• Incremental rendering (breaking rendering work into chunks)

• Task prioritization (important for animations and transitions)

• Better error handling and recovery

Each component becomes a Fiber node, storing metadata like type, props, child, sibling, and return.

⏳ Component Lifecycle

🧬 Class Components

class MyComponent extends React.Component {
  componentDidMount() {}
  componentDidUpdate() {}
  componentWillUnmount() {}
}

⚓ Functional Components (Hooks)

useEffect(() => {
  // Runs after render
  return () => {
    // Cleanup on unmount
  };
}, []);

📦 Hooks and State Management

🔧 useState

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

React stores state in a linked list attached to the component’s Fiber node. setCount triggers an update and React schedules a new render.

🔄 useEffect

Runs after DOM updates, great for:

• Fetching data

• Setting up subscriptions

• Cleanups on unmount

👨‍💻 Real Example: Behind the Scenes of a Counter App

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

🚀 What Happens Internally:

1. React renders the component.

2. useState(0) registers count = 0.

3. User clicks the button.

4. setCount schedules a re-render.

5. New Virtual DOM is created.

6. React diffs it with the old one.

7. Only the <p> element is updated in the real DOM.

📈 Optimizing Performance

✅ Keys in Lists

items.map(item => <li key={item.id}>{item.name}</li>);

⚙️ Memoization Tools

• React.memo: Prevents re-renders of pure components.

• useMemo: Caches expensive calculations.

• useCallback: Prevents unnecessary function re-creations.

🔚 Conclusion

React’s architecture—from the Virtual DOM to Fiber and hooks—makes it one of the most efficient UI libraries available. Understanding what happens under the hood helps you write better, faster, and more maintainable applications.