← All topics

React Middle interview questions and answers

75 questions for a React (Middle) interview - with correct answers, explanations and links to the docs.

Take this quiz
  1. 1.When does React preserve a component's state between renders?
  2. 2.How do you reset the state of <EditForm /> when switching to another user?
  3. 3.What does React.memo(Component) do?
  4. 4.Why doesn't memo help <List items={data} onSelect={() => select(id)} style={{ gap: 8 }} />?
  5. 5.What is useMemo for?
  6. 6.Why shouldn't you declare a component inside another component?
  7. 7.How are useCallback(fn, deps) and useMemo related?
  8. 8.When is useCallback actually useful?
  9. 9.When is useReducer preferable to useState?
  10. 10.How does useLayoutEffect differ from useEffect?
  11. 11.Why does the counter stop at 1?
  12. 12.Why does this effect run after every render?
  13. 13.How do you avoid a race when loading data in useEffect if userId changes quickly?
  14. 14.What's the right way to get fullName from firstName and lastName stored in state?
  15. 15.Which errors does an error boundary NOT catch?
  16. 16.What changed about passing ref to function components in React 19?
  17. 17.How do events behave inside a portal createPortal(child, document.body)?
  18. 18.What is a higher-order component (HOC)?
  19. 19.What's the idea of the render props pattern?
  20. 20.What is the compound components pattern?
  21. 21.Why do all context consumers re-render on every provider render?
  22. 22.Why split context into StateContext and DispatchContext?
  23. 23.What does useTransition do?
  24. 24.When should you use useDeferredValue?
  25. 25.What is automatic batching in React 18+?
  26. 26.What is useId for?
  27. 27.What is useSyncExternalStore for?
  28. 28.How does React 19's use(promise) differ from regular hooks?
  29. 29.What does useActionState give you in React 19?
  30. 30.What is useOptimistic for?
  31. 31.What does the React Compiler do?
  32. 32.Why is React Hook Form usually faster than forms with controlled fields?
  33. 33.How do nested <Suspense> boundaries behave?
  34. 34.Where is code splitting with lazy usually most beneficial?
  35. 35.What's wrong with this case reducer in createSlice?
  36. 36.Which actions does createAsyncThunk('users/fetch', ...) generate?
  37. 37.How does RTK Query know which data to refetch after a mutation?
  38. 38.What is RTK Query?
  39. 39.What does createEntityAdapter give you?
  40. 40.Why does this selector cause a re-render on any action in the store?
  41. 41.When is Redux (or Zustand) more appropriate than React Context?
  42. 42.How does staleTime differ from gcTime in TanStack Query?
  43. 43.Why does TanStack Query, with default settings, refetch data when you return to the tab?
  44. 44.How do you update a list after successfully creating an item via useMutation?
  45. 45.Which queries does invalidateQueries({ queryKey: ['todos'] }) invalidate?
  46. 46.How do you implement an optimistic update via the cache in TanStack Query?
  47. 47.How do you run a query only after user.id is received from another query?
  48. 48.With pagination, how do you show the old page while the new one loads, instead of a skeleton?
  49. 49.What does TanStack Query do on a query error by default on the client?
  50. 50.Why does useQuery have a select option?
  51. 51.What is wrong with this effect?
  52. 52.Where should code that runs because the user clicked "Buy" go?
  53. 53.Why does this chat effect reconnect when the theme changes?
  54. 54.Why does this effect re-run on every render even though options looks the same?
  55. 55.How should a component subscribe to a browser event like resize?
  56. 56.What makes a good custom hook?
  57. 57.How does forwardRef relate to React 19?
  58. 58.What does <Suspense fallback={<Spinner />}> show, and when?
  59. 59.Which state variables are needed here?
  60. 60.How do you avoid many boolean flags like isSending, isSent, isError at once?
  61. 61.Why is this component impure?
  62. 62.What happens when a component's state changes but the output JSX is identical?
  63. 63.What does setCount(5) do if count is already 5?
  64. 64.How do you measure an element's size right after it renders, before the browser paints?
  65. 65.Why might a list of controlled inputs lose focus on each keystroke?
  66. 66.What is the <Profiler> component for?
  67. 67.Why is it fine to call setState inside useEffect that depends on userId to fetch data?
  68. 68.How does useFormStatus help in a React 19 form?
  69. 69.What does <form action={saveAction}> do in React 19?
  70. 70.What does Children.map or cloneElement usage usually signal in modern React?
  71. 71.What happens if a parent passes onChange={() => {}} inline to a memoized child?
  72. 72.When does a useRef value change cause a re-render?
  73. 73.Why shouldn't you read or write ref.current during render?
  74. 74.What is the difference between a controlled and uncontrolled component in a design system?
  75. 75.Why can useEffect with an async callback be a problem?