What is work in progress tree in react fibre?

In Fiber, there are two trees: the current tree and the work-in-progress tree.

1
The current tree represents the component tree that is currently rendered on the screen.
2
The work-in-progress tree is a clone of the current tree, which React uses to perform updates.
3
During the reconciliation process, React updates the work-in-progress tree, compares it with the current tree, and then commits the changes to the DOM.
4
This approach allows React to work on the updates incrementally, without blocking the main thread, and efficiently manage the rendering process.

Difficulty: 6/10

Topics: Fiber architecture, Reconciliation, Commit phase

0-2 years experience

1
When you call setState in a component, which fiber tree does React update first, the current tree or the work‑in‑progress tree?
2
If you open React DevTools while a component is rendering but hasn't committed, what would you expect to see regarding the fiber tree?
3
Explain the role of the work‑in‑progress tree when you implement a simple toggle button that shows or hides text.

2-5 years experience

1
You notice a UI that never reflects a state change. How would you investigate whether the work‑in‑progress tree was discarded prematurely?
2
During fast refresh, a component's effect runs twice. How does the work‑in‑progress tree explain this behavior?
3
When adding a feature that conditionally renders a large list, how does the work‑in‑progress tree help you reason about rendering performance and possible interruptions?

5-8 years experience

1
If you are building a custom renderer (e.g., for React Native), how does the existence of a work‑in‑progress tree affect your implementation of the commit phase?
2
Describe a strategy to mitigate memory bloat caused by lingering work‑in‑progress fibers in a long‑running application.
3
When profiling a high‑frequency animation, what trade‑offs would you consider about how often you replace the work‑in‑progress tree versus reusing existing fibers?

8+ years experience

1
Your organization is migrating a legacy codebase to React 18 with concurrent features. How would you plan the transition while accounting for the double‑buffering semantics of the work‑in‑progress tree?
2
In a large company with many squads, how would you educate teams about the implications of the work‑in‑progress tree on debugging and testing strategies?
3
When designing a new cross‑platform UI framework that builds on React Fiber, what architectural decisions around the work‑in‑progress tree would you make to support future features like server components?

❓Can you outline the steps React takes from creating the WIP tree to committing it?
❓What would happen if the WIP tree is discarded before the commit phase?
❓How does this double‑buffering differ from the older stack reconciler?