How React Works Under the hood

Introduction

React is one of the most popular JavaScript libraries for building dynamic user interfaces. It provides a declarative way to create UI components, making development more intuitive. But how does React work behind the scenes? In this article, we will explore the key concepts that power React, including the Virtual DOM, reconciliation, Fiber architecture, rendering process, and optimization techniques.

By understanding these fundamental principles, you can write more efficient React applications and debug performance issues effectively.

The Virtual DOM: What and Why?

The Virtual DOM (VDOM) is a core concept in React that optimizes UI updates. Unlike directly modifying the browser’s DOM, React first makes changes in an in-memory Virtual DOM and then efficiently updates only the necessary parts of the real DOM.

Why Not Modify the DOM Directly?

The traditional approach to updating the UI in web applications involves directly manipulating the Document Object Model (DOM). However, frequent DOM updates can lead to performance bottlenecks because:

The DOM is slow to update compared to in-memory data structures.
Every DOM update triggers reflows and repaints, causing UI lag.

How the Virtual DOM Works

React creates a Virtual DOM tree: Whenever the state of a component changes, React creates a new Virtual DOM tree representing the updated UI.
React compares the new Virtual DOM with the previous one: It uses a process called reconciliation to determine what has changed.
React updates only the necessary parts of the real DOM: Instead of replacing the entire DOM, React calculates the minimal set of changes needed and applies them efficiently.

Example of Virtual DOM Update

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Here’s what happens when you click the "Increment" button:

The state (count) updates.
React creates a new Virtual DOM tree with the updated count value.
React compares the new Virtual DOM with the previous version.
Only the <p> tag containing the count gets updated in the real DOM.

This approach ensures better performance than updating the entire UI.

Reconciliation: How React Efficiently Updates the UI

Reconciliation is the process React uses to determine the minimal number of changes required to update the UI.

Diffing Algorithm

React follows an optimized diffing algorithm that makes updates efficient:

If the root elements have different types (e.g., <div> → <span>), React replaces the entire subtree.
If elements have the same type, React updates only their attributes and children.
When rendering lists, React uses keys to track and efficiently update individual items.

Example of Key Usage in Lists

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Using key helps React identify which items changed, reducing unnecessary re-renders.

React Fiber: The Engine Behind React

React Fiber is the core reconciliation algorithm introduced in React 16. It improves UI responsiveness and allows React to handle rendering work more efficiently.

Key Features of React Fiber:

Concurrency: Fiber breaks rendering work into smaller chunks, allowing React to prioritize urgent updates (e.g., user interactions).
Time Slicing: React processes updates incrementally instead of blocking the main thread.
Better Scheduling: Fiber assigns priority levels to updates, ensuring smoother animations and interactions.

Example of Concurrent Rendering with `useTransition`

import { useState, useTransition } from 'react';

function SearchComponent({ data }) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const filteredData = data.filter(item => item.includes(query));

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => {
          startTransition(() => setQuery(e.target.value));
        }}
      />
      {isPending && <p>Loading...</p>}
      <ul>
        {filteredData.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

Here, useTransition ensures that the UI remains responsive by deferring expensive state updates.

Rendering Process in React

React’s rendering process consists of three main phases:

Render Phase: React constructs a Virtual DOM tree and identifies necessary updates.
Commit Phase: React applies changes to the real DOM.
Post-Commit Effects: React runs lifecycle methods like useEffect after updates.

Optimizing Performance in React

To improve performance in React applications, consider the following optimizations:

1. Using `` for Component Memoization

import React from 'react';

const MemoizedComponent = React.memo(function MyComponent({ value }) {
  return <p>{value}</p>;
});

2. Using `` to Prevent Unnecessary Re-Renders

import { useCallback } from 'react';

function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <button onClick={handleClick}>Click Me</button>;
}

3. Lazy Loading Components with ``

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <React.Suspense fallback={<p>Loading...</p>}>
      <LazyComponent />
    </React.Suspense>
  );
}

Conclusion

Understanding how React works under the hood allows developers to write more optimized and scalable applications. By leveraging the Virtual DOM, reconciliation, Fiber, and various optimization techniques, you can build fast and efficient UIs.

Keep exploring these concepts, and you'll become a React expert in no time!

How React Works Under the Hood