What is the difference between useMemo and useReducer?

The difference is in what they’re letting you cache.

1
useMemo: caches the result of calling your function it caches the result of calling the input function so that it doesn’t change unless the product has changed. This lets you pass the requirements object down without unnecessarily re-rendering ShippingForm. When necessary, React will call the function you’ve passed during rendering to calculate the result.
2
useCallback: caches the function itself. Unlike useMemo, it does not call the function you provide. Instead, it caches the function you provided so that handleSubmit itself doesn’t change unless the productId or referrer has changed. This lets you pass the handleSubmit function down without unnecessarily re-rendering ShippingForm. Your code won’t run until the user submits the form.

Difficulty: 5/10

Topics: memoization, state management, performance

0-2 years experience

1
You need to filter a list of items based on a search input. How would you use useMemo to avoid re‑filtering on every keystroke?
2
For a simple counter with increment and decrement buttons, would you choose useReducer or useState, and why?
3
What happens if you omit the dependency array when calling useMemo in a component?

2-5 years experience

1
A new form component now updates three related fields and you notice it re‑renders on every change. How would you refactor it with useReducer, and where might you still apply useMemo?
2
During a code review a teammate replaced a useReducer with useMemo to cache derived state, and the UI broke. Explain why that substitution is incorrect.
3
You added a heavy calculation inside a component that also uses useReducer for state, and performance regressed. How would you diagnose which hook is the culprit and fix it?

5-8 years experience

1
In a dashboard with dozens of widgets, each has complex state and performs expensive data transformations. How do you decide which parts belong in useReducer versus useMemo to keep renders minimal?
2
You need to share reducer logic across several unrelated components while also memoizing derived data from a global store. Describe an architecture that combines useReducer, useMemo, and possibly useContext.
3
When scaling to render thousands of rows, a component using useMemo for row calculations still feels sluggish. What edge cases of useMemo could cause this, and how would you redesign the solution?

8+ years experience

1
Our legacy codebase uses class components with shouldComponentUpdate and manual memoization. How would you migrate those patterns to functional components using useMemo and useReducer, and what pitfalls should you watch for at scale?
2
We are standardizing state handling across multiple micro‑frontends. Discuss the trade‑offs of using useReducer in each micro‑frontend versus a centralized state library, and where useMemo fits into the performance strategy.
3
If you were to enforce a policy that new components must use useReducer or useMemo appropriately, how would you set up linting, code‑review guidelines, and runtime monitoring to ensure compliance?

❓Can you give an example where over‑using useMemo actually degrades performance?
❓What would happen if you put a non‑stable object in a useMemo dependency array?
❓How does useReducer compare to a full state‑management library in a large app?