๐ฅ๐ฒ๐ฎ๐ฐ๐ ๐๐ถ๐ฏ๐ฒ๐ฟ ๐๐ฟ๐ฐ๐ต๐ถ๐๐ฒ๐ฐ๐๐๐ฟ๐ฒ ๐๐ ๐ฝ๐น๐ฎ๐ถ๐ป๐ฒ๐ฑ
React uses Fiber to render your UI. Most developers use it without knowing how it works.
The old Stack Reconciler worked differently. It walked the entire component tree in one go. You could not stop it. A slow render blocked the main thread. This stopped typing, clicking, and scrolling.
Fiber changes this. It breaks rendering into small units of work. Each unit is one fiber. A fiber is a JavaScript object. It uses pointers to link children, siblings, and parents. This structure allows React to pause mid-render.
React uses two phases:
Render phase React runs component functions and compares old data with new data. This phase is invisible to the user. React pauses, restarts, or throws away work during this phase.
Commit phase React writes changes to the DOM. This phase is synchronous. Users only see a finished UI.
This split explains three common React behaviors:
- useEffect runs after the paint because it schedules after the commit phase.
- useLayoutEffect runs before the paint because it fires during the commit phase.
- Strict Mode runs components twice because the render phase can restart.
React also uses lanes to manage priority:
- SyncLane: Clicks and keypresses. These have the highest priority.
- DefaultLane: Regular state updates.
- TransitionLane: Updates inside useTransition.
- IdleLane: Background tasks.
High priority lanes always run first. This is why useTransition works.
React maintains two trees at all times. One tree is on the screen. The other is a work-in-progress tree built off-screen. React swaps them during the commit phase. You never see a half-finished UI.
Read the full breakdown here: https://dev.to/dev_encyclopedia/react-fiber-architecture-explained-how-react-renders-ui-4687