usecallback vs useeffect

4 min read 17-10-2024

`useCallback` vs. `useEffect`: When to Use Each React Hook

React's hooks provide a powerful way to manage state and side effects within functional components. Two commonly used hooks are useCallback and useEffect, but their purposes and usage differ significantly. This article will break down their functionality, highlight their key differences, and offer practical examples to illustrate when to use each.

Understanding `useCallback`

The useCallback hook serves a specific purpose: memorizing the result of a function. It returns a memoized version of the callback function, preventing unnecessary re-renders if the function's dependencies remain unchanged.

Here's how it works:

Arguments: useCallback accepts two parameters:
- Callback Function: The function you want to memoize.
- Dependency Array: An array containing the variables the callback function depends on.
Memoization: useCallback compares the dependency array with previous values. If the dependencies haven't changed, it returns the same memoized function from the previous render. If there's a change in dependencies, it creates a new function and memoizes it.

Key Benefits of useCallback:

Improved Performance: By preventing unnecessary function re-creations, useCallback optimizes component rendering and reduces the chances of performance bottlenecks.
Avoid Unintended Re-renders: When used correctly, useCallback helps avoid unnecessary re-renders triggered by a change in a parent component's state or props. This is particularly useful when passing functions as props to child components.

Example:

Let's consider a scenario where we have a parent component passing a function to a child component.

// Parent component
const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => setCount(count + 1);

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

// Child component
const ChildComponent = ({ handleClick }) => {
  console.log('Child component rendered'); // This will log every time the component re-renders
  return <button onClick={handleClick}>Increment</button>;
};

In this example, every time count changes, the parent component re-renders, causing the ChildComponent to re-render as well. However, the handleClick function doesn't change between re-renders.

To prevent unnecessary re-renders of ChildComponent, we can use useCallback:

// Parent component
const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => setCount(count + 1), [count]);

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

// Child component
const ChildComponent = ({ handleClick }) => {
  console.log('Child component rendered'); // This will log only once on initial render
  return <button onClick={handleClick}>Increment</button>;
};

Now, the ChildComponent will only re-render when the count value changes, leading to better performance.

Understanding `useEffect`

The useEffect hook is designed to handle side effects within your React components. Side effects are actions that interact with the outside world, such as making API calls, setting up event listeners, or manipulating the DOM.

How it works:

Callback Function: useEffect takes a callback function as its first argument. This function contains the code to be executed when the effect should be triggered.
Dependency Array: The second argument to useEffect is an optional dependency array. This array specifies the variables that the effect depends on.
Effect Execution: When the component mounts, the effect will run. If a dependency array is provided, the effect will also re-run whenever any of the dependencies change.

Types of Effects with useEffect:

Data Fetching: Use useEffect to fetch data from an API when the component mounts or when a relevant dependency changes.
Event Listeners: Set up event listeners within the effect and clean them up in the return function to avoid memory leaks.
DOM Manipulation: Directly manipulate the DOM within the effect, but be cautious about its impact on performance and potential side effects.

Example:

Let's say we want to fetch data from an API when the component mounts and whenever a user changes the value of a search input:

const MyComponent = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data based on searchTerm
    fetch(`https://api.example.com/search?q=${searchTerm}`)
      .then(response => response.json())
      .then(setData);
  }, [searchTerm]); // Run effect on mount and when searchTerm changes

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />
      {/* Display data */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

In this example, the useEffect hook fetches data from the API based on the searchTerm value. The effect runs on initial render and re-runs whenever searchTerm changes.