Using `useCallback` with Dependencies

Many React developers are familiar with the useCallback hook, but few know how to fully use it. Here's a trick that can help you avoid unnecessary re-renders and improve performance:

The Problem

When you use a callback function in a dependency array of useEffect or useMemo, React will re-create the function on every render, causing the effect or memoization to re-run unnecessarily. This can lead to performance issues and unexpected behavior.

The Solution

By using useCallback with dependencies, you can memoize the callback function and make it's only re-created when the dependencies change. This trick is especially useful when working with APIs, event handlers, or complex computations.

Code example

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

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

  // Create a memoized callback function with dependencies
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]); // <--- dependencies array

  useEffect(() => {
    // Use the memoized callback function
    document.addEventListener('click', handleIncrement);
    return () => {
      document.removeEventListener('click', handleIncrement);
    };
  }, [handleIncrement]); // <--- dependencies array

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

In this example, we create a memoized handleIncrement function using useCallback. The function is only re-created when the count state changes. We then use this memoized function in the useEffect hook to add an event listener to the document.

By using useCallback with dependencies, we make sure that the handleIncrement function is only re-created when the count state changes, avoiding unnecessary re-renders and improving performance.

Why it's important

This trick is essential when working with complex applications, as it helps to:

• Avoid unnecessary re-renders and improve performance

• Prevent unexpected behavior caused by re-created functions

• Simplify code maintenance and debugging