React useCallback Hook Cheat Sheet

What is `useCallback`?

A React Hook that memoizes a callback function, preventing it from being re-created on every render — useful for performance optimization.

import { useCallback } from "react";

Basic Syntax

const memoizedCallback = useCallback(() => {
  // function body
}, [dependencies]);

When to Use It

• Passing callbacks to child components
• Preventing unnecessary re-renders
• Keeping the same function reference unless dependencies change

Example: Preventing Re-renders

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

<ChildComponent onClick={handleClick} />

If handleClick wasn't memoized, ChildComponent might re-render unnecessarily.

With Dependencies

const increment = useCallback(() => {
  setCount((c) => c + 1);
}, []);

If you depend on a value:

const increment = useCallback(() => {
  setCount(count + 1);
}, [count]);

Common Use Case: with `useMemo` or `React.memo`

const handleChange = useCallback((e) => {
  setValue(e.target.value);
}, []);

const Input = React.memo(({ onChange }) => (
  <input onChange={onChange} />
));