How React Works Under the Hood: From JSX to Fiber

Understanding React's internal mechanisms empowers any developer to build smarter, more performant, and predictable applications.

4 min read

Jun 11, 2025

Throughout my web development journey, I've always been intrigued by how React enables us to write "custom HTML tags" — components that act like native DOM elements but render selectively in specific parts of the app. How does this work under the hood? What actually happens when we call a component like <MyComponent />? In this article, we'll explore the core internal mechanisms of modern React — from JSX syntax transformation to the Fiber Architecture — uncovering the mechanics behind the magic.

JSX: Where It All Begins

JSX is a syntax extension that lets developers write JavaScript code with an HTML-like appearance. However, this resemblance is purely visual: under the hood, JSX is compiled into standard JavaScript function calls.

When we write JSX code such as:

<MyComponent text="Hello, World!"/>

Internally, it compiles into:

React.createElement(MyComponent, {text: "Hello, World!"})

React calls its internal React.createElement function, passing <MyComponent /> alongside its associated props. What appears to be an HTML tag is actually a JavaScript description of how the user interface should be constructed.

Virtual DOM and the Reconciliation Process

Before we continue, what is the DOM?

DOM stands for Document Object Model. It represents the entire structure of a web page as a tree object: HTML elements, text nodes, attributes, and everything the browser needs to render content visually.

In the early days of web development, modifying a web page — no matter how small the change, such as updating button text — required direct interaction with the DOM.

These direct manipulations incurred high performance costs because browsers had to recompute layout and repaint large portions of the DOM tree, causing severe performance bottlenecks as application complexity grew.

The Solution: An In-Memory Copy of the DOM

Directly mutating the DOM tree creates scaling issues in modern web applications. To solve this, React introduced Virtual DOM (VDOM).

The Virtual DOM acts as a lightweight in-memory representation of the real DOM. State changes are first applied to this virtual tree. React then calculates the minimal required diff and updates the real DOM efficiently through a process called reconciliation, avoiding unnecessary layout recalculations.

Reconciliation: The Engine Behind Virtual DOM

Since React maintains a copy of the DOM, how does it pinpoint exact changes between renders?

The answer lies in the reconciliation algorithm — a heuristic comparison between the previous and newly generated React element trees (the two versions of the Virtual DOM).

Whenever a state change triggers a re-render, React:

1. Re-executes component functions to generate a new React element tree;
2. Compares the new tree against the previous snapshot;
3. Identifies the exact nodes that changed;
4. Applies minimal DOM mutations directly to the real DOM.

Thanks to this reconciliation algorithm, React delivers smooth and performant user experiences even in highly complex applications.

The Final Piece of the Puzzle: React Fiber

Introduced in React 16, React's core reconciliation architecture was completely rewritten: giving birth to React Fiber.

React Fiber is an asynchronous, incremental rendering engine that prioritizes high-priority tasks — such as user inputs, gestures, and animations — over lower-priority background updates.

Previously, React performed reconciliation synchronously using a recursive call stack, making rendering updates non-interruptible. With Fiber, React splits rendering work into incremental work units that can be paused, aborted, or resumed dynamically. For instance, heavy background UI updates can yield execution time back to the browser main thread if the user starts typing in an input field.

This scheduling capability ensures React applications remain responsive and maintain a fluid user experience under heavy UI workloads.

Conclusion

Behind the simple syntax of <MyComponent />, React hides a sophisticated architecture designed to make complex UI engineering scalable, accessible, and performant.

Understanding how JSX compiles into JavaScript, how the Virtual DOM optimizes updates, and how React Fiber schedules rendering work empowers us to build more predictable, performant, and architecturally aware web applications.