`useMemo`, `useCallback`, and `React.memo` are all [React](/courses/reactjs) performance optimization tools, but they optimize **different things**. The simplest way to remember them is: ```text useMemo → memoizes a VALUE useCallback → memoizes a FUNCTION React.memo → memoizes a COMPONENT ``` They are often used together, especially when preventing unnecessary re-renders in [React](/courses/reactjs) applications. --- ## Quick Comparison | Tool | What It Memoizes | Main Purpose | | ------------- | -------------------- | ----------------------------------------------- | | `useMemo` | A calculated value | Avoid repeating expensive calculations | | `useCallback` | A [function](/javascript/functions-in-javascript) reference | Prevent creating a new [function](/javascript/functions-in-javascript) on every render | | `React.memo` | A component | Prevent unnecessary component re-renders | --- ## 1. What is `useMemo`? `useMemo` caches the **result of a calculation**. Syntax: ```jsx const value = useMemo(() => { return someCalculation(); }, [dependencies]); ``` React recalculates the value only when one of the dependencies changes. --- ## Example Without `useMemo` Suppose we have an expensive calculation: ```jsx function calculateTotal(items) { console.log("Calculating total..."); return items.reduce( (total, item) => total + item.price, 0 ); } ``` And a component: ```jsx import { useState } from "react"; export default function Cart({ items }) { const [count, setCount] = useState(0); const total = calculateTotal(items); return (

Total: ₹{total}

Count: {count}

); } ``` Whenever `count` changes: ```text count changes ↓ Cart re-renders ↓ calculateTotal(items) runs again ``` Even though `items` did not change. If `calculateTotal()` is expensive, repeatedly running it can waste processing time. --- ## Using `useMemo` We can memoize the calculated value: ```jsx import { useMemo, useState } from "react"; export default function Cart({ items }) { const [count, setCount] = useState(0); const total = useMemo(() => { console.log("Calculating total..."); return items.reduce( (total, item) => total + item.price, 0 ); }, [items]); return (

Total: ₹{total}

Count: {count}

); } ``` Now the calculation runs only when: ```text items change ``` It does not run merely because `count` changed. Conceptually: ```text Component renders ↓ Did items change? ↓ ↓ Yes No ↓ ↓ Calculate Reuse cached value ``` --- ## What does `useMemo` memoize? It memoizes a **value**. Example: ```jsx const filteredUsers = useMemo(() => { return users.filter(user => user.active); }, [users]); ``` Here: ```jsx filteredUsers ``` is the memoized value. --- ## When should you use `useMemo`? `useMemo` is useful when: * A calculation is expensive * You are filtering or transforming large datasets * A calculated object or array needs a stable reference * A memoized component depends on that value Example: ```jsx const sortedProducts = useMemo(() => { return products.sort(compareProducts); }, [products]); ``` --- ## 2. What is `useCallback`? `useCallback` memoizes a **function reference**. Syntax: ```jsx const handleClick = useCallback(() => { // function logic }, [dependencies]); ``` React returns the same function reference until one of the dependencies changes. --- ## Why can functions cause unnecessary re-renders? Consider this example: ```jsx function Parent() { const handleClick = () => { console.log("Clicked"); }; return ( ); } ``` Every time `Parent` renders, [JavaScript](/courses/javascript) creates a new function: ```jsx () => { console.log("Clicked"); } ``` Even though its code looks identical, the function reference is different. For example: ```js const a = () => {}; const b = () => {}; console.log(a === b); ``` The result is: ```js false ``` They are different function objects. --- ## Example with `React.memo` Suppose `Child` is memoized: ```jsx import React from "react"; const Child = React.memo(function Child({ onClick }) { console.log("Child rendered"); return ( ); }); ``` Now the parent: ```jsx import { useState } from "react"; function Parent() { const [count, setCount] = useState(0); const handleClick = () => { console.log("Button clicked"); }; return ( <>

{count}

); } ``` You might expect `Child` not to re-render because it uses `React.memo`. However, every time `Parent` renders: ```text Parent renders ↓ new handleClick function created ↓ Child receives a new prop reference ↓ React.memo sees prop changed ↓ Child re-renders ``` --- ## Fixing it with `useCallback` ```jsx import { useCallback, useState } from "react"; function Parent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { console.log("Button clicked"); }, []); return ( <>

{count}

); } ``` Now React can reuse the same function reference. Conceptually: ```text Parent renders ↓ useCallback checks dependencies ↓ Dependencies unchanged ↓ same function reference returned ↓ Child props remain the same ↓ React.memo can skip re-render ``` --- ## What does `useCallback` memoize? It memoizes the **function itself**. Example: ```jsx const handleDelete = useCallback((id) => { deleteUser(id); }, []); ``` The key point is that `useCallback` does not cache the result of the function. It caches its reference. --- ## `useMemo` vs `useCallback` These two [hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) are closely related. `useMemo`: ```jsx const value = useMemo(() => { return calculateSomething(); }, []); ``` returns a memoized **value**. `useCallback`: ```jsx const callback = useCallback(() => { doSomething(); }, []); ``` returns a memoized **function**. A useful mental model is: ```text useMemo → cache what the function RETURNS useCallback → cache the FUNCTION itself ``` --- ## 3. What is `React.memo`? `React.memo` memoizes a **component**. It tells React: > If this component receives the same props as before, you can skip re-rendering it. Example: ```jsx import React from "react"; const UserCard = React.memo(function UserCard({ name }) { console.log("UserCard rendered"); return

{name}

; }); ``` Now consider: ```jsx import { useState } from "react"; function App() { const [count, setCount] = useState(0); return ( <> ); } ``` When `count` changes, `App` re-renders. But: ```jsx ``` still receives the same prop. Because `UserCard` is wrapped with `React.memo`, React can skip its re-render. Conceptually: ```text App re-renders ↓ Check UserCard props ↓ Did props change? ↓ ↓ Yes No ↓ ↓ Render Skip render ``` --- ## Without `React.memo` ```jsx function UserCard({ name }) { console.log("UserCard rendered"); return

{name}

; } ``` When the parent renders, the child normally renders as well. --- ## With `React.memo` ```jsx const UserCard = React.memo(function UserCard({ name }) { console.log("UserCard rendered"); return

{name}

; }); ``` React can now skip the child render when its props are unchanged. --- ## Important: `React.memo` uses prop comparison `React.memo` compares previous props with new props. For primitive values, this is straightforward: ```jsx ``` If `name` remains `"Asif"`, the prop is considered unchanged. But objects, arrays, and functions can create problems because they are compared by reference. For example: ```jsx ``` Every parent render creates a new object. Therefore: ```js { name: "Asif" } === { name: "Asif" } ``` is: ```js false ``` So `React.memo` may not prevent the re-render. --- ## Using `useMemo` with `React.memo` We can stabilize the object reference: ```jsx const user = useMemo(() => { return { name: "Asif" }; }, []); ``` Then: ```jsx ``` Now the same object reference can be passed between renders. --- ## Using `useCallback` with `React.memo` Similarly, functions can be stabilized: ```jsx const handleEdit = useCallback(() => { console.log("Edit user"); }, []); ``` Then: ```jsx ``` Now both props can maintain stable references. --- ## Complete Example Using All Three Consider this example: ```jsx import { memo, useCallback, useMemo, useState } from "react"; const ProductList = memo(function ProductList({ products, onSelect }) { console.log("ProductList rendered"); return (

{products.map(product => ( ))}

); }); export default function App() { const [count, setCount] = useState(0); const products = [ { id: 1, name: "Laptop", active: true }, { id: 2, name: "Phone", active: false }, { id: 3, name: "Keyboard", active: true } ]; const activeProducts = useMemo(() => { return products.filter( product => product.active ); }, [products]); const handleSelect = useCallback((id) => { console.log("Selected product:", id); }, []); return ( <> ); } ``` Here: ```text useMemo ↓ memoizes activeProducts useCallback ↓ memoizes handleSelect React.memo ↓ prevents ProductList from re-rendering when its props have not changed ``` They solve different parts of the same optimization problem. --- ## Easy Real-World Analogy Imagine a restaurant. ### `useMemo` The chef prepares an expensive dish and saves the result instead of making it again unnecessarily. ```text useMemo = remember the result ``` ### `useCallback` The restaurant keeps the same waiter assigned instead of assigning a new waiter every time. ```text useCallback = remember the function ``` ### `React.memo` A customer receives a new meal only if their order changed. ```text React.memo = avoid re-rendering the component ``` --- ## Common Interview Trap A common interview question is: > Does `useCallback` prevent a component from re-rendering? Not by itself. `useCallback` only keeps a function reference stable. For example: ```jsx const handleClick = useCallback(() => { console.log("Clicked"); }, []); ``` The parent component can still re-render. `useCallback` becomes particularly useful when the function is passed to a memoized child: ```jsx const Child = React.memo(...); ``` because a stable function reference allows `React.memo` to determine that the prop has not changed. --- ## Another Important Interview Point `React.memo` does not mean: ```text This component will never re-render. ``` A memoized component can still re-render when: * Its props change * Its own state changes * A Context value it consumes changes For example: ```jsx const Counter = React.memo(function Counter() { const [count, setCount] = useState(0); return ( ); }); ``` When its own `count` state changes, the component still re-renders. `React.memo` mainly helps avoid re-renders caused by a parent rendering while the child's props remain unchanged. --- ## Should you use `useMemo`, `useCallback`, and `React.memo` everywhere? No. Memoization itself has a cost. React needs to: ```text Store the memoized value ↓ Track dependencies ↓ Compare dependencies ↓ Decide whether to reuse or recalculate ``` For very small calculations or simple components, memoization may provide little or no benefit. For example, this usually does not need `useMemo`: ```jsx const fullName = `${firstName} ${lastName}`; ``` Writing this: ```jsx const fullName = useMemo(() => { return `${firstName} ${lastName}`; }, [firstName, lastName]); ``` may make the code more complicated without providing a meaningful performance improvement. --- ## When should you use each one? Use `useMemo` when you want to avoid recalculating an expensive value: ```jsx const filteredProducts = useMemo(() => { return products.filter(product => product.name.includes(search) ); }, [products, search]); ``` Use `useCallback` when you need a stable function reference, especially when passing callbacks to memoized children: ```jsx const handleSelect = useCallback((id) => { setSelectedId(id); }, []); ``` Use `React.memo` when a child component renders often with the same props and its rendering work is significant: ```jsx const ProductCard = React.memo(function ProductCard({ product }) { return

{product.name}

; }); ``` --- ## Key Difference The most important difference is: ```text useMemo ↓ Memoizes a computed VALUE useCallback ↓ Memoizes a FUNCTION reference React.memo ↓ Memoizes a COMPONENT rendering based on props ``` --- ## Interview-Ready Answer `useMemo`, `useCallback`, and `React.memo` are all React performance optimization tools, but they work at different levels. `useMemo` memoizes the result of a calculation and is useful when an expensive value should only be recalculated when its dependencies change. `useCallback` memoizes a function reference. It is useful when passing callbacks to child components, especially memoized children, because defining a function during every render creates a new reference. `React.memo` memoizes a component based on its props. If the parent re-renders but the memoized component receives the same props, React can skip rendering that component. These tools are often used together. For example, `React.memo` may prevent a child re-render, while `useMemo` keeps object or array props stable and `useCallback` keeps function props stable. However, they should not be used everywhere because memoization also has a cost. They are most useful when there is an actual performance problem, expensive computation, or unnecessary rendering that is worth optimizing. ### One-line interview answer > `useMemo` memoizes a calculated value, `useCallback` memoizes a function reference, and `React.memo` memoizes a component by skipping renders when its props have not changed.