What is fibre in react fiber?

In Fiber, a fibre is a JavaScript object representing a unit of work. It is similar to a virtual DOM node, but it also contains additional information about the work's state, priority, and other metadata. Each fibre is associated with a component instance and represents a part of the component tree.

A fibre object contains properties such as:

1
type: The component type (e.g., a function or a class).
2
stateNode: The instance of the component or DOM node.
3
child: The first child fiber.
4
sibling: The next sibling fiber.
5
return: The parent fiber.
6
alternate: A reference to the alternate version of the fiber, used during the reconciliation process.

Difficulty: 6/10

Topics: reconciliation, scheduling, concurrency

Scenario Questions

0-2 years experience

1
You need to add a loading spinner that appears while a large list is being rendered. How does React Fiber affect the way you implement this, and what would you expect to see during rendering?
2
If you call setState inside a click handler that triggers a heavy component tree update, what does Fiber do differently compared to the old stack reconciler?
3
What happens when you schedule multiple state updates in quick succession? How does Fiber handle them?

2-5 years experience

1
Your team notices that a modal component sometimes lags when opening after a network request. How would you investigate whether Fiber's scheduling is causing the delay, and what changes could you make?
2
During a code review you see a component using useLayoutEffect that blocks rendering. Explain how Fiber's priority system could be used to mitigate the jank.
3
You need to abort a long‑running render when the user navigates away. How would you leverage Fiber's interruptible rendering to achieve this?

5-8 years experience

1
Design a high‑traffic dashboard that updates every second with new data. How would you structure the component hierarchy and use Fiber's concurrent mode to keep the UI responsive?
2
Explain the trade‑offs of opting into React's concurrent features (e.g., useTransition) for a large e‑commerce site, considering server‑side rendering and SEO.
3
A legacy codebase still uses the old ReactDOM.render. What steps would you take to migrate to Fiber‑based APIs while ensuring no regressions in performance?

8+ years experience

1
Your organization plans to adopt React 18 concurrent features across multiple teams. What architectural guidelines would you establish to avoid pitfalls related to Fiber's scheduling and suspense boundaries?
2
Discuss how Fiber's incremental rendering influences the design of a shared component library that must support both synchronous and asynchronous rendering modes.
3
When integrating a third‑party UI framework that manipulates the DOM directly, how would you mitigate conflicts with Fiber's reconciliation process at scale?

Follow-up Questions

❓What concrete benefit does interruptible rendering give you in a real UI?
❓How does Fiber decide which updates get higher priority?
❓Can you give an example where using useTransition improves user experience?