Dependency control

Learn when useMemo recomputes.

Dependency check

useMemo's dependency array says what should trigger a recompute. If any of [items, query] changes, React calls the function again.

Immutability is required: if you do items.push(newItem), React doesn't see a change (same reference). Instead, setItems(prev => [...prev, newItem]) creates a new array.

So state in React is always updated with new objects. Mutating the old object causes React to miss the change and some hooks to misbehave.

Object reference

In JavaScript, objects are compared by reference. [1,2] === [1,2] is false; two separate arrays are different objects. But const a = [1,2]; a === a is true; same object.

React uses this comparison: is a value in the dependency array the same reference as before or not? If same, cache is used; if different, recompute.

So when updating state, always create a new object. setUser({ '{ ...user, name: "Ayşe" }' }) makes a new object; React notices. user.name = "Ayşe" doesn't.

Exercise Sort with useMemo

Complete the skeleton. Write a SortedNames component. Take ({ '{ names }' }). Compute sorted with useMemo(() => [...names].sort(), [names]). Inside <ul>, render sorted.map((n, i) => <li key={ '{ i }' }>{ '{ n }' }</li>). Export it.

Show example solution

import { useMemo } from "react";

function SortedNames({ names }) {
  const sorted = useMemo(() => [...names].sort(), [names]);
  return (
    <ul>
      {sorted.map((n, i) => (
        <li key={i}>{n}</li>
      ))}
    </ul>
  );
}

export default SortedNames;

Test yourself

When does useMemo recompute?
- Every render
- In useEffect
- When a dependency changes
- Never
Show answer

When a dependency changes — Only when a dependency changes.

Mutation

Pushing to an array is ____; React doesn't notice it.

Show answer

Pushing to an array is mutasyon; React doesn't notice it.

Match the dependency check

[items, query]

deps
same ref

cache
new ref

recompute
push

mutation

Next lesson: Pitfalls

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies