Patterns — Chapter Quiz

Question 1

1

A Modal component is growing 10+ showX booleans. The cleanest refactor is…

AAdd a configuration object propBSwitch to a class componentCCompound components — Modal.Header, Modal.Body, Modal.FooterDMove the booleans into context

Composition over configuration. Let the caller compose the pieces they need; adding a new variant is a new sub-component, not a new prop.

Question 2

2

A controlled component owns its state; an uncontrolled one stores its state in the parent.

TTrueFFalse

It's reversed. A CONTROLLED component takes value from the parent; an UNCONTROLLED component manages its own internal state.

Question 3

3

What does createPortal(content, node) do?

ARenders content into node, but keeps it in the same React tree for context and eventsBMoves the entire React tree into a new DOM nodeCCreates a new React root inside nodeDDetaches a component from its parent

Portals split the DOM tree from the React tree. The content mounts elsewhere in the DOM, but context, events, and state still flow through the React tree.

Question 4

4

Error boundaries are still class components — but they only catch errors thrown…

AInside event handlersBDuring render (or in hooks called during render)CFrom async callbacksDFrom useEffect cleanup

Render-time errors are what boundaries catch. Event handlers and async code need try/catch.

Question 5

5

What is <Suspense fallback={<X />}> for?

ACatching render errorsBShowing a fallback while a child component is 'waiting' (lazy load or data)CPausing the render queueDForcing a re-render

Components can suspend (lazy-loaded code, data libraries that throw promises). <Suspense> shows a fallback in the meantime.

Question 6

6

React.memo(Component) skips a re-render when…

AProps are shallow-equal to the previous propsBState doesn't changeCThe parent says soDThe component is offscreen

Shallow comparison of props. New object/array literal as a prop defeats it — combine with useMemo/useCallback for the caller's side.

Question 7

7

Changing a component's key between renders unmounts and remounts it (resetting state).

TTrueFFalse

A different key is a different instance to React. Useful trick: <UserForm key={userId} /> resets when the user changes.

Question 8

8

To split off a component into its own bundle chunk, use React.________(() => import("./Comp")).

Pair React.lazy with <Suspense> for code-splitting that loads on demand.

Test what you learned.