Suggest an edit

Improve this article

Refine the answer for “What does useMemo() do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What `useMemo()` does

The `useMemo()` hook **memoizes (caches)** the result of a function's computation
and **reuses it** if the dependencies have not changed.

> In simpler terms:
> `useMemo` exists so you **do not recompute something heavy** on every render,
> when the input data has not changed.

---

## Syntax

```javascript
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```

- The first argument is a function that returns the computed value.
- The second argument is the dependency array.
- React remembers the result of this function and **recomputes it only**
when at least one of the dependencies `[a, b]` changes.

---

## A simple example

```javascript
import { useMemo, useState } from "react";

function Example() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

const expensiveCalculation = (num) => {
    console.log("Running an expensive calculation...");
    let result = 0;
    for (let i = 0; i < 1e7; i++) {
      result += num * 2;
    }
    return result;
  };

// useMemo memoizes the result
  const result = useMemo(() => expensiveCalculation(count), [count]);

return (
    <div>
      <p>Result: {result}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}
```

What happens:

- The "expensive calculation" (`expensiveCalculation`) runs **only** when `count` changes.
- Changing `text` **does not recompute** `result`.
- This saves performance on frequent renders.

---

## Example without useMemo (bad)

If you remove `useMemo`:

```javascript
const result = expensiveCalculation(count);
```

Every render, even when only `text` changes, will call `expensiveCalculation()` again,
even if `count` has not changed.

---

## When `useMemo` is useful

| Situation | Example |
| --- | --- |
| Heavy computations | sorting, filtering, large loops |
| Computing derived data | for example, filtering a user list by a search term |
| Optimizing renders of child components | to avoid passing a new object on every render |

---

### Example: preventing unnecessary renders

```javascript
function Parent({ users }) {
  const [filter, setFilter] = useState("");

// Without useMemo: a new array is created on every render
  // With useMemo: it is created only when users or filter changes
  const filtered = useMemo(
    () => users.filter((u) => u.name.includes(filter)),
    [users, filter]
  );

return <UserList users={filtered} />;
}
```

If `UserList` is wrapped in `React.memo`,
it **will not re-render** until `filtered` changes.

---

## Important

| Trait | Explanation |
| --- | --- |
| `useMemo` caches the **result of a function**, not the function itself | For functions, use `useCallback` |
| Use it only for **genuinely expensive** computations | Do not "wrap everything" |
| Works **only with unchanged dependencies** | If at least one changes, it recomputes |

---

## Difference between `useMemo` and `useCallback`

| Hook | What it caches | Returns |
| --- | --- | --- |
| `useMemo` | the function's result | a value |
| `useCallback` | the function itself | a function |

Example:

```javascript
const value = useMemo(() => compute(), [deps]);
const fn = useCallback(() => doSomething(), [deps]);
```

---

## Summary

| Question | Answer |
| --- | --- |
| What does `useMemo()` do | Caches a function's result so it is not recomputed on every render |
| When it recomputes | When at least one dependency changes |
| What it returns | The stored (memoized) value |
| Why it is needed | To optimize heavy computations and prevent unnecessary re-renders |
| Not to be confused with | `useCallback` (it caches the function itself) |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts588 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.