What is the React Fiber architecture

Short answer

Fiber is React's reimplementation of the reconciler. It breaks rendering work into units that can be prioritized, paused, resumed, and aborted, enabling features like Suspense and Concurrent Mode.

How it works

Instead of recursively mounting and updating components in one pass, Fiber creates a linked list of work units. The scheduler can interleave this work with browser events, animations, and user input, preventing dropped frames.

Why it matters

• Incremental rendering: Spread updates over multiple frames.
• Error boundaries: Catch errors during rendering without crashing the whole tree.
• Suspense: Pause rendering while waiting for async data.

Tips

• You do not interact with Fiber directly, but understanding it explains React 18+ behavior.
• Use scheduler package APIs if building custom libraries that need to yield to the browser.
• Profile with React DevTools to see how Fiber prioritizes updates in concurrent mode.