In the previous parts of this series, we explored how React Fiber introduced a custom execution engine and a scheduler that controls what runs and when. Now, the critical question becomes: How does React use that engine to figure out which parts of your UI actually changed after a state update? Re-rendering the entire component tree on every change would be prohibitively slow, especially in large applications. React's answer is a set of intelligent skip mechanisms—collectively known as the Reconciler—that minimize work. Here are five key mechanisms that power this efficient change detection.

1. The Problem: Re-rendering Everything Is Costly

Imagine an app with 500 components. A user clicks a button that increments a counter inside a single deeply nested component. Without optimization, React would need to re-execute every component function, generate new JSX, and diff it against the old DOM—500 times—only to discover that just one <span> needs its text updated. Older frameworks took this naive approach, which caused sluggish performance. React recognized that most of the tree remains unchanged after an update. The core challenge is to quickly identify which parts could have changed and skip everything else. This is where the Reconciler enters.

2. The Reconciler: The Algorithm That Finds What Actually Changed

At the heart of React's change detection lies the Reconciler. Its sole purpose is to answer the question: "Of everything that could have changed, what actually did?" Instead of brute-forcing through the entire tree, the Reconciler uses a clever strategy of marking, skipping, and comparing. It relies on the Fiber tree—a lightweight representation of your component hierarchy—to track which nodes have pending work. Every Fiber node carries a flag indicating whether itself or any of its descendants need re-rendering. These flags act as signposts, guiding React directly to the affected components without touching unrelated branches.

3. The First Skip: Following a Trail of Flags

When you call setState inside a component, React doesn't just mark that single component for update. It sets a flag on every ancestor up to the root, creating a breadcrumb trail. As React walks the Fiber tree during reconciliation, it checks each node: "Does this node have work? Do any of its children have work?" If both answers are no, React skips the entire subtree in one step—not just the node, but every component inside it. This is how a click inside a nested counter avoids touching 490 unrelated components. React walks straight down the trail of flags, skipping clean branches, and stops only at components that actually changed.

4. The Second Skip: Checking If Props Have Changed

Even after arriving at a component flagged for work, React performs one more optimization before re-rendering it. It checks whether the component's inputs—its props—actually changed. A parent re-render might generate new props objects for its children, but "new" doesn't always mean "different." React compares the old props to the new props using object reference equality. If the props reference points to the same object (i.e., it hasn't changed), then the component's output won't differ, so React can skip re-rendering that component entirely. This simple pointer check, combined with techniques like memoization (via React.memo or useMemo), eliminates vast amounts of unnecessary work.

5. The Result: Efficient Targeted Updates

By combining the trail of flags and the props equality check, React achieves remarkably efficient updates. The algorithm walks the tree selectively, bypasses entire branches that are clean, and only re-renders components whose state or props have genuinely changed. The scheduler then prioritizes these updates based on urgency—ensuring animations and user interactions stay smooth while background tasks yield. The result is a framework that can handle thousands of components with minimal overhead, delivering fast, responsive UIs. Understanding these mechanisms helps developers write performant React code by leveraging the same skip logic (e.g., using React.memo to help the props check).

In summary, React's change detection is not magic—it's a carefully engineered set of heuristics that trade off thoroughness for speed. By marking a trail of flags and checking prop references, React avoids the brute-force approach of re-rendering everything. These five mechanisms—the problem formulation, the Reconciler algorithm, the flag trail, the props comparison, and the final targeted update—form the backbone of how React efficiently finds what actually changed, delivering the performance developers expect.