React Intermediate Practice

51 questions covering 17 React topics.

Quick Quiz

1. What does an empty dependency array [] mean for useEffect?

The effect never runsThe effect runs once, after the first renderThe effect runs on every renderThe effect runs only when the component unmounts

2. What does a function returned from useEffect do?

It replaces the render outputIt runs as a cleanup function, before the next effect run and on unmountIt’s called immediately, ignoring the effect bodyIt has no special meaning

3. Why is a missing dependency in the dependency array risky?

It causes a syntax errorThe effect can keep using a stale, outdated value from an earlier renderIt disables the component entirelyIt has no consequence

4. What are the three phases of a component’s lifecycle?

Loading, Rendering, ErrorMounting, Updating, UnmountingInit, Render, DestroyCreate, Read, Delete

5. Which useEffect pattern corresponds to componentDidMount?

useEffect(() => {...}) with no dependency arrayuseEffect(() => {...}, [])useEffect(() => {...}, [dep])The cleanup function

6. What is an advantage of useEffect over separate class lifecycle methods?

It runs fasterSetup and cleanup for the same concern can live together in one functionIt doesn’t need a dependency arrayIt only works with class components

7. What does "lifting state up" mean?

Moving state into a child componentMoving shared state to the closest common ancestor of the components that need itDeleting unused stateA CSS animation technique

8. How does a child component request a change to state that now lives in its parent?

It mutates the prop directlyThrough a callback function passed down as a propIt cannot request changesBy dispatching a global event

9. What is a sign that lifting state up might not be the best solution anymore?

The state is a booleanThe state needs to reach components many levels apart, requiring props to thread through unrelated componentsThe component has no childrenThe parent component is small

10. What problem does the Context API solve?

Improving rendering performanceSharing data across a component tree without manually passing props through every levelManaging CSS stylesHandling form validation

11. Which hook is used to read a context value inside a component?

useStateuseContextuseReduceruseRef

12. What happens to a context’s consumers when its Provider value changes?

Only the Provider re-rendersEvery component consuming that context re-rendersNothing happens automaticallyOnly the deepest consumer re-renders

13. Does updating a ref’s .current value trigger a re-render?

Yes, alwaysNoOnly for DOM refsOnly inside useEffect

14. What is the most common use for a ref attached to a JSX element?

Styling the elementGetting direct access to the underlying DOM nodePassing props to the elementAdding a key

15. Where should you read or write a ref’s value?

Directly in the render bodyInside event handlers or effects, not during renderingOnly inside JSXIt doesn’t matter

16. What naming convention must a custom hook follow?

It must end in "Hook"Its name must start with "use"It must be all uppercaseThere is no convention

17. Do two components calling the same custom hook share the same state?

Yes, alwaysNo — each call gets its own independent stateOnly if they are siblingsOnly if wrapped in Context

18. What does a custom hook primarily let you reuse?

JSX markupStateful logic and side effectsCSS stylesRoute definitions

19. What must every hook’s name start with?

"get""use""with""on"

20. Why can’t a hook be called conditionally, e.g. inside an if statement?

It causes a syntax errorReact matches hook calls to their internal state by call order, which must stay identical between rendersConditional hooks are slowerIt’s only a style preference, not a real rule

21. Where can hooks be called from?

Any JavaScript functionOnly React function components and other custom hooksOnly class componentsOnly top-level module code

22. What is the key timing difference between useEffect and useLayoutEffect?

There is no differenceuseLayoutEffect fires synchronously before the browser paints; useEffect fires afteruseEffect only runs once, useLayoutEffect runs every renderuseLayoutEffect only works with class components

23. What problem does useLayoutEffect solve that useEffect cannot?

Fetching data fasterPreventing a visible flicker when measuring and adjusting the DOM based on its own layoutReducing bundle sizeHandling errors

24. Why should useLayoutEffect be used sparingly?

It is deprecatedIt runs synchronously and blocks the browser from painting until it finishesIt cannot access refsIt only works in production builds

25. What does useImperativeHandle let a component do?

Prevent all re-rendersCustomize exactly what value a parent receives when it attaches a ref to the componentReplace useStateFetch data automatically

26. Why is exposing a small custom API often better than exposing the raw DOM node?

It’s fasterIt keeps a clean boundary and avoids tightly coupling the parent to internal implementation detailsThe raw DOM node cannot be exposed at allIt’s required by TypeScript

27. As of React 19, is forwardRef still required to accept a ref prop?

Yes, alwaysNo — function components can accept ref directly as a regular propOnly for class componentsOnly when using useImperativeHandle

28. What are the two values returned by useReducer?

value and setValuestate and dispatchdata and errorcurrent and previous

29. What does a reducer function receive as arguments?

Only the actionThe current state and an action describing what happenedOnly propsNothing

30. When is useReducer generally preferred over useState?

For every component, alwaysWhen state updates are complex and depend on several related sub-valuesOnly for boolean valuesNever, useState should always be used

31. What does useMemo do?

Memoizes an entire componentRe-runs an expensive calculation only when its dependencies change, caching the result otherwisePrevents all re-rendersReplaces useState

32. What does useCallback memoize?

A valueA function referenceA componentA CSS class

33. Why is useCallback often paired with React.memo?

They are unrelated and never used togetherWithout a stable function reference, React.memo’s comparison fails and the child re-renders anywayuseCallback is required for React.memo to work at allIt improves CSS performance

34. What does startTransition let you do?

Delay a component from mountingMark a state update as low-priority, so React can keep the UI responsive and interrupt it if neededFetch data automaticallyPrevent a component from ever re-rendering

35. What does the isPending flag from useTransition indicate?

That an error occurredThat the transition is still processing in the backgroundThat the component has unmountedThat the network is offline

36. What happens if the user triggers a new transition while an older one is still processing?

Both run and race unpredictablyReact abandons the stale, in-progress transition and starts fresh with the latest valueThe app throws an errorThe second transition is queued and runs after the first fully completes

37. What does useDeferredValue return?

A brand-new state variableA version of the given value that lags behind during urgent updates and catches up when idleA memoized functionA boolean indicating loading state

38. How does useDeferredValue differ from a fixed-delay debounce?

They are identicalIt adapts to the actual device and workload instead of waiting a fixed delayIt only works with stringsIt requires a server round-trip

39. When is useDeferredValue generally preferred over useTransition?

When you don’t directly control the update — the value just comes in, like through a propThey are used in identical situations, so it never mattersOnly inside class componentsOnly for numeric values

40. What problem does useId solve?

Generating random numbers for animationsGenerating unique, SSR-safe IDs for accessibility attributes across multiple instances of a componentCreating unique keys for list itemsImproving rendering performance

41. Why is Math.random() unsafe for generating an element id?

It’s too slowIt produces different values on the server and client, causing a hydration mismatchIt only generates numbers, not stringsIt cannot be used inside JSX

42. Should useId be used to generate keys for a list of rendered items?

Yes, it’s the recommended approachNo — list keys should come from the data itself, not useIdOnly for lists longer than 10 itemsOnly in Server Components

43. What kind of data source is useSyncExternalStore designed for?

React state managed with useStateData that lives outside of React, like a browser API or a third-party storeCSS variablesRoute parameters

44. What does the getSnapshot function need to return?

A cleanup functionThe store’s current valueA PromiseA React element

45. Why is useSyncExternalStore preferred over a manual useEffect + useState subscription for external stores?

It’s shorter to typeIt guarantees a consistent, non-stale value even under concurrent renderinguseEffect cannot subscribe to events at allIt automatically formats the data

46. What does useDebugValue affect?

The component’s rendered outputOnly how a custom hook’s value is labeled in React DevToolsThe component’s performance in productionThe order hooks are called in

47. Why is useDebugValue mainly useful for custom hooks specifically?

It only works with custom hooks technicallyBuilt-in hooks like useState already show their value in DevTools, while custom hooks otherwise appear opaqueIt replaces the need for useStateIt only works with useEffect

48. What is the purpose of the optional second argument to useDebugValue?

It sets a default valueA formatting function that only runs when DevTools is actively inspecting the hookIt enables the hook conditionallyIt sets the hook’s dependency array

49. What does an error boundary do?

Prevents all errors from ever occurringCatches rendering errors in its children and shows a fallback UI instead of crashing the whole appValidates form inputHandles network errors automatically

50. Can an error boundary currently be written as a function component with hooks?

Yes, using useErrorBoundaryNo — it must currently be a class componentOnly in React 19Only with TypeScript

51. Does an error boundary catch errors thrown inside an onClick event handler?

Yes, alwaysNo — it only catches errors during rendering, not inside event handlersOnly if wrapped twiceOnly for async handlers