What are reconciliation, Fiber and keys?
Try code in the playgroundUnderstand the concept
Reconciliation is how React matches elements from the previous and next render to decide what to keep, update or replace. Fiber is the internal representation that helps React organize that work. Keys supply identity among siblings, allowing React to preserve the right state as a list changes.
Important ideas
-
Reconciliation matches the old and new component trees.
-
Fiber is React's internal structure for organizing and scheduling work.
-
Stable keys help preserve list-item identity; avoid indexes for reorderable lists.
-
Changing a key can deliberately reset a subtree's state; random keys reset identity on every render and cause unnecessary remounts.
Can you explain it without the notes?
What are reconciliation, Fiber and keys?
Use your own words. Explain an example and one limitation before checking the explanation.
Check your explanation
Reconciliation is how React matches elements from the previous and next render to decide what to keep, update or replace. Fiber is the internal representation that helps React organize that work. Keys supply identity among siblings, allowing React to preserve the right state as a list changes.
Turn this concept into a clear answer.
- A key is about identity, not just removing a console warning. Demonstrate a reordered list with editable rows.
Adapted from 06_REACT_NEXTJS.md · “What are reconciliation, Fiber and keys?”. Examples are study fragments; framework behavior can depend on your version.