What is the main benefit of using useCallback with useEffect?

Using useCallback with useEffect prevents unnecessary re-execution of effects by ensuring that functions are only recreated when their dependencies change. This optimization helps improve React component performance by avoiding redundant side effects and re-renders.

When should I use useCallback in React?

You should use useCallback when passing functions as dependencies to useEffect, useMemo, or when passing callbacks to child components that are optimized with React.memo. It's particularly useful for functions that are expensive to create or that trigger side effects.

Does useCallback improve performance in all cases?

No, useCallback adds a small overhead due to memoization. It's most beneficial when the function is passed as a dependency to hooks like useEffect or to memoized child components. For simple functions that don't cause performance issues, useCallback may not be necessary.

How do I identify when useEffect is running too often?

You can use React DevTools Profiler to monitor component renders and effect executions. Additionally, adding console.log statements inside useEffect can help track how frequently it runs. If it runs on every render despite dependencies not changing, you may need to optimize with useCallback or useMemo.

Can I use useCallback without useEffect?

Yes, useCallback can be used independently of useEffect. It's useful whenever you want to memoize a function, such as when passing callbacks to child components that use React.memo to prevent unnecessary re-renders, or when you want to maintain referential equality of functions across renders.

Prevent Unnecessary React Effects with Memoized Functions

React effects that re-run on every render cause unnecessary API calls, subscriptions, and performance issues. When effects depend on functions that are recreated each render, React thinks the dependency changed—even when it hasn't.

The Problem

When you pass a function to effect dependencies, React compares it by reference. Since functions are recreated on every render, the effect triggers unnecessarily.

javascript

function MyComponent({ userId }) {
  const [data, setData] = useState(null);

  // ❌ Problem: fetchUser is recreated on every render
  const fetchUser = () => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(setData);
  };

  // Effect re-runs unnecessarily
  useEffect(() => {
    fetchUser();
  }, [fetchUser]); // fetchUser changes every render

  return <div>{data?.name}</div>;
}

The Solution: Memoized Functions

Use useCallback to memoize functions—they only get recreated when specified dependencies change.

javascript

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

function MyComponent({ userId }) {
  const [data, setData] = useState(null);

  // ✅ Solution: Memoize the function
  const fetchUser = useCallback(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(setData);
  }, [userId]); // Only recreate when userId changes

  useEffect(() => {
    fetchUser();
  }, [fetchUser]); // Now stable unless userId changes

  return <div>{data?.name}</div>;
}

How It Works

useCallback wraps your function and returns a memoized version
The function only gets recreated when dependencies change
The effect sees the same function reference across renders
Effect only runs when the function actually changes

When to Use This Pattern

Use memoized functions when:

Passing functions to effect dependencies
Passing callbacks to child components wrapped in React.memo
Creating event handlers that trigger expensive operations
Building custom hooks that return functions

Don't use it for:

Simple inline event handlers
Functions that don't cause performance issues
Every function in your component (premature optimization)

Key Takeaways

useCallback prevents function recreation across renders
Use it when functions are dependencies in effects or passed to memoized components
Always include all dependencies to avoid stale closures
Measure performance impact before optimizing
Consider moving functions inside effects when they're only used there