useMemo vs useCallback.
Value vs function. Pick the right one.

import { useMemo, useCallback, useState } from 'react';

function TheDifference({ items }: { items: number[] }) {
const [count, setCount] = useState(0);

// ─── useMemo: returns a VALUE ────────────────
const total = useMemo(() => {
return items.reduce((sum, n) => sum + n, 0);
}, [items]);
// total: number — the computed value

const sorted = useMemo(() => [...items].sort((a, b) => a - b), [items]);
// sorted: number[] — a new array, but stable until items changes

const user = useMemo(() => ({ name: 'Alice', age: 30 }), []);
// user: { name: string; age: number } — stable object

// ─── useCallback: returns a FUNCTION ─────────
const handleClick = useCallback(() => {
console.log('clicked');
}, []);
// handleClick: () => void — the function itself

const handleIncrement = useCallback(() => {
setCount(c => c + 1);
}, []);
// handleIncrement: () => void — stable function

// ─── Equivalent definitions ──────────────────
// These two are identical:
const cbA = useCallback(() => console.log('a'), []);
const cbB = useMemo(() => () => console.log('a'), []);
// Both return the same (() => void) function with stable identity.

// ─── The distinction in one line ─────────────
// useMemo: value = useMemo(() => compute(), deps)
// useCallback: fn = useCallback(() => { ... }, deps)
//
// Same effect. Different readability. Use the one whose
// name matches what you're returning.

console.log(total, sorted, user, handleClick, handleIncrement, cbA, cbB, count);

return (

Total: {total}
Sorted: {sorted.join(', ')}
{user.name} ({user.age})
Count: {count}

);
}

console.log(TheDifference);

import { useCallback, useState, memo, useEffect } from 'react';

// ─── Case 1: memo'd child + useCallback = win ─
const MemoizedButton = memo(({ onClick }: { onClick: () => void }) => {
console.log('MemoizedButton rendered');
return Click;
});

function GoodParent() {
const [count, setCount] = useState(0);

// ✅ Stable reference — MemoizedButton skips re-render
const handleClick = useCallback(() => {
console.log('clicked');
}, []);

return (

 setCount(c => c + 1)}>Parent: {count}
{/* Doesn't re-render when parent re-renders ✅ */}


);
}

// ─── Case 2: effect dependency + useCallback ─
function EffectDep({ id }: { id: string }) {
const load = useCallback(() => {
fetch(/api/${id}`).then(r => r.json());
}, [id]);

useEffect(() => {
load();
}, [load]); // ✅ runs only when id changes

return null;
}

// ─── Case 3: custom hook dependency ──────────
function useDebounce(fn: () => void, delay: number) {
useEffect(() => {
const id = setTimeout(fn, delay);
return () => clearTimeout(id);
}, [fn, delay]);
}

function Search({ query }: { query: string }) {
const handleSearch = useCallback(() => {
console.log('searching:', query);
}, [query]);

useDebounce(handleSearch, 300);

return 
Searching for: {query}
;
}

// ─── BAD: useCallback with no consumer ───────
function PointlessCallback() {
const [count, setCount] = useState(0);

// ❌ Nothing depends on the identity of handleClick
// No memo'd child, no effect, no custom hook.
// Cost: React runs the hook every render.
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []);

// Just as fast, simpler:
const handleClick2 = () => {
setCount(c => c + 1);
};

return (

A: {count}
B: {count}

);
}

// ─── The rule ────────────────────────────────
// Use useCallback when:
// ✅ Passing to React.memo'd component
// ✅ Used in another hook's dependency array
// ✅ Passed to a custom hook that depends on identity
//
// Don't use useCallback when:
// ❌ Passing to a native DOM event (onClick, onChange)
// ❌ Passing to a non-memo'd component
// ❌ Only used inside the component's own render logic
//
// The cost: React runs a hook + compares deps every render.
// The benefit: none, if nothing downstream compares identity.

console.log(MemoizedButton, GoodParent, EffectDep, useDebounce, Search, PointlessCallback);

import { useMemo, useState, useEffect, memo } from 'react';

interface Item { id: string; price: number; name: string }

// ─── Case 1: expensive computation ───────────
function ExpensiveList({ items }: { items: Item[] }) {
const [filter, setFilter] = useState('');
const [sortBy, setSortBy] = useState<'price' | 'name'>('price');

// ✅ Expensive (filter + sort) — only recomputes when
// items, filter, or sortBy changes. Not on every keystroke in
// the filter input itself (which IS a re-render, but reuses result).
const processed = useMemo(() => {
return items
.filter(i => i.name.toLowerCase().includes(filter.toLowerCase()))
.sort((a, b) => sortBy === 'price' ? a.price - b.price : a.name.localeCompare(b.name));
}, [items, filter, sortBy]);

return (

 setFilter(e.target.value)} placeholder="Filter..." />
 setSortBy(b => b === 'price' ? 'name' : 'price')}>
Sort by: {sortBy}


{processed.map(i => 
{i.name}: $`{i.price}
)}


);
}

// ─── Case 2: stable object for a memo'd child ─
const MemoizedChart = memo(({ config }: { config: { color: string; size: number } }) => {
console.log('Chart rendered');
return 
Chart: {config.color} / {config.size}
;
});

function ChartParent() {
const [count, setCount] = useState(0);

// ✅ Stable config — MemoizedChart skips re-render when count changes
const config = useMemo(() => ({ color: 'blue', size: 100 }), []);

return (

 setCount(c => c + 1)}>Count: {count}


);
}

// ─── Case 3: stable object for effect dependency
function StableDep({ a, b }: { a: number; b: number }) {
// Without useMemo: options is new every render → effect loops
const options = useMemo(() => ({ a, b }), [a, b]);

useEffect(() => {
console.log('options:', options);
}, [options]); // ✅ runs when a or b changes

return null;
}

// ─── BAD: memoizing trivial computations ─────
function PointlessMemo({ a, b }: { a: number; b: number }) {
// ❌ a + b costs nothing. useMemo has overhead.
const sum = useMemo(() => a + b, [a, b]);

// Just as fast, simpler:
const sum2 = a + b;

return 
{sum} / {sum2}
;
}

// ─── The rule ────────────────────────────────
// Use useMemo when:
// ✅ Computation is expensive (sort, filter, map on large arrays)
// ✅ Object/array passed to React.memo'd component
// ✅ Object/array in an effect dependency
//
// Don't use useMemo when:
// ❌ Computation is trivial (arithmetic, string concat)
// ❌ Value is used only inside the component's own render logic
// ❌ Nothing downstream compares identity
//
// Measure first. Most components don't need useMemo.

console.log(ExpensiveList, MemoizedChart, ChartParent, StableDep, PointlessMemo);