How to Use `useEffect` Hooks Properly: Avoid Mistakes and Follow Best Practices

React's useEffect hook is a powerful tool for managing side effects in functional components. When used properly, it can handle tasks like data fetching, subscriptions, and DOM manipulations efficiently. However, improper use can lead to common issues like infinite loops, unnecessary renders, or performance bottlenecks.

In this blog, we’ll explore how to use useEffect hooks properly, covering common mistakes and best practices that can help you write cleaner, more efficient React code.

What is `useEffect`?

The useEffect hook in React allows you to run side effects after the component renders. This includes operations like data fetching, subscriptions, or manually changing the DOM. Since React functional components don’t have lifecycle methods (like componentDidMount or componentDidUpdate), useEffect serves as the replacement, enabling you to run code after the initial render and on subsequent updates.

The basic syntax of useEffect looks like this:

useEffect(() => {
  // Side effect logic here
}, [dependencies]);

Callback function: Contains the side effect code.
Dependency array: List of variables or props that, when changed, trigger the effect to run again. It controls when the effect is executed.

Basic Usage of `useEffect`

Here’s a simple example of how useEffect can be used for data fetching:

import React, { useState, useEffect } from "react";
 
function DataFetchingComponent() {
  const [data, setData] = useState([]);
 
  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []); // Empty dependency array ensures the effect runs only once after initial render
 
  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

The effect runs once after the initial render, because the dependency array is empty ([]).
After the data is fetched, it updates the state, which re-renders the component to display the data.

Common Mistakes to Avoid

1. Incorrect Dependency Arrays

One of the most common mistakes is providing incorrect or incomplete dependencies in the array. For example:

useEffect(() => {
  fetchData();
}, []); // Missing dependencies

If fetchData relies on some props or state, those should be included in the dependency array. Otherwise, it can lead to bugs where the effect doesn’t re-run when it should.

2. Over-fetching Data

A common issue occurs when developers forget to add the dependency array, causing useEffect to run on every render:

useEffect(() => {
  fetchData(); // This will run on every render if there's no dependency array
});

Without a dependency array, useEffect will run after every render. This can lead to over-fetching data, slowing down your application, and creating unnecessary network traffic.

3. Memory Leaks

Memory leaks can occur when asynchronous tasks like data fetching or timers continue running after the component unmounts. For example, if you're using setTimeout or setInterval in your effect without cleaning up, it can cause performance problems and errors.

useEffect(() => {
  const timer = setTimeout(() => {
    console.log("This runs after 1 second");
  }, 1000);
 
  return () => clearTimeout(timer); // Cleanup to avoid memory leaks
}, []);

Best Practices for `useEffect`

1. Use Multiple `useEffect` Hooks for Clarity

It’s tempting to bundle all your side effects into a single useEffect hook, but this can make the code harder to manage. Instead, separate concerns by using multiple useEffect hooks:

useEffect(() => {
  fetchUserData();
}, [userId]);
 
useEffect(() => {
  logPageView();
}, [page]);

This makes each hook easier to understand and maintain.

2. Declare Functions Inside the Effect

If your effect uses functions, define them inside the effect to ensure that the function has access to the latest values of variables and props:

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    setData(data);
  };
 
  fetchData();
}, []);

This ensures the function is not stale and prevents bugs related to closure issues.

3. Clean Up Side Effects

Some side effects, like subscriptions or timers, need to be cleaned up when the component unmounts or when dependencies change. Always return a cleanup function inside useEffect when necessary:

useEffect(() => {
  const subscription = subscribeToSomeData();
 
  return () => {
    subscription.unsubscribe(); // Cleanup when the component unmounts
  };
}, [someDependency]);

Neglecting cleanup can result in memory leaks, causing unnecessary resource consumption.

4. Optimize Performance with the Dependency Array

The dependency array ensures that the effect runs only when certain values change. Always include necessary dependencies to avoid unnecessary re-renders or skipping important updates.

For example, if you're fetching data based on some props:

useEffect(() => {
  fetchData(searchTerm);
}, [searchTerm]); // The effect will run whenever 'searchTerm' changes

Leaving out searchTerm could lead to stale data, while including it prevents unnecessary network requests.

Conclusion

The useEffect hook is a cornerstone of React's functional programming paradigm. When used properly, it can manage side effects efficiently and make your code more predictable. The key is to:

Be mindful of the dependency array to avoid unnecessary re-renders or missing updates.
Clean up side effects to prevent memory leaks.
Use multiple useEffect hooks to separate concerns.
Always optimize performance by considering what triggers the effect and when it should run.

By following these best practices, you can avoid common pitfalls and write cleaner, more maintainable code.