This guide covers the real difference between useMemo and useCallback, when each hook actually helps, and what changed in 2026 with the React Compiler. Key takeaways: - `useMemo` caches a computed **value**. `useCallback` caches a **function reference**. That's the entire difference. - The mental model that explains everything: JavaScript compares objects and functions by reference, not by value. Two identical functions are not equal. Memoization preserves the same reference across renders. - `useCallback` without `React.memo` on the child component does nothing. Zero performance benefit. This is the most common misuse. - The React Compiler (stable Oct 2025) handles memoization automatically. If you're on React 19 with the compiler enabled, you need these hooks far less often. ([source](https://www.joshwcomeau.com/react/usememo-and-usecallback/)) - Profile first. Memoize second. Adding these hooks to components that don't need them adds overhead without benefit.

## The One Mental Model That Explains Both Hooks **Both hooks exist because JavaScript compares objects and functions by reference, not value.** That's the entire reason. Everything else follows from this. **JavaScript compares objects, arrays, and functions by reference — not by value.** ```js // Primitive values — compared by value "hello" === "hello" // true 42 === 42 // true // Objects and arrays — compared by reference {} === {} // false — different objects in memory [] === [] // false — different arrays in memory // Functions — compared by reference const fn1 = () => 5; const fn2 = () => 5; fn1 === fn2 // false — different function instances ``` Inside a React component, every render creates new instances of any object, array, or function declared inside it. The values are identical. The references are not. This matters because React's optimization mechanisms — `React.memo`, `useEffect` dependency arrays, and other memoized hooks — compare props and dependencies by reference. When a parent re-renders and creates a new function instance, the child sees a "changed" prop even though the function does exactly the same thing. It re-renders unnecessarily. useMemo and useCallback both solve the same underlying problem: they thread a reference across multiple renders, so React's comparison mechanisms see the same value or function rather than a new one each time. ([source](https://www.joshwcomeau.com/react/usememo-and-usecallback/))

## useMemo: Caching a Computed Value **useMemo executes a function and caches its return value.** The cached value is reused on subsequent renders unless a dependency changes. ```tsx const memoizedValue = useMemo(() => expensiveComputation(a, b), [a, b]); ``` The function runs once. React stores the result. On every subsequent render, React checks the dependencies. If `a` and `b` haven't changed, React returns the cached result instead of running the function again. **The right use case — genuinely expensive computation:** ```tsx function ProductList({ products, filterText, sortBy }: Props) { // Without useMemo: runs on every render, even unrelated state changes const processedProducts = useMemo( () => products .filter((p) => p.name.toLowerCase().includes(filterText.toLowerCase())) .sort((a, b) => { if (sortBy === "price") return a.price - b.price; if (sortBy === "name") return a.name.localeCompare(b.name); return 0; }), [products, filterText, sortBy] ); return (

))}

); } ``` If `products` contains thousands of items and the parent re-renders frequently (a common pattern in dashboards), this memoization prevents the filter-and-sort from running on every unrelated state change. **The wrong use case — cheap computation:** ```tsx // Don't do this — the memoization overhead costs more than it saves const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]); // Just do this const fullName = `${firstName} ${lastName}`; ``` String concatenation, simple arithmetic, small array operations — these are faster without memoization. The comparison React does to check dependencies has its own cost. Don't pay that cost for computations that are cheaper than the comparison itself.

## useCallback: Caching a Function Reference **useCallback caches the function itself — not its return value.** The function definition is preserved across renders unless a dependency changes. ```tsx const memoizedFn = useCallback(() => doSomething(a, b), [a, b]); ``` `useMemo(() => fn, deps)` and `useCallback(fn, deps)` are mathematically equivalent. `useCallback` is just the more readable API for the common case. Same hook, different shape. ([source](https://janhesters.com/blog/usecallback-vs-usememo)) **The right use case — stable function passed to a memoized child:** ```tsx // Parent component re-renders frequently function SearchPage() { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); // Without useCallback: new function reference on every render // With useCallback: same reference unless dependency changes const handleResultClick = useCallback( (resultId: string) => { trackAnalytics("result_click", { query, resultId }); navigate(`/result/${resultId}`); }, [query] // Only recreate when query changes ); return (

{/* ResultsList is wrapped in React.memo */}

); } // The memoized child — only re-renders if props change by reference const ResultsList = React.memo(function ResultsList({ results, onResultClick, }: { results: Result[]; onResultClick: (id: string) => void; }) { return (

onResultClick(r.id)}> {r.title}

); }); ``` **The right use case — function in a useEffect dependency array:** ```tsx // Without useCallback: fetchUser is new on every render → infinite loop function UserProfile({ userId }: { userId: string }) { const fetchUser = useCallback(async () => { const data = await api.getUser(userId); setUser(data); }, [userId]); // Only recreate when userId changes useEffect(() => { fetchUser(); }, [fetchUser]); // Stable reference — effect only runs when userId changes } ```

## The Most Common Mistake: useCallback Without React.memo **`useCallback` without `React.memo` on the child component does nothing.** Zero performance benefit. This is the most widely misunderstood fact about these hooks. ```tsx // This does nothing useful function Parent() { const handleClick = useCallback(() => { doSomething(); }, []); // Child is NOT wrapped in React.memo // It re-renders whenever Parent re-renders regardless of handleClick return ; } ``` Here's why: `useCallback` gives you a stable function reference. But a stable reference only prevents a re-render if the receiving component checks whether its props changed before re-rendering. Regular React components don't check — they always re-render when their parent re-renders. Only components wrapped in `React.memo` perform that check. The complete pattern that actually works: ```tsx // Step 1: Memoize the function in the parent const handleClick = useCallback(() => doSomething(), []); // Step 2: Wrap the child in React.memo so it uses the stable reference const Child = React.memo(function Child({ onClick }: { onClick: () => void }) { return ; }); ``` Both pieces are required. `useCallback` alone is the sound of one hand clapping.

## The Side-by-Side Reference | | `useMemo` | `useCallback` | |---|---|---| | **What it caches** | The return value of a function | The function itself | | **When to use** | Expensive computations | Functions passed to memoized children or used in useEffect deps | | **Common mistake** | Memoizing cheap computations | Using without React.memo on the child | | **Equivalent to** | — | `useMemo(() => fn, deps)` | | **Has cost?** | Yes — dependency comparison on every render | Yes — same overhead | | **React Compiler replaces?** | Yes, for most cases | Yes, for most cases |

## The React Compiler Changes Everything in 2026 For years, one of the steepest learning curves for React developers was mastering manual performance optimization. Teams spent countless hours debating the proper usage of useMemo, useCallback, and React.memo to prevent unnecessary re-renders. In 2026, that era is officially behind us. The React Compiler reached stable in October 2025. It analyzes your component code at build time and automatically inserts the equivalent of `useMemo` and `useCallback` wherever memoization would help. You write plain JavaScript functions. The compiler handles the optimization. In October 2025, React officially released the 1.0 version of the React Compiler, a tool which optimizes React applications by adding memoization features like useMemo and useCallback automatically. ([source](https://www.joshwcomeau.com/react/usememo-and-usecallback/)) **What this means in practice:** If you're on React 19 with `@babel/plugin-react-compiler` or Next.js 15 (which ships with the compiler), you need `useMemo` and `useCallback` significantly less often. The compiler handles the common cases — functions as props to child components, simple computed values — automatically. You still need them manually in three situations: **Third-party libraries that depend on function identity.** Chart libraries, canvas systems, WebSocket handlers — anything that registers a callback by reference outside React's render cycle. If a non-React system uses your function as a key, the compiler's memoization schedule may differ from what that system expects. Keep the explicit useCallback with a comment explaining why. ([source](https://blog.logrocket.com/react-compiler-memoization-what-actually-broke/)) **Genuinely expensive computations across many components.** Memoization is not shared across multiple components. If an expensive calculation runs in many different components with the same inputs, it will still run repeatedly. The compiler optimizes within a component, not across them. Hoist expensive shared computations or cache them at a higher level yourself. ([source](https://medium.com/@sabharwalsaurabh7/the-react-compiler-is-here-now-stop-thinking-about-memoization-32528a673e06)) **Cases the compiler opts out of.** The compiler skips any component that violates the Rules of React — impure functions, mutations during render, broken dependency patterns. The ESLint rule from `eslint-plugin-react-hooks` v7+ tells you which components were skipped and why. One thing worth knowing before you migrate: the compiler doesn't delete your existing hooks — it works around them. Your useMemo and the compiler's optimization coexist fine. The app won't break if you leave them in. But you get the most benefit when you let the compiler make the decision. ([source](https://blog.logrocket.com/react-compiler-memoization-what-actually-broke/)) Enable the compiler in Next.js 15 with one line in your config: ```js // next.config.js const nextConfig = { experimental: { reactCompiler: true, }, }; ``` For Vite, add `babel-plugin-react-compiler` to your Babel plugins. The official React docs have setup instructions for other bundlers.

## When to Still Use Them Manually Even with the React Compiler, manual memoization is still the right call in specific situations. Use `useMemo` when you have a genuinely expensive computation — filtering or sorting thousands of items, complex data transformations, or deriving heavy state from multiple inputs — and you've confirmed it's a bottleneck with the React DevTools Profiler. The compiler doesn't know which operations are expensive. You do. Use `useCallback` when the child receiving the function is explicitly wrapped in `React.memo`, or when a function is a dependency of `useEffect` and you need to control precisely when the effect re-runs. Also wrap functions in `useCallback` when writing a custom hook that returns a function — that way the consumers of your hook don't need to memoize it themselves. Use neither when the computation is cheap, when the child isn't wrapped in `React.memo`, or when you haven't profiled and confirmed there's an actual problem. Memoization added speculatively almost never helps and sometimes makes things slower.

## Over-Memoization: The Hidden Cost **Adding these hooks to components that don't need them makes your app slower, not faster.** Every `useMemo` and `useCallback` adds overhead. On every render, React must: 1. Read the dependency array 2. Compare each dependency to the previous value 3. Decide whether to return the cached value or recompute For cheap computations, this overhead exceeds the cost of just running the computation. You make the component slower, not faster. In my personal opinion, it would be a waste of time to wrap every single object, array, or function in these hooks. The benefits are negligible in most cases. React is highly optimized, and re-renders often aren't as slow or expensive as we often think they are. The best way to use these hooks is in response to a problem — not speculatively. ([source](https://www.joshwcomeau.com/react/usememo-and-usecallback/)) As Adeel Imran — React contractor and compiler migration specialist — puts it: "useMemo and useCallback are now escape hatches for precise control, not default tools. Use them when you need a specific memoization guarantee — not as performance ceiling glass." ([source](https://adeelhere.com/blog/2026-03-24-react-compiler-migration-guide)) The workflow that prevents over-memoization: 1. **Build the feature without memoization.** Get it working first. 2. **Profile with React DevTools Profiler.** Identify components with slow renders or excessive re-renders. 3. **Add memoization to the specific bottleneck.** Measure before and after. 4. **Stop when the problem is solved.** Don't memoize everything — just what the profiler shows.

## Two More Mistakes Worth Knowing **Stale closures from missing dependencies.** If a value used inside `useMemo` or `useCallback` isn't in the dependency array, the memoized function captures a stale version of it — silently returning wrong results. The ESLint rule `react-hooks/exhaustive-deps` catches this automatically. Enable it in every React project. ```tsx // Bug — count is stale, always logs 0 const logCount = useCallback(() => { console.log(count); }, []); // count is missing // Fixed const logCount = useCallback(() => { console.log(count); }, [count]); ``` **Inline objects in dependency arrays.** An object created inside render is a new reference on every render. Putting one in a dependency array means the memoized value recomputes every time — defeating the point. ```tsx // Wrong — new object reference every render, no memoization happens const filtered = useMemo( () => filter(items, options), [items, { category, sort }] ); // Right — primitive values are stable const filtered = useMemo( () => filter(items, { category, sort }), [items, category, sort] ); ```

## Wrap Up Most React developers reach for `useMemo` and `useCallback` too early and too often. The default in 2026 should be to write plain functions, enable the React Compiler, and only add manual memoization when the profiler shows a real problem. When you do need them: `useMemo` for expensive computations, `useCallback` for functions passed to memoized children or used in effect dependencies. Never as a safety blanket. If you're building a React product and want your project management, deployment tracking, and analytics in one workspace, check out [AdeptDev](https://adeptdev.io). Free for 7 days.

## What is the difference between useMemo and useCallback in React? `useMemo` executes a function and caches its return value — it's for values. `useCallback` caches the function itself without calling it — it's for functions. Both exist for the same reason: JavaScript compares objects and functions by reference, not value, so two identical functions are not equal. Memoizing them preserves the same reference across renders so React's optimization mechanisms (React.memo, useEffect dependency arrays) don't see false changes. `useCallback(fn, deps)` is equivalent to `useMemo(() => fn, deps)`. ## When should I use useMemo vs useCallback? Use `useMemo` when you have a genuinely expensive computation — filtering or sorting thousands of items, complex mathematical transformations, or deriving expensive state from multiple inputs. Use `useCallback` when passing a function to a child component wrapped in `React.memo`, or when a function is a dependency of `useEffect` and you need to control when the effect re-runs. Don't use either speculatively. Profile with React DevTools first, then add memoization to confirmed bottlenecks. ## Does useCallback do anything without React.memo? No. `useCallback` gives you a stable function reference, but that reference only prevents re-renders if the receiving component checks whether its props changed before re-rendering. Regular React components don't perform this check — they always re-render when their parent re-renders. Only components wrapped in `React.memo` use the stable reference to skip unnecessary re-renders. Without `React.memo` on the child, `useCallback` adds overhead without any benefit. ## Should I still use useMemo and useCallback in React 19 with the Compiler? Much less often. The React Compiler (stable since October 2025) automatically inserts the equivalent of `useMemo` and `useCallback` at build time wherever memoization helps. You write plain JavaScript functions and the compiler handles optimization. You still need manual memoization for genuinely expensive computations with large datasets (the compiler doesn't know which operations are expensive), complex patterns requiring explicit memoization boundaries, and codebases not yet on the compiler. When in doubt, enable the compiler and profile before adding manual memoization. ## What causes stale closures in useMemo and useCallback? A stale closure happens when a value used inside `useMemo` or `useCallback` is not listed in the dependency array. The memoized function captures the value at the time it was last created, not the current value. The ESLint rule `react-hooks/exhaustive-deps` catches this automatically. Always list every value used inside the callback in the dependency array. For values you need inside the callback but don't want as triggers (like the latest version of a frequently-changing value), use a ref: `const latestValue = useRef(value); latestValue.current = value;`. ## Why does putting an object in a useEffect or useMemo dependency array cause infinite loops? An object or array created inside a component is a new reference on every render. When you put it in a dependency array, React compares the new reference to the previous one — they're always different, so the effect or memoized value always recomputes. This creates an infinite loop for useEffect. The fix: depend on primitive values extracted from the object (strings, numbers, booleans) rather than the object itself. `[items, category, sort]` instead of `[items, { category, sort }]`. ## Is it better to define functions outside the component or use useCallback? If a function doesn't use any values from inside the component (no props, no state, no context), define it outside the component entirely. It's created once and never recreated — no memoization needed. If the function needs component values, you must define it inside the component. Then use `useCallback` only if it's passed to a memoized child or used in a `useEffect` dependency array. For event handlers that are only used inline in JSX and not passed down, skip `useCallback` entirely.