useCallback

Memoizing Functions

useCallback returns a memoized function that only changes when dependencies change.

Basic Usage

import { useCallback } from "react";

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

  // Without useCallback: new function every render
  const handleClick = () => {
    setCount(count + 1);
  };

  // With useCallback: same function reference
  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []); // No dependencies - function never changes

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

With Dependencies

function TodoList({ onAdd }) {
  const [input, setInput] = useState("");

  const handleSubmit = useCallback(
    (e) => {
      e.preventDefault();
      onAdd(input);
      setInput("");
    },
    [input, onAdd] // Re-create when input or onAdd changes
  );

  return (
    <form onSubmit={handleSubmit}>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button type="submit">Add</button>
    </form>
  );
}

Passing to Child Components

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

  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  // Child won't re-render if it uses React.memo
  return <Child onClick={handleClick} />;
}

const Child = React.memo(({ onClick }) => {
  console.log("Child rendered");
  return <button onClick={onClick}>Click me</button>;
});

useCallback vs useMemo

Key Difference

• useMemo: Returns a memoized value
• useCallback: Returns a memoized function

Equivalent Behavior

// These are equivalent:
const memoizedFn = useCallback(() => doSomething(a, b), [a, b]);

const memoizedFn = useMemo(() => () => doSomething(a, b), [a, b]);

When to Use Each

// useMemo for values
const sortedItems = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// useCallback for functions
const handleSort = useCallback(() => {
  setSortBy((prev) => (prev === "asc" ? "desc" : "asc"));
}, []);

Reference Equality

// Without: new function reference every render
const handleDelete = (id) => {
  setItems((prev) => prev.filter((item) => item.id !== id));
};

// With: same function reference
const handleDelete = useCallback(
  (id) => {
    setItems((prev) => prev.filter((item) => item.id !== id));
  },
  []
);

Practical Example

function DataGrid({ data, onRowClick }) {
  // Memoize expensive computation
  const sortedData = useMemo(
    () => [...data].sort((a, b) => a.name.localeCompare(b.name)),
    [data]
  );

  // Memoize callback to prevent unnecessary re-renders
  const handleClick = useCallback(
    (rowId) => {
      onRowClick(rowId);
    },
    [onRowClick]
  );

  return (
    <div>
      {sortedData.map((row) => (
        <Row key={row.id} data={row} onClick={handleClick} />
      ))}
    </div>
  );
}

When to Use

Good Use Cases

1. Passing callbacks to memoized children

const Child = React.memo(({ onClick }) => ...);
const handleClick = useCallback(() => ..., []);
<Child onClick={handleClick} /> // Won't cause re-render

2. Event handlers with dependencies

const handleSubmit = useCallback(
  (e) => {
    e.preventDefault();
    submitForm(formData);
  },
  [formData]
);

3. Functions passed to useEffect

const fetchData = useCallback(async () => {
  const response = await fetch(url);
  return response.json();
}, [url]);

useEffect(() => {
  fetchData().then(setData);
}, [fetchData]);

When NOT to Use

• Inline handlers (not passed as props)
• Functions not used as dependencies
• Simple functions (overhead > benefit)

Cost vs Benefit

// Don't useCallback for this
const handleClick = useCallback(() => {
  console.log("clicked");
}, []);
// Just use: onClick={() => console.log("clicked")}

// Do useCallback for this
const handleSort = useCallback(
  (key) => {
    setSortKey(key);
    setSortOrder((prev) => (prev === "asc" ? "desc" : "asc"));
  },
  []
);
// Pass to memoized child
<SortableList onSort={handleSort} />

Common Mistakes

// Bad: Creating new function every render
const handleClick = () => doSomething(id);

// Bad: Missing dependencies
const handleSubmit = useCallback(() => {
  submit(formData); // formData is missing!
}, []);

// Good: Include all dependencies
const handleSubmit = useCallback(() => {
  submit(formData);
}, [formData]);