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 is **memoization of a computed value**.
It **remembers the result of running a function** between renders
and **recomputes it only when** the **dependencies change**.

---

### Syntax

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

- The first argument is a function that **returns a result** (a computation, filtering, sorting, etc.).
- The second is a dependency array `[a, b]`.

React remembers the result, and on the next render:

- if the dependencies **have not changed** -> it returns the **old value**;
- if the dependencies **have changed** -> it recomputes it.

---

## Example without `useMemo`

```javascript
function App({ list }) {
  const sorted = list.sort(); // every render - a sort
  return <List items={sorted} />;
}
```

Every render will call `list.sort()`,
and even if `list` has not changed, a **new array** is created.

If `<List />` is memoized with `React.memo`,
it will still re-render,
because `sorted` is a **new reference** (a new object in memory).

---

## With `useMemo`

```javascript
function App({ list }) {
  const sorted = useMemo(() => [...list].sort(), [list]);
  return <List items={sorted} />;
}
```

Now:

- While `list` has not changed, React **returns the old reference to** `sorted`;
- `List` (if it is `React.memo`) **will not re-render**;
- This prevents **unnecessary re-renders and unnecessary computations**.

---

## Example with a computation

```javascript
function ExpensiveComponent({ value }) {
  const heavyResult = useMemo(() => {
    console.log('expensive calculation');
    return fibonacci(value); // say, an expensive function
  }, [value]);

return <div>Result: {heavyResult}</div>;
}
```

**Without** `useMemo`**:**

- On every render, `fibonacci(value)` is called, even if `value` has not changed.

**With** `useMemo`**:**

- The computation happens only **once**,
while `value` stays the same -> React returns the **cached result**.

---

## How `useMemo` helps avoid unnecessary re-renders

### Scenario: a "memoized child"

```javascript
const Child = React.memo(({ data }) => {
  console.log('Child render');
  return <div>{data.length}</div>;
});

function Parent({ items }) {
  const processed = useMemo(() => items.filter(i => i.active), [items]);
  return <Child data={processed} />;
}
```

If `items` have not changed,
-> `processed` stays **the same reference**
-> `React.memo` understands that the `data` prop has not changed
-> `Child` **does not re-render**.

Without `useMemo`, `processed` would be created anew,
and `Child` would **re-render every time**,
even with unchanged data.

---

## What `useMemo` caches

| Value type | Cached? | Example |
|---|---|---|
| Primitives | Yes | `number`, `string`, `boolean` |
| Objects and arrays | Yes | `const arr = useMemo(() => [...list], [list])` |
| A function's result | Yes | `useMemo(() => compute(), [deps])` |
| The function itself | No -> for that, `useCallback()` |  |

> `useCallback(fn, deps)` is simply shorthand for `useMemo(() => fn, deps)`.

---

## When you should use `useMemo`

**Use it if:**

1. There is an **expensive computation** (filtering, sorting, counting);
2. You need to **keep a reference** to an object/array between renders (for `React.memo`);
3. The component **re-renders often**, while the dependent data **changes rarely**.

---

## When you **do not need** to use it

**Do not apply it everywhere:**

- If the computation is **cheap** (a few operations), `useMemo` will only slow things down (React still compares the deps, creates a cache);
- If the component **re-renders fully anyway** (and `useMemo` does not participate in other components' props);
- If the data is already stable by reference (for example, you are not creating a new object every time).

---

## Summary: useMemo vs useCallback

| Hook | What it does | Returns | Typical purpose |
|---|---|---|---|
| `useMemo(fn, deps)` | Caches **the result of a computation** | A value | Keep a result between renders |
| `useCallback(fn, deps)` | Caches **a function** | A function | Keep a reference to a handler |

---

## Short and to the point

| What it does | How it helps |
|---|---|
| Caches the result of computations | Avoids repeating heavy operations |
| Keeps a reference to an object/array | Helps `React.memo` see that a prop has not changed |
| Only works when the dependencies are unchanged | React returns the old value |
| Reduces the number of re-renders | Child components do not repaint |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.