What is the React Fiber Architecture and how does concurrent rendering work?

Explanation & Concept

React Fiber is the complete rewrite of React's core reconciliation algorithm introduced in React 16. The legacy stack reconciler executed synchronously and could not be paused, causing dropped frames during heavy updates.

Fiber represents units of work as a linked list of **Fiber Nodes**. It enables **Concurrent Mode**: React can pause, resume, prioritize, or discard rendering work to keep the browser responsive to user clicks and typing.

Code Example

javascript

// Priority scheduling in React 18 Concurrent Mode
import { useState, useTransition } from "react";

export function FilterSearch() {
  const [input, setInput] = useState("");
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    // 1. High priority urgent update: update text input immediately
    setInput(e.target.value);

    // 2. Low priority non-urgent update: can be interrupted by user typing
    startTransition(() => {
      setList(generateHugeList(e.target.value));
    });
  };

  return <input value={input} onChange={handleChange} />;
}

How It Works & Key Takeaways

Fiber prioritizes the text input update so the user feels zero typing lag, while deferring the heavy list filtering in the background.