React Advanced Practice

39 questions covering 13 React topics.

Quick Quiz

1. What is unique about use() compared to hooks like useState?

It only works in class componentsIt can be called conditionally and inside loops, unlike other hooksIt cannot be used with SuspenseIt replaces JSX entirely

2. What happens when use() is passed a Promise?

It throws an error immediatelyIt suspends the component until the Promise resolves, integrating with SuspenseIt returns undefined immediatelyIt converts the Promise to a string

3. Where does a Promise passed to use() in a Client Component typically come from?

It’s always created fresh inside the Client Component on every renderA Server Component that started the fetch and passed the Promise down as a propIt must be hardcodedFrom a CSS file

4. What does useOptimistic let you do?

Cache API responses permanentlyShow an expected result immediately, before an async action actually completesPrevent all network requestsReplace useState entirely

5. What happens automatically if the underlying async action fails?

The app crashesReact reverts to the real state passed to useOptimistic, with no manual rollback code neededThe optimistic value becomes permanentNothing — you must write rollback logic yourself

6. What kind of actions are the best fit for useOptimistic?

Actions that fail most of the timeActions that succeed the vast majority of the time, like likes or togglesOnly actions with no async behavior at allOnly actions inside Server Components

7. What does useActionState track automatically?

Only the pending stateBoth the action’s current state/result and a pending flagOnly form field valuesRoute navigation

8. What arguments does the function passed to useActionState receive?

Only the form dataThe previous state and the submitted form dataThe DOM event onlyNothing

9. What is the main benefit of useActionState over manually wiring useState for pending/error?

It’s the only way to submit a form in ReactIt consolidates a common cluster of boilerplate state management into one hookIt removes the need for a <form> elementIt automatically validates all inputs

10. What does useFormStatus let a component read?

Any component’s state, anywhere in the appThe status of the nearest parent form, from a component rendered inside itThe browser’s online/offline statusThe current route

11. What happens if useFormStatus is called in the same component that renders the <form> itself?

It works exactly the same wayIt always returns the default, non-pending status — it can only read a parent form, not its ownIt throws an errorIt automatically finds a different form on the page

12. What problem does useFormStatus solve compared to manually passing a pending prop down?

It makes the form submit fasterIt avoids prop drilling an isPending value down to nested components like a submit buttonIt validates form fields automaticallyIt replaces the need for a <form> element

13. What does the Link component do differently from a regular <a> tag?

Nothing, they are identicalIt navigates client-side, updating the URL without a full page reloadIt only works for external linksIt requires a form to be submitted

14. Which hook reads a dynamic route parameter like :userId?

useLocationuseParamsuseNavigateuseRoute

15. Which hook lets you navigate to a new route from inside an event handler?

useParamsuseNavigateuseLocationuseRoutes

16. What does React.memo do?

Deletes unused stateSkips re-rendering a component if its props haven’t changedSpeeds up the initial page load onlyPrevents all state updates

17. Why can React.memo fail to prevent a re-render even when data hasn’t "really" changed?

React.memo is broken by designA prop that’s a newly created object/array/function on every render always looks "different" to a shallow comparisonIt only works with primitive propsIt requires useState to work

18. What is the purpose of list virtualization?

To sort a list automaticallyTo render only the currently visible items in a long list, recycling DOM nodes while scrollingTo animate list itemsTo fetch list data faster

19. What does the fallback prop on <Suspense> render?

An error messageA temporary UI shown while the wrapped content is still loadingA 404 pageThe previous render

20. What must a component created with React.lazy be rendered inside of?

An ErrorBoundary onlyA Suspense boundaryA Context ProviderA Fragment

21. Does Suspense handle errors, like a failed lazy import?

Yes, it shows an error automaticallyNo — that’s the job of an error boundary, often used alongside SuspenseOnly in development modeOnly for data fetching, not lazy components

22. Where does a Server Component run?

In the browser onlyOn the server onlyBoth, alwaysIt depends on screen size

23. What directive marks a component as a Client Component?

"use server""use client""use effect""use state"

24. Can a Client Component directly import and render a Server Component?

Yes, freelyNo — data and rendered output flow from server to client, not the reverseOnly with "use client" removedOnly in Next.js Pages Router

25. Why does the manual useEffect fetch example track a "cancelled" flag?

To stop the component from renderingTo prevent a slower, outdated request from overwriting fresher data (a race condition)It’s required syntax for fetch()To improve styling

26. What is one benefit of a library like TanStack Query over manual fetching?

It makes the API respond fasterIt handles caching, deduplication, and race conditions automaticallyIt removes the need for a backendIt only works with GraphQL

27. How can a Server Component fetch data, compared to a Client Component?

The same way, always via useEffectDirectly with async/await during rendering, with no client-side request neededServer Components cannot fetch data at allOnly through a Client Component

28. What does React Testing Library encourage testing?

Internal component state directlyBehavior — what’s rendered and how it responds to user interactionCSS class names onlyThe number of times a function is called

29. Which query is generally preferred for finding elements in a test?

getByTestIdgetByRolequerySelectorgetByClassName

30. Why use findByRole instead of getByRole for content that loads asynchronously?

They are identicalfindBy* queries wait for the element to appear, which getBy* does notfindByRole is fastergetByRole doesn’t support roles

31. What is unique about the use() hook compared to other hooks?

It can only be used in class componentsIt can be called conditionally, unlike other hooksIt never suspendsIt replaces useState entirely

32. What does useActionState provide beyond a plain async function?

Nothing extraBuilt-in pending and result/error state, without manually wiring separate useState callsAutomatic routingCSS styling

33. What does useOptimistic do?

Caches API responsesShows an expected result immediately before an async action finishes, reverting automatically on failurePrevents all errorsReplaces useReducer

34. What problem does a state management library like Redux or Zustand typically solve?

Styling componentsManaging large, frequently-updated, widely-shared state more efficiently than Context aloneRouting between pagesCompiling JSX

35. What is a key difference between server state (API data) and client UI state?

There is no differenceServer state needs caching, refetching, and staleness handling that libraries like TanStack Query specialize inServer state never changesClient state cannot use hooks

36. Should every new React project start with Redux or Zustand?

Yes, alwaysNo — many apps are fine with useState/useReducer/Context; a library is added once a real need appearsOnly Redux should ever be usedOnly if using TypeScript

37. Why avoid storing a value in state if it can be computed from existing props/state?

It’s slower to computeA derived value stored separately in state can get out of sync with the values it depends onReact doesn’t allow itIt uses more memory than any other approach

38. What three states should most components fetching async data handle explicitly?

Mounted, updated, unmountedLoading, error, and emptyRed, green, blueClient, server, shared

39. What is a common sign that a useEffect might be unnecessary?

It has a dependency arrayIt exists only to react to a state change that was caused by your own event handlerIt fetches dataIt has a cleanup function