const memoizedValue = useMemo(
  () => expensiveComputation(a, b), // factory function
  [a, b]                            // dependency array
)

import { useState, useMemo } from 'react'

// Simulated large dataset
function generateItems(count) {
  return Array.from({ length: count }, (_, i) => ({
    id: i,
    name: `Item ${i}`,
    price: Math.random() * 100,
    inStock: Math.random() > 0.3,
  }))
}

const allItems = generateItems(10_000)

// ❌ Without useMemo — filter runs on every render
function ProductList({ minPrice }) {
  const [theme, setTheme] = useState('light')

  // This runs every time 'theme' changes, even though minPrice didn't change
  const filtered = allItems.filter(item => item.price >= minPrice && item.inStock)

  return (
    <div className={theme}>
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
        Toggle theme
      </button>
      <ul>{filtered.map(item => <li key={item.id}>{item.name} — ${item.price.toFixed(2)}</li>)}</ul>
    </div>
  )
}

// ✅ With useMemo — filter only runs when minPrice changes
function ProductList({ minPrice }) {
  const [theme, setTheme] = useState('light')

  const filtered = useMemo(
    () => allItems.filter(item => item.price >= minPrice && item.inStock),
    [minPrice] // only recompute when minPrice changes
  )

  return (
    <div className={theme}>
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
        Toggle theme
      </button>
      <ul>{filtered.map(item => <li key={item.id}>{item.name} — ${item.price.toFixed(2)}</li>)}</ul>
    </div>
  )
}

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

// A chart that is expensive to render
const Chart = memo(function Chart({ data }) {
  console.log('Chart re-rendered')
  return <svg>{/* expensive rendering */}</svg>
})

// ❌ Without useMemo — Chart re-renders on every keystroke
function Dashboard({ userId }) {
  const [filter, setFilter] = useState('')

  // New object reference on every render → Chart sees "new" data → re-renders
  const chartData = {
    userId,
    series: computeSeriesData(userId), // expensive
  }

  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      <Chart data={chartData} />
    </div>
  )
}

// ✅ With useMemo — Chart only re-renders when userId changes
function Dashboard({ userId }) {
  const [filter, setFilter] = useState('')

  // Stable reference — same object as long as userId is the same
  const chartData = useMemo(
    () => ({
      userId,
      series: computeSeriesData(userId),
    }),
    [userId]
  )

  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      <Chart data={chartData} />
    </div>
  )
}

import { useMemo } from 'react'

function SalesReport({ transactions, startDate, endDate, category }) {
  // Computed from four different inputs — recompute only when any changes
  const summary = useMemo(() => {
    const filtered = transactions.filter(tx => {
      const d = new Date(tx.date)
      return (
        d >= startDate &&
        d <= endDate &&
        (category === 'all' || tx.category === category)
      )
    })

    const total = filtered.reduce((sum, tx) => sum + tx.amount, 0)
    const byCategory = filtered.reduce((acc, tx) => {
      acc[tx.category] = (acc[tx.category] || 0) + tx.amount
      return acc
    }, {})

    return { filtered, total, byCategory }
  }, [transactions, startDate, endDate, category])

  return (
    <div>
      <p>Total: ${summary.total.toFixed(2)}</p>
      <p>Transactions: {summary.filtered.length}</p>
    </div>
  )
}