useCallback

🔍 What Is It?

useCallback(fn, deps) returns a memoised version of fn. The function is only recreated when a dependency in deps changes.

const handleSubmit = useCallback(async (data: FormData) => {
  await submitForm(data);
  onSuccess();
}, [onSuccess]); // only recreated when onSuccess changes

useCallback is equivalent to useMemo(() => fn, deps). It is just a more readable shorthand for memoising functions specifically.

When it matters:

• →Passing a callback to a React.memo wrapped child
• →Passing a function as a useEffect dependency
• →Passing a callback to a custom hook that uses it as a dependency

🎯 Why Do We Need It?

In JavaScript, every function definition creates a new reference:

const fn1 = () => {};
const fn2 = () => {};
console.log(fn1 === fn2); // false — different references

Every time a parent component re-renders, every inline function is recreated as a new reference. If you pass that function to a child wrapped in React.memo, the child re-renders anyway — because the prop reference changed, even though the function does the same thing.

useCallback stabilises the reference so memoised children can actually skip re-renders.

🏗️ What Happens in Real Projects?

In a large data table component:

• →Memoised row components receive onRowClick, onRowExpand, onRowDelete callbacks
• →Without useCallback: all rows re-render whenever the parent re-renders (even for unrelated state changes)
• →With useCallback: row re-renders only when the specific callback logic changes

In a search component:

• →A debounced search function passed to a memoised input component
• →The function should not change on every render or the debounce resets

⚙️ How It Works

React stores the function reference in its hook memory. On each render, it compares the dependencies using Object.is(). If all dependencies are unchanged, it returns the same function reference from the previous render. If any dependency changed, it stores the new function.

Important: The function body still has access to the latest values via closure. The memoised reference just prevents unnecessary re-renders downstream.

💻 Example

useCallback in Production — Stable callbacks for memoised children and effect dependencies.

interface DataTableProps {
  data: Policy[];
  onEdit: (id: string) => void;
  onDelete: (id: string) => void;
  onExport: () => void;
}

// Memoised row — only re-renders when its own props change
const PolicyRow = React.memo(({ policy, onEdit, onDelete }: PolicyRowProps) => (
  <tr>
    <td>{policy.policyNumber}</td>
    <td>{policy.holderName}</td>
    <td>
      <button onClick={() => onEdit(policy.id)}>Edit</button>
      <button onClick={() => onDelete(policy.id)}>Delete</button>
    </td>
  </tr>
));

function PolicyTable({ policies, onRefresh }: { policies: Policy[]; onRefresh: () => void }) {
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  // Without useCallback: new function on every render — all PolicyRows re-render
  // With useCallback: same reference when policies haven't changed
  const handleEdit = useCallback((id: string) => {
    setSelectedId(id);
  }, []); // no dependencies — setSelectedId is stable

  const handleDelete = useCallback(async (id: string) => {
    setLoading(true);
    await deletePolicy(id);
    onRefresh();
    setLoading(false);
  }, [onRefresh]); // depends on onRefresh

  return (
    <table>
      {policies.map(p => (
        <PolicyRow key={p.id} policy={p} onEdit={handleEdit} onDelete={handleDelete} />
      ))}
    </table>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits