Reconciliation

// keys: what they are for, and the four mistakes
items.map(item => <Row key={item.id} {...item} />)           // identity from data: the diff matches by it; state and DOM follow the item
items.map((item, i) => <Row key={i} {...item} />)            // mistake 1: position pairing. insert at the front → every Row gets the wrong item's state
items.map(item => <Row key={Math.random()} {...item} />)     // mistake 2: new identity every render → remount every render → state loss, DOM churn
items.map(item => <Row key={item.name} {...item} />)         // mistake 3: non-unique (two "Adeniji") → ambiguous map; React warns and misbehaves
<Row key={item.id} /> …later… <Row key={`row-${item.id}`} /> // mistake 4: the key format changed → every row remounts once (harmless once; a bug if it alternates)

// keys are scoped to their parent: the same key under different parents is fine. a Fragment with a key scopes the keys of its children.
// a key on a non-list child is the reset idiom: <Editor key={docId} /> remounts when docId changes, on purpose.
// index keys are correct only when the list never reorders, inserts or removes except at the end, and rows have no state. that is rarer than it sounds.

// bailoutOnAlreadyFinishedWork, and the three ways to reach it
function beginWork(current, wip, renderLanes) {
  if (current !== null) {
    const oldProps = current.memoizedProps, newProps = wip.pendingProps
    if (oldProps !== newProps || hasLegacyContextChanged()) didReceiveUpdate = true   // (1) props changed by REFERENCE
    else if (!checkScheduledUpdateOrContext(current, renderLanes)) {                    // (2) no own lanes, no context change
      didReceiveUpdate = false
      return attemptEarlyBailoutIfNoScheduledUpdate(current, wip, renderLanes)         // → bailoutOnAlreadyFinishedWork
    }
  }
  /* … render … */
}
function bailoutOnAlreadyFinishedWork(current, wip, renderLanes) {
  if ((wip.childLanes & renderLanes) === 0) return null         // nothing below either: skip the whole subtree (no cloning)
  cloneChildFibers(current, wip)                                  // a descendant has work: clone children (pointers only) and continue down
  return wip.child
}
// (3) the late bailout: a function component whose props reference changed but whose render produced identical hooks state and
// whose didReceiveUpdate stayed false (no state change, no context) can still bail after running: bailoutHooks + bailoutOnAlreadyFinishedWork.
// so: a component CAN run and then bail out of reconciling its children; the function cost is paid, the subtree cost is not.

// React.memo changes (1): instead of oldProps !== newProps, it runs compare(oldProps, newProps) (shallowEqual by default) and bails if equal.
// useMemo / useCallback make (1) pass by keeping the same reference across renders when deps are Object.is-equal.
// the React Compiler emits the equivalent of both from a dependency analysis of each component.