React.memo, useMemo & useCallback

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

  console.log("Parent rendered");

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>

      {/* These re-render EVERY time count changes */}
      {/* even though they don't use count at all! */}
      <ExpensiveChart data={staticData} />
      <UserProfile user={currentUser} />
      <Footer />
    </div>
  );
}

function ExpensiveChart({ data }) {
  console.log("ExpensiveChart rendered"); // Logs every click!
  // Imagine this takes 50ms to render...
  return <canvas>{/* complex chart */}</canvas>;
}

function Footer() {
  console.log("Footer rendered"); // Logs every click!
  return <footer>© 2025</footer>;
}

// Click the button 10 times:
// "Parent rendered" × 10
// "ExpensiveChart rendered" × 10  ← wasted work!
// "Footer rendered" × 10          ← wasted work!

Parent state changes
    │
    ▼
┌─────────────────────────────────────────┐
│  Does child use React.memo?             │
│                                         │
│  NO  → Re-render child (always)         │
│                                         │
│  YES → Did props change? (shallow ===)  │
│         │                               │
│         ├─ YES → Re-render child        │
│         └─ NO  → Skip re-render ✓       │
└─────────────────────────────────────────┘

// Basic usage
const MemoizedComponent = React.memo(function MyComponent({ name, score }) {
  console.log("Rendered!");
  return <div>{name}: {score}</div>;
});

// With arrow function
const MemoizedChart = React.memo(({ data }) => {
  console.log("Chart rendered!");
  return <canvas>{/* expensive chart */}</canvas>;
});

// With custom comparison function
const MemoizedItem = React.memo(
  ({ item, onSelect }) => {
    return <li onClick={() => onSelect(item.id)}>{item.name}</li>;
  },
  (prevProps, nextProps) => {
    // Return true to SKIP re-render (props are "equal")
    // Return false to RE-RENDER (props "changed")
    return prevProps.item.id === nextProps.item.id
        && prevProps.item.name === nextProps.item.name;
  }
);

// ❌ WITHOUT React.memo — ExpensiveChart re-renders every click

function Dashboard() {
  const [filter, setFilter] = useState("all");

  return (
    <div>
      <select onChange={e => setFilter(e.target.value)}>
        <option value="all">All</option>
        <option value="active">Active</option>
      </select>

      {/* Re-renders every time filter changes, even though
          chartData never changes! Takes 80ms each time. */}
      <ExpensiveChart data={chartData} />

      <FilteredList filter={filter} items={items} />
    </div>
  );
}

function ExpensiveChart({ data }) {
  // Expensive: processes 10,000 data points
  const processed = data.map(d => complexCalculation(d));
  return <canvas>{/* render chart */}</canvas>;
}

// ✅ WITH React.memo — ExpensiveChart skips re-render

function Dashboard() {
  const [filter, setFilter] = useState("all");

  return (
    <div>
      <select onChange={e => setFilter(e.target.value)}>
        <option value="all">All</option>
        <option value="active">Active</option>
      </select>

      {/* React.memo checks: did "data" prop change?
          chartData is the same reference → skip re-render ✓ */}
      <MemoizedChart data={chartData} />

      <FilteredList filter={filter} items={items} />
    </div>
  );
}

const MemoizedChart = React.memo(function ExpensiveChart({ data }) {
  // Only runs when data actually changes
  const processed = data.map(d => complexCalculation(d));
  return <canvas>{/* render chart */}</canvas>;
});

// React.memo does this internally (simplified):
function shallowEqual(prevProps, nextProps) {
  const prevKeys = Object.keys(prevProps);
  const nextKeys = Object.keys(nextProps);

  if (prevKeys.length !== nextKeys.length) return false;

  for (const key of prevKeys) {
    // Strict equality (===) — NOT deep comparison
    if (prevProps[key] !== nextProps[key]) return false;
  }
  return true;
}

// ✅ Primitives work great:
"hello" === "hello"   // true — same string
42 === 42             // true — same number
true === true         // true — same boolean

// ❌ Objects/arrays fail even with same content:
{ a: 1 } === { a: 1 }     // false — different references!
[1, 2] === [1, 2]         // false — different references!
(() => {}) === (() => {})  // false — different references!

// This is why useMemo and useCallback exist —
// to stabilize object and function references.

const memoizedValue = useMemo(() => {
  // This function runs only when dependencies change
  return expensiveCalculation(a, b);
}, [a, b]); // ← dependency array

// Rules:
// - Returns a VALUE (number, string, object, array, JSX)
// - Recomputes only when deps change (shallow ===)
// - First render: always runs the function
// - Subsequent renders: returns cached value if deps unchanged

// ❌ WITHOUT useMemo — recalculates on EVERY render
function ProductList({ products, filter }) {
  const [sortOrder, setSortOrder] = useState("asc");

  // This runs every render — even when only sortOrder changed!
  // Filtering 50,000 products takes ~120ms
  const filtered = products.filter(p =>
    p.name.toLowerCase().includes(filter.toLowerCase())
  );

  return <List items={filtered} sort={sortOrder} />;
}

// ✅ WITH useMemo — recalculates only when inputs change
function ProductList({ products, filter }) {
  const [sortOrder, setSortOrder] = useState("asc");

  // Only recomputes when products or filter change
  // Changing sortOrder does NOT trigger refiltering
  const filtered = useMemo(() => {
    return products.filter(p =>
      p.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [products, filter]);

  return <List items={filtered} sort={sortOrder} />;
}

// ❌ WITHOUT useMemo — new object every render breaks memo
function App() {
  const [count, setCount] = useState(0);

  // New object reference every render!
  const config = { theme: "dark", locale: "en" };

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      {/* MemoizedSidebar re-renders every click because
          config is a new object reference each time */}
      <MemoizedSidebar config={config} />
    </>
  );
}

// ✅ WITH useMemo — stable reference, memo works
function App() {
  const [count, setCount] = useState(0);

  // Same reference across renders (no deps = never changes)
  const config = useMemo(() => ({ theme: "dark", locale: "en" }), []);

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      {/* MemoizedSidebar skips re-render ✓
          config is the same reference */}
      <MemoizedSidebar config={config} />
    </>
  );
}

const memoizedFn = useCallback(() => {
  doSomething(a, b);
}, [a, b]); // ← dependency array

// Equivalent to:
const memoizedFn = useMemo(() => {
  return () => doSomething(a, b);
}, [a, b]);

// useCallback(fn, deps) === useMemo(() => fn, deps)
// useCallback is just syntactic sugar for memoizing functions

// ❌ WITHOUT useCallback — memo is useless

function TodoApp() {
  const [todos, setTodos] = useState(initialTodos);
  const [filter, setFilter] = useState("all");

  // New function reference EVERY render!
  const handleToggle = (id) => {
    setTodos(prev => prev.map(t =>
      t.id === id ? { ...t, done: !t.done } : t
    ));
  };

  return (
    <div>
      <FilterBar filter={filter} onChange={setFilter} />
      {todos.map(todo => (
        // Even though TodoItem is wrapped in React.memo,
        // it re-renders every time because handleToggle
        // is a NEW function reference on every render
        <MemoizedTodoItem
          key={todo.id}
          todo={todo}
          onToggle={handleToggle}  // ← new ref every time!
        />
      ))}
    </div>
  );
}

const MemoizedTodoItem = React.memo(function TodoItem({ todo, onToggle }) {
  console.log(`Rendering: ${todo.text}`);
  return (
    <li onClick={() => onToggle(todo.id)}>
      {todo.done ? "✅" : "⬜"} {todo.text}
    </li>
  );
});
// ALL items log on every filter change — memo can't help!

// ✅ WITH useCallback — memo works correctly

function TodoApp() {
  const [todos, setTodos] = useState(initialTodos);
  const [filter, setFilter] = useState("all");

  // Same function reference across renders
  // Only changes if... well, it has no deps, so never
  const handleToggle = useCallback((id) => {
    setTodos(prev => prev.map(t =>
      t.id === id ? { ...t, done: !t.done } : t
    ));
  }, []); // ← empty deps: uses functional setState, no external deps

  return (
    <div>
      <FilterBar filter={filter} onChange={setFilter} />
      {todos.map(todo => (
        <MemoizedTodoItem
          key={todo.id}
          todo={todo}
          onToggle={handleToggle}  // ← same ref every time ✓
        />
      ))}
    </div>
  );
}

// Now when filter changes:
// - TodoApp re-renders
// - handleToggle is the same reference (useCallback)
// - Each todo object is the same reference (state didn't change)
// - React.memo sees same props → skips re-render ✓
// Only FilterBar re-renders — exactly what we want.

function SearchPage({ allProducts }) {
  const [query, setQuery] = useState("");
  const [cart, setCart] = useState([]);

  // useMemo: cache expensive filtered result
  // Only recomputes when allProducts or query change
  const results = useMemo(() => {
    return allProducts.filter(p =>
      p.name.toLowerCase().includes(query.toLowerCase())
    );
  }, [allProducts, query]);

  // useCallback: stable function reference
  // Only changes when... never (uses functional setState)
  const addToCart = useCallback((product) => {
    setCart(prev => [...prev, product]);
  }, []);

  return (
    <div>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <p>{cart.length} items in cart</p>

      {/* React.memo: skip re-render if props unchanged */}
      <MemoizedProductGrid
        products={results}    // ← stable ref (useMemo)
        onAddToCart={addToCart} // ← stable ref (useCallback)
      />
    </div>
  );
}

// React.memo: only re-renders when products or onAddToCart change
const MemoizedProductGrid = React.memo(function ProductGrid({
  products,
  onAddToCart,
}) {
  console.log("ProductGrid rendered");
  return (
    <div className="grid">
      {products.map(p => (
        <ProductCard key={p.id} product={p} onAdd={onAddToCart} />
      ))}
    </div>
  );
});

// When user adds to cart (setCart):
// - SearchPage re-renders
// - results: same ref (query didn't change) ✓
// - addToCart: same ref (useCallback, no deps) ✓
// - React.memo: props unchanged → skip ProductGrid render ✓
// Only the cart count text updates. Zero wasted work.

Is the child component expensive to render?
    │
    ├─ NO  → Don't bother with memoization
    │
    └─ YES → Wrap child in React.memo
              │
              ├─ Are you passing objects/arrays as props?
              │   └─ YES → Wrap them in useMemo
              │
              └─ Are you passing functions as props?
                  └─ YES → Wrap them in useCallback

// ❌ Memoizing a cheap calculation
const fullName = useMemo(() => {
  return `${firstName} ${lastName}`;
}, [firstName, lastName]);
// String concatenation is trivial. The useMemo overhead
// (storing value + comparing deps) costs MORE than just
// computing it every render.
// ✅ Just compute it:
const fullName = `${firstName} ${lastName}`;


// ❌ Memoizing when the component isn't wrapped in React.memo
const handleClick = useCallback(() => {
  doSomething();
}, []);
// If the child receiving handleClick isn't memoized,
// it re-renders anyway. useCallback is wasted.
// ✅ Just use a regular function:
const handleClick = () => doSomething();


// ❌ Memoizing with deps that change every render
const data = useMemo(() => {
  return transform(items);
}, [items]); // If items is a new array every render,
             // useMemo recomputes every time anyway.
// ✅ Fix the source: stabilize items first, or don't memoize.


// ❌ Memoizing primitive props for React.memo
// React.memo already handles primitives perfectly:
<MemoizedLabel text="Hello" count={5} active={true} />
// All props are primitives → shallow comparison works
// No need for useMemo or useCallback here.

// ❌ UNOPTIMIZED — everything re-renders on every keystroke

function EmployeeDashboard({ employees }) {
  const [search, setSearch] = useState("");
  const [selectedId, setSelectedId] = useState(null);

  // Runs on EVERY render (every keystroke)
  const filtered = employees.filter(emp =>
    emp.name.toLowerCase().includes(search.toLowerCase())
  );

  // Runs on EVERY render
  const stats = {
    total: employees.length,
    avgSalary: employees.reduce((s, e) => s + e.salary, 0) / employees.length,
    departments: [...new Set(employees.map(e => e.dept))].length,
  };

  // New function on EVERY render
  const handleSelect = (id) => setSelectedId(id);

  return (
    <div>
      <input
        value={search}
        onChange={e => setSearch(e.target.value)}
        placeholder="Search employees..."
      />
      <StatsPanel stats={stats} />
      <EmployeeList employees={filtered} onSelect={handleSelect} />
      <EmployeeDetail id={selectedId} />
    </div>
  );
}

// Typing "John":
// - 4 keystrokes = 4 re-renders of EVERYTHING
// - StatsPanel re-renders 4x (stats is new object each time)
// - EmployeeList re-renders 4x (filtered is new array + handleSelect is new fn)
// - Each of 1,000 EmployeeRow components re-renders 4x
// Total: ~4,000 component renders for 4 keystrokes 😱

// ✅ OPTIMIZED — surgical re-renders only where needed

function EmployeeDashboard({ employees }) {
  const [search, setSearch] = useState("");
  const [selectedId, setSelectedId] = useState(null);

  // useMemo: only recompute when employees or search change
  const filtered = useMemo(() => {
    return employees.filter(emp =>
      emp.name.toLowerCase().includes(search.toLowerCase())
    );
  }, [employees, search]);

  // useMemo: only recompute when employees change (not on search!)
  const stats = useMemo(() => ({
    total: employees.length,
    avgSalary: employees.reduce((s, e) => s + e.salary, 0) / employees.length,
    departments: [...new Set(employees.map(e => e.dept))].length,
  }), [employees]);

  // useCallback: stable function reference
  const handleSelect = useCallback((id) => {
    setSelectedId(id);
  }, []);

  return (
    <div>
      <input
        value={search}
        onChange={e => setSearch(e.target.value)}
        placeholder="Search employees..."
      />
      <MemoizedStatsPanel stats={stats} />
      <MemoizedEmployeeList employees={filtered} onSelect={handleSelect} />
      <EmployeeDetail id={selectedId} />
    </div>
  );
}

// React.memo: skip re-render if stats object is the same ref
const MemoizedStatsPanel = React.memo(function StatsPanel({ stats }) {
  return (
    <div className="stats">
      <span>Total: {stats.total}</span>
      <span>Avg Salary: ${stats.avgSalary.toFixed(0)}</span>
      <span>Departments: {stats.departments}</span>
    </div>
  );
});

// React.memo: skip re-render if employees and onSelect are same refs
const MemoizedEmployeeList = React.memo(function EmployeeList({
  employees,
  onSelect,
}) {
  return (
    <ul>
      {employees.map(emp => (
        <MemoizedEmployeeRow
          key={emp.id}
          employee={emp}
          onSelect={onSelect}
        />
      ))}
    </ul>
  );
});

// React.memo: individual rows skip re-render too
const MemoizedEmployeeRow = React.memo(function EmployeeRow({
  employee,
  onSelect,
}) {
  return (
    <li onClick={() => onSelect(employee.id)}>
      {employee.name} — {employee.dept}
    </li>
  );
});

// ✅ Composition: no memoization needed!

// Instead of this (ExpensiveTree re-renders on every count change):
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        {count}
      </button>
      <ExpensiveTree />  {/* re-renders every click */}
    </div>
  );
}

// Do this (lift the stateful part into its own component):
function App() {
  return (
    <div>
      <Counter />
      <ExpensiveTree />  {/* never re-renders! */}
    </div>
  );
}

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  );
}
// State is colocated in Counter. App doesn't re-render.
// ExpensiveTree doesn't re-render. No memo needed.