Kako React works?

React stands out for its ability to efficiently update the user interface, thanks to several key behind-the-scenes mechanisms. It uses a Virtual DOM – a lightweight copy of the real DOM – to determine the minimal set of changes required for UI updates​.

React also introduced the Fiber architecture, which breaks rendering work into smaller chunks so that updates can be processed without blocking the browser​.

Through a process called reconciliation, React compares the new and old virtual DOM trees (using a smart diffing algorithm) and updates the real DOM with only the necessary changes. Below, we explore each of these concepts and how they contribute to React’s performance.

Virtual DOM

The Virtual DOM is an in-memory representation of the UI that React keeps in sync with the real DOM​. In practice, it is a tree of JavaScript objects mirroring the DOM structure – a lightweight version of the page’s DOM​.

Updating the real DOM directly can be slow, so React first updates the Virtual DOM. When the application state or props change, React creates a new Virtual DOM tree and compares it with the previous one using a diffing algorithm​.

Based on this comparison, React can figure out exactly which objects (components or DOM nodes) have changed. It then updates only those changed parts on the real DOM, rather than re-rendering the entire page.

This approach of updating the UI in memory and syncing minimal changes makes updates much faster and more efficient​.

• Faster updates: Because only the parts of the DOM that actually changed are touched, React can update the interface quickly (avoiding unnecessary full page refreshes). Users experience smoother interactions even as the app grows in complexity.
• Efficient re-renders: Re-calculating the UI using the Virtual DOM is cheap, and React applies only the needed DOM manipulations. It skips over components that haven’t changed, preventing wasted work and unnecessary re-rendering of the whole DOM tree​. This means the app remains performant even during frequent state updates.

Fiber Tree

The Fiber tree is React’s internal structure and reconciler introduced in React 16, designed to enable incremental, asynchronous rendering of the Virtual DOM​.

Fiber is essentially a new reconciliation engine – a reimplementation of React’s core algorithm – allowing React to split rendering work into small units.

Each UI component corresponds to a fiber, and these fibers form a tree (the fiber tree) that mirrors the component hierarchy. The key benefit of Fiber is that it makes React’s rendering async and schedule-able rather than blocking.

React can work on chunks of the fiber tree, pause work in the middle if needed, and resume later – or even abandon work that’s no longer needed.

• Supports asynchronous rendering: Fiber enables React to pause, resume, or abort rendering work as new updates come in, instead of processing the entire update in one go​. In earlier React (stack reconciler), an update would render through the whole component tree before handling other events; with Fiber, rendering can be interrupted. This means if the user clicks a button or an animation needs to run, React can pause less urgent work and handle those high-priority updates first.
• Prioritized updates: The Fiber system assigns priority levels to different types of updates. Important updates (like user interactions or animations) are handled sooner, while less critical updates (such as an off-screen data fetch) can be delayed​. In practice, React schedules work so that the app remains responsive – dropping or deferring low-priority work if it would delay more important updates. By breaking rendering into segments, React ensures that no single render task monopolizes the UI thread, resulting in a smoother user experience.

Reconciliation

Reconciliation is the process by which React updates the DOM to match your app’s state. When you call setState() or render a new element tree, React generates a new Virtual DOM and then reconciles it with the previous one​.

Essentially, React looks at the two virtual DOM snapshots (before and after the update) and figures out what changed.

This involves diffing the trees node by node (using the diffing algorithm, discussed next). As changes are identified, React prepares to update the real DOM accordingly.

• Identifies changes: React compares the new Virtual DOM tree to the old tree to spot differences​. For example, it will detect which components have new props or state, which DOM elements were added or removed, and what text has been altered. This diffing phase tells React what needs to change.
• Prepares the update plan: Once the differences are known, React formulates the most efficient way to update the actual DOM. Rather than re-rendering everything, it generates a minimal set of DOM operations (patches) required to apply those changes​. For instance, if one list item changed text, React will only update that specific DOM node. This plan is then executed in the next render “commit” phase, updating the browser DOM. By applying only necessary changes, reconciliation ensures the real DOM updates are as efficient as possible.

Diffing Algorithm

The diffing algorithm is the clever algorithm React uses during reconciliation to compare two Virtual DOM trees quickly.

A naive comparison of two DOM trees could be extremely slow (potentially O(n^3) in complexity for n nodes).

React avoids this by using an optimized diffing strategy that runs in near O(n) time on average​. It achieves this performance by making some reasonable assumptions about the structure of the DOM changes:

• Elements of different types are never reconciled — if an element’s type (e.g., <div> vs <span> or a Header component vs a Footer component) has changed, React won’t try to diff their children in detail. It will simply replace that subtree instead of slowly comparing everything​.
• For elements of the same type, React can do a fine-grained comparison of props and children. It reuses the existing DOM node and updates only the changed attributes or text, leaving the rest untouched​. This way, if you have a large component that only received a new title prop, only the title text node gets updated in the DOM​.

React’s diffing algorithm also handles list structures efficiently using keys. When rendering an array of items, you should provide a unique key for each item. Keys help React identify which list elements correspond between the old and new Virtual DOM.

This way, React can detect if items were added, removed, or re-ordered without re-rendering the entire list from scratch​.

Using keys, combined with the above heuristics, the diffing algorithm updates only what’s necessary and avoids wasteful work. This makes even large UI updates fast – React spends time diffing in JavaScript (which is generally quick) and keeps actual DOM operations (which are slower) to the minimum needed.

The result is that even as your application grows, updates and re-renders remain snappy and scalable.