const memoizedFn = useCallback(
  function fn(args) {
    // function body
  },
  [deps] // dependency array — same as useEffect
)

import { useState, memo } from 'react'

// Expensive child — wrapped with React.memo
const ExpensiveButton = memo(function ExpensiveButton({ onClick, label }) {
  console.log('ExpensiveButton rendered:', label)
  return <button onClick={onClick}>{label}</button>
})

// ❌ Without useCallback — ExpensiveButton re-renders on every parent render
function Parent() {
  const [count, setCount] = useState(0)
  const [text, setText] = useState('')

  // New function reference on every render
  const handleClick = () => {
    setCount(c => c + 1)
  }

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <p>Count: {count}</p>
      {/* Every keystroke in the input re-renders Parent, which creates a new
          handleClick → React.memo sees a new prop → ExpensiveButton re-renders */}
      <ExpensiveButton onClick={handleClick} label="Increment" />
    </div>
  )
}

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

const ExpensiveButton = memo(function ExpensiveButton({ onClick, label }) {
  console.log('ExpensiveButton rendered:', label)
  return <button onClick={onClick}>{label}</button>
})

// ✅ With useCallback — ExpensiveButton only re-renders when handleClick changes
function Parent() {
  const [count, setCount] = useState(0)
  const [text, setText] = useState('')

  // Stable reference — same function as long as deps don't change
  const handleClick = useCallback(() => {
    setCount(c => c + 1)
  }, []) // no deps: setCount is stable, and we use the functional updater form

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <p>Count: {count}</p>
      {/* Now typing in the input does NOT re-render ExpensiveButton */}
      <ExpensiveButton onClick={handleClick} label="Increment" />
    </div>
  )
}

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

// ❌ Without useCallback — effect re-runs on every render
function DataFetcher({ endpoint }) {
  const [data, setData] = useState(null)

  // New function every render
  const fetchData = async () => {
    const res = await fetch(endpoint)
    setData(await res.json())
  }

  // Because fetchData is a new reference every render, this effect
  // re-runs continuously — infinite loop!
  useEffect(() => {
    fetchData()
  }, [fetchData]) // ← new reference every render

  return <div>{JSON.stringify(data)}</div>
}

// ✅ With useCallback — effect only re-runs when endpoint changes
function DataFetcher({ endpoint }) {
  const [data, setData] = useState(null)

  const fetchData = useCallback(async () => {
    const res = await fetch(endpoint)
    setData(await res.json())
  }, [endpoint]) // stable when endpoint is stable

  useEffect(() => {
    fetchData()
  }, [fetchData]) // only re-runs when fetchData (= endpoint) changes

  return <div>{JSON.stringify(data)}</div>
}

import { useState, useCallback } from 'react'

function MeasuredBox() {
  const [height, setHeight] = useState(0)

  // useCallback ensures this is the same function — React only calls
  // the ref callback when the node mounts/unmounts, not on every render.
  const measuredRef = useCallback((node) => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height)
    }
  }, []) // no deps — only needs to run when the element mounts

  return (
    <div>
      <div ref={measuredRef} style={{ padding: 20 }}>
        <p>Resize the window to see changes</p>
      </div>
      <p>Box height: {height}px</p>
    </div>
  )
}

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

// Memoized row — only re-renders when its own props change
const TodoRow = memo(function TodoRow({ todo, onToggle, onDelete }) {
  console.log('Rendering row:', todo.id)
  return (
    <li>
      <input
        type="checkbox"
        checked={todo.done}
        onChange={() => onToggle(todo.id)}
      />
      <span style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
        {todo.text}
      </span>
      <button onClick={() => onDelete(todo.id)}>Delete</button>
    </li>
  )
})

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Buy milk', done: false },
    { id: 2, text: 'Write tests', done: false },
    { id: 3, text: 'Deploy app', done: false },
  ])
  const [newText, setNewText] = useState('')

  // Stable references — handlers only change if setTodos changes (it never does)
  const handleToggle = useCallback((id) => {
    setTodos(prev => prev.map(t => t.id === id ? { ...t, done: !t.done } : t))
  }, [])

  const handleDelete = useCallback((id) => {
    setTodos(prev => prev.filter(t => t.id !== id))
  }, [])

  function handleAdd() {
    if (!newText.trim()) return
    setTodos(prev => [...prev, { id: Date.now(), text: newText, done: false }])
    setNewText('')
  }

  return (
    <div>
      <input value={newText} onChange={e => setNewText(e.target.value)} />
      <button onClick={handleAdd}>Add</button>
      <ul>
        {todos.map(todo => (
          <TodoRow
            key={todo.id}
            todo={todo}
            onToggle={handleToggle}
            onDelete={handleDelete}
          />
        ))}
      </ul>
    </div>
  )
}