Drills Repository
413 Drills · All Belts
closest provider wins
React resolves context by searching upward through the component tree and using the closest matching provider. Inner providers override outer providers for all descendants beneath them, unlike CSS inheritance, which merges values instead of replacing them.
Editing state in DevTools
React Developer Tools inspects and modifies component state at runtime by routing changes through React's normal update system, not by mutating internal objects directly. Any state change made through DevTools is processed the same way as an ordinary application update.
Production profiling overhead
React strips profiling instrumentation from production builds because collecting detailed timing and scheduling data adds runtime overhead. This limitation comes from React itself, not from browser tooling.
React DevTools availability
The React Developer Tools extension detects React applications and only adds its debugging panels for pages that actually use React. Installing the extension does not make the panels appear on non-React pages.
Passing vs calling event handlers
React event handlers expect a function reference so React can invoke it later when the event occurs. Writing onClick={handleClick} passes the function itself, whereas handleClick() would execute it immediately during rendering.
Mutating object state directly
React state must be treated as immutable, since React detects updates by comparing references, not by inspecting values. Mutating the existing object keeps the same reference, so React never registers a change and skips re-rendering.
Losing state fields during object update
State setters returned by useState replace the entire stored value rather than shallow-merging it the way class component setState once did. Since the new object contains only lastName, every other field on the previous state object is lost.
inline object breaks memoization
React.memo compares props using shallow equality via Object.is, not deep value comparison. Two separately created object literals with identical contents are still different references, so React treats the prop as changed.
Keys are scoped to parent
React only uses keys to distinguish siblings within the same parent during reconciliation, not to provide global uniqueness across the application. Their purpose is to help React correctly preserve or reset state when sibling ordering changes.
filter before map
filter() creates a new array containing only items matching a condition, which map() can then transform into JSX elements for rendering. Chaining the two produces a filtered, rendered list in a single declarative expression.
React rendering false with &&
JavaScript's && operator returns its left operand when that operand is falsy, so an expression like count && <Badge /> evaluates to 0 rather than false when count is zero. React renders numbers like 0 as visible text, since it only treats false, null, and undefined as empty.
Non-idempotent values in render
React components must be idempotent during render, meaning the same props and state should always produce the same output. Math.random() violates this because it generates a new value on every render even when the inputs remain unchanged.