Lesson quiz bank
Select one answer for each question. Use the starter code bank to experiment before answering.
Lesson 1 — App anatomy and JSX
A React component is best described as:
A component is a function or class. It returns an element object, which React later turns into DOM nodes.
Why must the render function stay pure?
Pure renders enable concurrent features, batching, and reliable tests. Side effects break those guarantees.
Where should createRoot mount the application?
Mounting on document.body is discouraged. Use a dedicated container to avoid conflicts with third-party scripts.
Lesson 2 — Rendering, lists, and conditional UI
Why can index keys corrupt state?
When the array is reordered, an index key no longer matches the original item, so React may preserve local state for the wrong domain entity.
When does React preserve component state?
React uses type and key to decide whether an existing instance can be reused.
What is the risk of items.length && <List />?
Use a ternary or Boolean(items.length) && <List /> to avoid rendering 0 or false.
Lesson 3 — Props, composition, and component contracts
When is prop drilling clearer than Context?
Drilling is clear when dependencies are explicit and limited. Context is better for widely shared, slowly changing values.
What makes a component API stable?
Stable contracts are small, type-safe, and decoupled from parent-domain assumptions.
Why does a new callback identity on every render matter?
If a child is memoized, a new callback prop can bypass the memo. Callbacks also close over state from the render where they were created.
Lesson 4 — Hooks, reducer state, and derived data
Why can an event handler observe stale state?
State in a closure is a snapshot from one render. Dispatch queues a future render, but the current closure still sees the old value.
When is a reducer preferable to several useState calls?
Reducers centralize related transitions, keep logic pure, and make combinations easier to audit.
Why should derived data usually not live in an effect?
Derived values that depend on state should be computed from state during render. Storing them adds a synchronization point that can go stale.
Lesson 5 — Context and dependency boundaries
What causes a Context consumer to re-render?
A context consumer re-renders when the provided value is a new object. Splitting contexts by change frequency reduces unwanted updates.
When is Context the wrong abstraction?
Context is a transport channel, not a state manager. Use props or a state library when the scope or change pattern is wrong.
How would you inject a fake repository in a test?
Keep dependencies replaceable by providing them through explicit boundaries, then render those boundaries with stubs in tests.
Lesson 6 — React Router and lazy routes
Hash router versus browser router: what is the main operational tradeoff?
Hash routing is useful for static hosts like GitHub Pages. Browser routing gives cleaner URLs but needs server support.
Where should loading and error boundaries live?
Place Suspense and error boundaries at route or layout boundaries so a failing chunk does not crash the whole shell.
What state belongs in the URL?
URL state is for values that should survive refresh or be shareable. Do not put transient UI state in the URL.
When should you prefer a controlled form?
Controlled forms give React the source of truth, which is necessary for validation, conditional fields, and derived state.
When should authoritative validation run?
The authoritative check runs at submit. Real-time checks improve UX but cannot replace trusted boundary validation.
How do you prevent duplicate async submissions?
Guard the submit handler with state. Reject overlapping calls and disable the UI until the current save resolves.
Lesson 8 — Fetching and async state
Why does fetch not reject on a 404 or 500?
fetch only rejects on network failure. HTTP errors return a resolved response, so the code must check ok or status.
How can an old, slow request overwrite newer data?
Race conditions happen when you do not track which request is current. Use AbortController or a request id.
Which concern belongs to server-state caching?
Deduplication, refetching, and stale-while-revalidate are server-state concerns. Client state is separate.
Lesson 9 — Effects, cancellation, and event reasoning
When should you use an effect instead of an event handler?
Effects synchronize with external systems that must follow the committed state. User actions belong in event handlers.
What does the useEffect dependency list represent?
Dependencies are every reactive value read inside the effect. When they change, the previous effect is cleaned up and the new one runs.
Why is ignoring the exhaustive-deps rule risky?
Missing dependencies cause stale closures and missed re-synchronizations. Fix the dependencies, not the rule.
Lesson 10 — Vitest and React Testing Library
What should you avoid mocking in a React test?
Mock at external boundaries. Mocking React or the component under test gives false confidence and fragile tests.
getBy, findBy, or queryBy — which do you use for async content?
findBy waits and throws if absent. getBy is synchronous. queryBy returns null and is useful for asserting absence.
How do you test accessibility without claiming full compliance?
Unit tests can check roles, labels, and focus behavior. They do not replace full a11y audits or manual screen-reader testing.
Why can memo make performance worse?
Memoization is only valuable when it prevents real downstream work. For cheap components, the comparison itself can cost more than the render.
What is the difference between useMemo and useCallback?
useMemo prevents recomputing expensive values. useCallback prevents a function reference from changing on every render.
What does startTransition do?
startTransition tells React the update can be interrupted so urgent interactions remain smooth.
Lesson 12 — Architecture and production boundaries
Where are the most important trust boundaries?
Client-side checks improve UX but cannot enforce authorization or data integrity. The server is the trust boundary.
When does SSR most clearly improve a product?
SSR improves time-to-meaningful-content and search/indexing. Weigh that against operational complexity.
How do you evolve an app across teams?
Architecture follows ownership and change patterns, not file-type folders. Explicit contracts let teams move independently.
Lesson 13 — Capstone change request
How should you treat a shared URL payload?
A URL is untrusted. Validate and version the payload. Never place sensitive data in a client-controlled URL.
How do you handle future requirements like auth or collaboration?
Do not prebuild hypothetical features. Build the current requirement cleanly and note where future changes would plug in.
What makes a design record useful?
A design record explains why the chosen design won, what was rejected, and what evidence would change the decision.