## Introduction: Why Memoization Matters React is fast by default. You build components, manage state, and React handles the DOM updates. For most apps, you never need to think about performance. But as your application grows — bigger lists, heavier computations, deeply nested component trees — you start to notice things. A table re-sorts on every keystroke even though the data hasn't changed. A chart re-renders because its parent updated an unrelated piece of state. A child component flickers because it receives a "new" callback on every render, even though the callback does the same thing. These aren't bugs. They're the natural consequence of how React's rendering model works. And React gives you two hooks to address them: **`useMemo`** and **`useCallback`**. The problem is that most developers either ignore them entirely or sprinkle them everywhere "just in case." Both approaches miss the point. To use these hooks effectively, you need to understand **why** they exist, **what** they actually do, and **when** they make a real difference. By the end of this guide you will: - Understand how React's re-rendering model creates the need for memoization - Know exactly what `useMemo` and `useCallback` do (and don't do) - See how they work under the hood inside React's fiber architecture - Know when to use one vs the other — and when to use neither - Combine them with `React.memo` and `useRef` for real-world performance patterns - Recognize and avoid common pitfalls that waste memory or introduce bugs - Profile your app to verify memoization is actually helping Examples in this guide use **TypeScript** so you can see how these hooks are typed in practice. The concepts are the same in JavaScript; the types are there to make the API clear and to give you a reference for your own code. Let's start with the foundation. --- ## Prerequisites: How React Re-Renders Before you can understand memoization, you need to understand **why** React re-renders components and what happens when it does. ### The Render Cycle When React renders a component, it calls your component function. That function returns JSX (a description of what the UI should look like). React compares this new JSX tree with the previous one (this is called **reconciliation**) and updates only the DOM nodes that changed. Here's the key: **calling your component function is the "render."** It's not the same as updating the DOM. React may call your function, compare the output, and decide nothing in the DOM needs to change. But the function still ran. Every variable was re-created. Every object literal was re-allocated. Every inline function was re-defined. ### What Triggers a Re-Render? A component re-renders when: 1. **Its state changes** (`useState`, `useReducer`) 2. **Its parent re-renders** (even if the props haven't changed) 3. **A context it consumes changes** (`useContext`) Notice item 2: if a parent re-renders, **all of its children re-render by default**. React doesn't check whether the child's props actually changed — it just calls every child function again. ### The Referential Equality Problem This is where memoization becomes relevant. Consider: ```tsx function Parent() { const [count, setCount] = useState(0); const handleClick = () => { console.log('clicked'); }; const config = { theme: 'dark', size: 'large' }; return ( <> ); } ``` Every time `count` changes, `Parent` re-renders. When it does: - `handleClick` is a **new function**. Even though it does the same thing, `() => {}` creates a new reference every time. - `config` is a **new object**. `{ theme: 'dark', size: 'large' }` allocates a new object in memory every render. In JavaScript, two objects or functions with the same content are **not** equal by reference: ```ts const a = { theme: 'dark' }; const b = { theme: 'dark' }; console.log(a === b); // false — different references const fn1 = () => console.log('hi'); const fn2 = () => console.log('hi'); console.log(fn1 === fn2); // false — different references ``` This matters because if `ExpensiveChild` is wrapped in `React.memo` (which we'll cover next), it compares props by reference. New reference = new props = re-render. Even though nothing meaningful changed. This is the problem `useMemo` and `useCallback` solve: they let you **preserve references** between renders so that downstream optimizations can actually work. --- ## React.memo: The Gateway to Memoization Before we talk about `useMemo` and `useCallback`, we need to talk about `React.memo`, because without it, those hooks often don't do anything useful. ### What React.memo Does `React.memo` is a higher-order component that wraps a component and **skips re-rendering** it if its props haven't changed. It does a **shallow comparison** of props: for each prop, it checks `Object.is(prevProp, nextProp)`. If all props are the same by reference, React skips the render entirely. ```tsx interface UserCardProps { name: string; email: string; onSelect: (email: string) => void; } const UserCard = React.memo(function UserCard({ name, email, onSelect }: UserCardProps) { console.log(`Rendering UserCard for ${name}`); return (

onSelect(email)}>

{name}

{email}

); }); ``` Now `UserCard` will only re-render if `name`, `email`, or `onSelect` changes by reference. ### Why React.memo Alone Isn't Enough Here's the catch. If the parent passes an **inline function** or **inline object** as a prop, a new reference is created on every render. `React.memo`'s shallow comparison sees a new reference and re-renders anyway: ```tsx function UserList({ users }: { users: User[] }) { const [query, setQuery] = useState(''); return ( <> setQuery(e.target.value)} /> {users.map(user => ( console.log(email)} // ❌ New function every render /> ))} ); } ``` Every time `query` changes, `UserList` re-renders, and every `UserCard` re-renders too — even though `name` and `email` haven't changed. The `onSelect` prop is a new function reference each time, defeating `React.memo`. This is exactly where `useCallback` comes in. --- ## useCallback: Stabilizing Function References ### Definition `useCallback` returns a **memoized version of a callback function**. It gives you the **same function reference** between renders, as long as the dependencies haven't changed. ### Mental Model Think of `useCallback` as telling React: "I'm going to give you a function. Hold onto it. Only give me a new one if these specific values change." Without `useCallback`, every render creates a brand-new function — same logic, different identity. With `useCallback`, React returns the same function object from the previous render if the dependencies are unchanged. ### Signature ```ts const memoizedFn = useCallback(fn, dependencies); ``` In TypeScript, the type is inferred from the function you pass: ```ts const handleSelect = useCallback((email: string): void => { console.log('Selected:', email); }, []); // Type: (email: string) => void ``` - **`fn`** — The function you want to memoize. React stores this function and returns the same reference on subsequent renders if `dependencies` haven't changed. - **`dependencies`** — An array of values that the function closes over. When any dependency changes (compared with `Object.is`), React stores and returns the **new** function. - **Returns** — The same function reference if dependencies haven't changed, or the new function if they have. ### Basic Example: Stabilizing a Handler Let's fix the `UserList` example: ```tsx function UserList({ users }: { users: User[] }) { const [query, setQuery] = useState(''); const handleSelect = useCallback((email: string) => { console.log('Selected:', email); }, []); // ✅ No dependencies — same function every render return ( <> setQuery(e.target.value)} /> {users.map(user => ( ))} ); } ``` Now when `query` changes, `handleSelect` is the same reference. Combined with the `React.memo` on `UserCard`, none of the cards re-render. Only the input updates. ### Example: Callback That Depends on State When your callback needs to reference some value that changes, add it to the dependency array: ```tsx function TodoList({ todos }: { todos: Todo[] }) { const [filter, setFilter] = useState<'all' | 'active' | 'done'>('all'); const handleToggle = useCallback((id: string) => { // This callback uses `filter` for logging, so `filter` is a dependency console.log(`Toggling ${id} while filter is ${filter}`); toggleTodo(id); }, [filter]); // When `filter` changes, React returns a new function return ( <> {todos.map(todo => ( ))} ); } ``` When `filter` changes, `handleToggle` gets a new reference. That's correct — the function's behavior changed (it closes over a new `filter` value). If `filter` hasn't changed, `handleToggle` is the same reference. ### When useCallback Helps `useCallback` is useful when: 1. **You pass a function to a memoized child** (`React.memo`). Without a stable reference, the child re-renders every time. 2. **You pass a function as a dependency to another hook** (e.g. `useEffect`). An unstable reference causes the effect to re-run on every render. 3. **You pass a callback to a list of many items.** Stabilizing the reference lets `React.memo` skip re-renders for unchanged items. ### When useCallback Doesn't Help `useCallback` is **not** useful when: - The child component is **not** wrapped in `React.memo`. If the child re-renders regardless, stabilizing the function reference does nothing. - The function is only used **inside the same component** (e.g. an `onClick` handler on a `; } ``` ✅ **Useful useCallback (child IS memoized):** ```tsx function Parent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { console.log('clicked'); }, []); return ; } const MemoizedChild = React.memo(function Child({ onClick }: { onClick: () => void }) { return ; }); ``` --- ## useMemo: Caching Computed Values ### Definition `useMemo` caches the **return value** of a function. It calls your function and remembers the result. On subsequent renders, if the dependencies haven't changed, it returns the cached result instead of calling the function again. ### Mental Model Think of `useMemo` as telling React: "I'm going to give you a computation. Run it and remember the result. Only run it again if these specific values change." Where `useCallback` memoizes the **function itself** (its reference), `useMemo` memoizes the **result of calling a function**. ### Signature ```ts const memoizedValue = useMemo(() => computeValue(a, b), dependencies); ``` In TypeScript, the return type is inferred from your computation: ```ts const sortedUsers = useMemo((): User[] => { return [...users].sort((a, b) => a.name.localeCompare(b.name)); }, [users]); // Type: User[] ``` - **`() => computeValue`** — A "factory" function that computes and returns the value. React calls it on mount and whenever dependencies change. - **`dependencies`** — An array of values. When any value changes (`Object.is`), React re-runs the factory and stores the new result. - **Returns** — The cached result from the last execution (or a fresh result if dependencies changed). ### Basic Example: Expensive Computation ```tsx interface Product { id: string; name: string; price: number; category: string; } function ProductList({ products, query }: { products: Product[]; query: string }) { const filteredAndSorted = useMemo(() => { const q = query.trim().toLowerCase(); const filtered = products.filter(p => p.name.toLowerCase().includes(q) ); return filtered.sort((a, b) => a.price - b.price); }, [products, query]); return (

{product.name} — ${product.price}

); } ``` If `products` and `query` haven't changed, `filteredAndSorted` returns the cached array. No re-filtering. No re-sorting. The computation only runs when the inputs change. ### Example: Stable Object Identity `useMemo` isn't just for expensive computations. It's also for **preserving object identity** — making sure an object or array reference stays the same between renders so that downstream memoization works: ```tsx interface ChartConfig { colors: string[]; animate: boolean; height: number; } function Dashboard({ data, height }: { data: DataPoint[]; height: number }) { const [selectedRange, setSelectedRange] = useState<'week' | 'month'>('week'); // Without useMemo, a new config object is created every render // This would cause MemoizedChart to re-render even when nothing changed const chartConfig = useMemo((): ChartConfig => ({ colors: ['#3b82f6', '#ef4444', '#10b981'], animate: true, height, }), [height]); return ( <> ); } const MemoizedChart = React.memo(function Chart({ data, config }: { data: DataPoint[]; config: ChartConfig }) { // Expensive rendering logic... return

useMemo vs useCallback: The Complete Deep Dive