useMemo hook in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the useMemo hook in React?

The useMemo hook helps to remember (or memoize) a value so React does not have to recalculate it on every render, improving performance.

beginner

How do you use useMemo to optimize a slow calculation?

Wrap the slow calculation inside useMemo(() => slowCalculation(), [dependencies]). React will only recalculate when dependencies change.

intermediate

What happens if you pass an empty dependency array [] to useMemo?

The memoized value is calculated once on the first render and never recalculated again, unless the component unmounts and remounts.

intermediate

Can useMemo replace useState or useEffect?

No. useMemo only memoizes values. useState manages state, and useEffect runs side effects. They serve different purposes.

intermediate

Why should you not overuse useMemo?

Because memoization itself has a cost. Use it only when a calculation is expensive and the saved work improves performance noticeably.

What does useMemo return?

A A side effect callback

B A function to update state

C A memoized value

D A component

useMemo returns the memoized value from the function you provide.

When does useMemo recalculate the memoized value?

A Every render

B Only when dependencies change

C Only on first render

D Never

It recalculates only when one or more dependencies in the array change.

Which of these is a good use case for useMemo?

A Memoizing a heavy calculation based on props

B Running an API call

C Replacing <code>useState</code> for state management

D Memoizing a simple string constant

useMemo is best for expensive calculations that depend on props or state.

What happens if you omit the dependency array in useMemo?

A Memoization is disabled; recalculates every render

B Memoizes forever

C Causes an error

D Memoizes only once

Without dependencies, React recalculates the value every render, so memoization is ineffective.

Which hook is best to run side effects, not memoize values?

A useCallback

B useMemo

C useState

D useEffect

useEffect is designed to run side effects like data fetching or subscriptions.

Explain how useMemo helps improve React app performance.

Think about when React re-renders and how <code>useMemo</code> saves work.

Describe the difference between useMemo and useEffect.

One remembers values, the other runs code after render.