Drills Repository
150 Drills · All Belts
duplicate context modules break providers
Context matching depends on strict object identity using ===, not on variable names or structure. If the provider and consumer reference different context objects, React treats them as unrelated contexts. Developers often assume identical source code means identical runtime context identity.
custom arePropsEqual stale closure bug
Functions in React often capture props and state through closures. If arePropsEqual incorrectly treats changed callback references as equal, React skips rendering and the component continues using handlers created during older renders. This creates stale closure bugs where the UI appears current but handlers use outdated data.
Stale event listener closure
The event listener was created during an older render and captured stale state values in its closure. Because the Effect failed to re-synchronize when dependencies changed, the listener kept using outdated data. The wrong answers sound believable because browser event systems feel external to React.
Cascading update performance regression
Cascading updates happen when code schedules another update during an active render pass, potentially forcing React to discard completed work and restart rendering. This pattern is a common performance regression source. Developers often confuse cascading updates with batching or Suspense retries.
Passive effect timing
Passive effects like useEffect normally run after paint during the Remaining Effects phase. React separates them from layout effects to avoid blocking visual updates. Developers often assume all effects execute immediately during commit.
Reducer purity
Reducers must be pure functions: same input should always produce the same output. Since reducers may run during rendering and actions are queued, side effects like alerts or requests can create unpredictable behavior and duplicate executions in Strict Mode.
useInterval stale callback reset
Because inline callbacks get a new reference every render, React tears down and recreates the interval repeatedly. If renders happen frequently enough, the timer can reset before completing its delay period. Wrapping the callback with useEffectEvent or stabilizing the reference avoids unnecessary resubscription.
Resetting interval from unstable callback
Inline callbacks create new references every render. Because the Effect depends on onTick, React repeatedly tears down and recreates the interval, potentially resetting it before the delay fully completes. This can prevent expected timer behavior.
Delayed state without cleanup
Clearing earlier timeouts would continuously cancel pending delayed updates, causing the lagging motion to reset repeatedly. Allowing all scheduled timeouts to complete creates the intended trailing effect where delayed values smoothly follow the source value.
Nested component definition remount
Defining a component inside another component creates a new function identity on every render. React treats this as a different component type occupying the same position, so it unmounts the previous subtree and mounts a new one. This destroys the nested component's local state during reconciliation.
Reordering inputs with keys
Without keys, React matches sibling components by order during reconciliation. Stable keys allow React to track component identity independently of position, preserving the correct state with the correct logical field after reordering. This prevents state from "moving" to the wrong input.
Forcing DOM recreation with key
Changing a key tells React the previous element should be removed and a new one mounted instead of reusing the existing DOM node. This forces the browser to display a freshly created <img> element rather than temporarily showing stale content from the reused node.