Demon Tech Roadmap

React

React useMemo Hook

The useMemo Hook caches expensive calculations to improve performance.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

Sometimes a component runs a slow, heavy math calculation every time it renders. The `useMemo` Hook fixes this by remembering the answer from the last render. It only recalculates the math if the input data actually changes.

Example

1/* this caches a calculation */
2import { useMemo } from "react";
3
4function MathApp({ number }) {
5  const doubled = useMemo(() => {
6    return slowMathCalculation(number);
7  }, [number]); // Only re-runs if 'number' changes
8}

Key Points

"Memoization" means caching a result.
It stops slow functions from running needlessly.
The first argument is the calculation function.
The second argument is the dependency array.

Up Next

Continue your journey with the next topic.

Go to React useCallback ❯