What is reconciliation in React?

1
Reconciliation in React refers to the process by which React updates the user interface to match the most recent state and props of a component.
2
it's the mechanism that React uses to determine `what changes need to be made to the DOM in response to changes in the application state or props.

Difficulty: 5/10

Topics: virtual DOM, diffing algorithm, key management

0-2 years experience

1
If you add a new item to a list rendered with map, how does React decide which DOM nodes to update?
2
What happens under the hood when you change a component's state that triggers a re‑render?
3
Suppose two sibling components are rendered with the same key—what will React's reconciliation do?

2-5 years experience

1
You notice a list component re‑renders all items when only one changes. How would you investigate if the reconciliation process is the cause?
2
During a feature rollout a component sometimes fails to update after its props change. How would you debug whether the diffing algorithm is misbehaving?
3
Explain the trade‑offs of using an array index as a key versus a stable unique id in terms of reconciliation performance.

5-8 years experience

1
Design a large data‑table component that can handle thousands of rows efficiently. How would you leverage React's reconciliation to minimize DOM work?
2
When integrating a third‑party library that mutates the DOM directly, what issues can arise with React's reconciliation, and how would you mitigate them?
3
If you need to force a component subtree to skip reconciliation, what approaches can you take and what are the performance implications?

8+ years experience

1
Your team is migrating a legacy codebase to React. How would you plan the rollout to ensure that key mismatches or other reconciliation bugs don’t cause regressions across many modules?
2
At a company‑wide level you need guidelines for key usage and component memoization to optimize reconciliation. What policies would you propose and how would you enforce them?
3
Consider a micro‑frontend architecture where multiple React apps share a page. How does reconciliation interact across app boundaries, and what architectural decisions help avoid conflicts?