Understanding React Fiber

Previously, React used a system called Stack Reconciler to update the UI, but it had a big problem… any update had to finish entirely in one go first. That means if a heavy update happened, the whole page would freeze along with it.

Any update had to complete fully, even if it was heavy. No deferring: typing in an input could be delayed. All updates had the same priority.

If you look at this code, you’ll understand what happens with Stack Reconciler:

1import { useState } from "react";
2
3const products = new Array(1000).fill(0).map((_, i) => `Product ${i + 1}`);
4
5function App() {
6  const [list, setList] = useState([]);
7
8  const handleClick = () => {
9    setList(products); // Large update all at once = freeze
10  };
11
12  return (
13    <div>
14      <button onClick={handleClick}>Load Products</button>
15      <input type="text" placeholder="Type here" className="border p-2 block my-2" />
16      {list.map((item, index) => (
17        <p key={index}>{item}</p>
18      ))}
19    </div>
20  );
21}
22
23export default App;

When you click the button, React tries to render 1000 products at once, which freezes the page. Any typing or clicking during the update won’t execute immediately.

It splits updates into smaller tasks. It prioritizes important events like clicks and typing. It can pause heavy updates and resume them later.

In summary: Fiber made updates smoother and allowed React to manage priorities intelligently.