React Fiber is the reconciliation engine introduced in React 16. It splits render work into small units (fibers) that can be interrupted, paused, and resumed — enabling concurrent features. Understanding Lanes, the render vs commit phases, and automatic batching explains why renders behave unexpectedly and how to optimise them.
Each stage in order — click any step to read what it does.
The two-tree model: current fiber tree vs work-in-progress tree.
The trade-offs worth knowing before you build this.
Wrap non-urgent state updates in startTransition. React will render them at lower priority, keeping the UI responsive.
Always provide stable keys on list items. Avoid using array indices as keys for reorderable lists.
Only use useLayoutEffect when you must read or write layout (e.g. measure a DOM node). Prefer useEffect for everything else.
Sign in to share your feedback and join the discussion.
