Discuss fibre lifecycle.

React Fiber introduces a new lifecycle for processing updates and rendering components. This lifecycle consists of three main phases:

1
Render Phase: In this phase, React computes the new component tree based on the updates (e.g., new state or props). This phase is also known as the 'reconciliation phase.' During this phase, React can pause and resume the work as needed, allowing it to yield control back to the browser and maintain responsiveness.
2
Commit Phase: Once the render phase is complete, React moves to the commit phase, where it applies the changes calculated during the render phase to the DOM. This phase is also known as the flush phase. Unlike the render phase, the commit phase cannot be interrupted, as it involves making actual changes to the DOM.
3
Cleanup Phase: After the commit phase, React performs any necessary cleanup, such as unmounting components that are no longer needed, and running side effects like componentDidUpdate or componentWillUnmount.

Difficulty: 6/10

Topics: render phase, commit phase, scheduling

0-2 years experience

1
If you need to run some code right after a component's DOM updates, which part of the Fiber lifecycle would you use and why?
2
How would you prevent a state update from causing an infinite render loop in the render phase of Fiber?

2-5 years experience

1
We noticed a component flickering during state updates. Walk me through how the render and commit phases of Fiber could cause this and how you'd debug it.
2
When adding a new feature that requires heavy calculations, how would you decide whether to use useMemo or adjust Fiber scheduling to avoid blocking the UI?

5-8 years experience

1
Explain how you would optimize a large list rendering by leveraging Fiber's concurrent mode and the commit phase. What trade‑offs are involved?
2
If a third‑party library mutates the DOM outside of React, how does that interact with the Fiber commit phase and what strategies would you employ to keep the UI consistent?

8+ years experience

1
At a company migrating a legacy codebase to React 18 with concurrent features, how would you plan the rollout of Fiber's new lifecycle phases across multiple teams to minimize risk?
2
Design a cross‑team guideline for handling side‑effects in the render phase versus the commit phase, considering performance, testing, and future maintainability.

❓Can you give an example of using useEffect versus useLayoutEffect in this context?
❓What would happen if you tried to read the DOM during the render phase?
❓How does React's priority system influence when work is flushed?