Card 1 of 20
Front. Snapshot. Why does reading state immediately after its setter still return the value from the current React render?
These cards are original study material. They are not questions from a named employer or a live hiring loop.
All 20 cards in this deck
1.Snapshot
Why does reading state immediately after its setter still return the value from the current React render?
A setter schedules an update; it does not rewrite that render's snapshot. Compute the next value explicitly when needed locally, or observe it in a later render.
2.Updater Queue
How should two queued increments compose without both using the same stale count?
Use functional updates such as setCount(c => c + 1). React applies each updater to the pending state; updaters must remain pure.
3.Render Purity
Why must a React component not charge a payment during rendering?
Rendering can be repeated or abandoned before commit. Perform user-triggered mutations through event or action handling with server-side duplicate protection.
4.Key Reset
Why can changing a form component's key intentionally clear its local state?
A changed key tells React it is a different component identity at that position. Use this deliberately for a new entity, rather than resetting many fields independently.
5.Index Key
A list uses array indexes as keys and inserts a row at the start. Why can typed input appear on the wrong row?
React associates prior component state with positions that now contain different items. Use stable entity identifiers when rows can move, appear, or disappear.
6.Nested Definition
Why can defining a component function inside its parent's render reset child state?
Each parent render creates a new function identity, which React can treat as a different component type. Define the component at module scope and pass values as props.
7.Derived State
Why is calculating filteredItems during rendering often better than copying it into state with an effect?
The result already follows from props and state. An effect adds a stale render and another update while creating a second value that can fall out of sync.
8.Effect Contract
What should an effect's cleanup reverse when subscribing to an external event source?
The setup's subscription and resources, using the matching handler or subscription identity. Verify setup-cleanup-setup leaves exactly one active subscription.
9.Strict Mode
Why can duplicate subscriptions in development Strict Mode expose a real production bug?
Additional development setup and cleanup cycles reveal missing cleanup. Real remounts or dependency changes can trigger the same leak; suppressing the check leaves the lifecycle defect.
10.Effect Dependency
Why is removing a reactive value from an effect dependency list a poor fix for repeated execution?
It can leave the effect synchronized to an old value. Restructure unstable objects or move nonreactive work, while preserving dependencies actually read by the effect.
11.Layout Effect
When is useLayoutEffect justified for a tooltip, and what is its cost?
When DOM measurement and correction must occur before paint to avoid a visible jump. It blocks painting, so keep the work small and prefer ordinary effects when pre-paint synchronization is unnecessary.
12.Ref State
Why does updating ref.current not refresh the displayed value?
Refs retain mutable values without scheduling a render. Use state for values that determine visible output and refs for imperative handles or bookkeeping that does not need rendering.
13.Context Fanout
Why can passing a newly allocated context value cause many consumers to render?
Its reference changes on each provider render. Split unrelated state or stabilize the value when profiling shows benefit; memoizing consumers alone does not block context updates they consume.
14.Memo Limit
Why can a memoized child still render even when its parent passes the same props?
Its own state or consumed context may change. Memoization is an optimization, not a guarantee that the component never executes.
15.Transition Input
Why should a controlled text input's immediate value update remain outside a transition?
The input must reflect typing promptly. Keep the urgent input state update immediate and mark expensive dependent rendering as nonurgent where appropriate.
16.Transition Cpu
Does wrapping a large synchronous calculation in startTransition move it to a worker?
No. The callback executes immediately, and JavaScript computation still occupies the thread. Transitions change update scheduling; heavy computation may require splitting or a worker.
17.Suspense Fetch
Will a Suspense boundary automatically show its fallback for any fetch started in useEffect?
No. Suspense works with supported suspending data sources and lazy code loading. An ordinary effect-driven fetch needs its own loading state or a compatible data framework.
18.Hydration Mismatch
Why can rendering Date.now() in both server and client markup cause hydration problems?
The first client render can differ from the server output. Provide a stable initial value or defer client-specific output intentionally; suppressing warnings does not reconcile arbitrary differences.
19.External Store
Why use useSyncExternalStore for a mutable external store instead of reading a global variable during render?
It provides a subscription and snapshot contract React can use to maintain consistent external-store reads. The snapshot must remain stable when data has not changed.
20.Profile Render
A component renders frequently but commits quickly. What should determine whether to optimize it?
Measured user-visible delay and the cost on the interaction's critical path. Rendering count alone is not a performance metric; use production-representative profiling before adding memoization.