How to Use useEffect in React: Tips, Examples, and Pitfalls to Avoid

useEffect is one of the most commonly used hooks in React, enabling you to manage side effects like fetching data, subscribing to events, or manipulating the DOM. However, improper usage can lead to performance issues, bugs, and unexpected behavior. This guide will walk you through the best practices and common pitfalls associated with useEffect to help you write clean and efficient React code.

As you dive into React and its powerful hooks like useEffect, it's crucial to also stay updated on the core JavaScript language that underpins it. My eBook, "JavaScript: From ES2015 to ES2023", is an excellent resource to deepen your knowledge of modern JavaScript features that are essential for React development. More on that later—let's first explore useEffect in depth.

👉 Download Javascript: from ES2015 to ES2023 - eBook

.

Understanding useEffect

The useEffect hook takes two arguments:

1. Effect function: A function that contains the side effect logic.

2. Dependency array (optional): An array of values that the effect depends on. The effect re-runs whenever one of these dependencies changes.

Basic syntax:

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

Best Practices for Using useEffect

1. Understand the Dependency Array

1. Always declare all dependencies that your effect relies on in the dependency array. React will re-run the effect if any of these dependencies change.

2. Use tools like eslint-plugin-react-hooks to catch missing dependencies.

Example:

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(`/api/data/${id}`);
    setData(await response.json());
  };
  fetchData();
}, [id]); // Include `id` as a dependency

2. Keep Effects Focused

1. Each useEffect should focus on a single responsibility. This improves readability and makes it easier to manage effects.

Example:

// Good: Separate effects for different concerns
useEffect(() => {
  console.log("Component mounted");
}, []);

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

3. Clean Up Side Effects

1. Return a cleanup function to avoid memory leaks when components unmount or effects re-run.

Example:

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Running timer");
  }, 1000);
  return () => {
    clearInterval(timer); // Cleanup on unmount
  };
}, []);

4. Avoid Fetching Data Without Dependencies

1. Avoid running effects repeatedly by properly defining dependencies. If an effect has no dependencies, it will run after every render, leading to unnecessary work.

Example:

// Bad: Fetches data repeatedly
useEffect(() => {
  fetchData();
});

// Good: Fetches data once
useEffect(() => {
  fetchData();
}, []);

5. Use Custom Hooks for Reusable Logic

1. Extract repeated useEffect logic into custom hooks to promote reusability and reduce duplication.

Example:

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      setData(await response.json());
    };
    fetchData();
  }, [url]);
  return data;
};

6. Use Debouncing or Throttling for Performance

1. When handling effects like API calls on user input, debounce or throttle the calls to avoid overwhelming the server or degrading performance.

Example:

useEffect(() => {
  const handler = setTimeout(() => {
    fetchData(query);
  }, 500); // Debounce API call by 500ms
  return () => clearTimeout(handler);
}, [query]);

Common Pitfalls to Avoid

1. Missing Dependencies

1. Forgetting to include dependencies in the dependency array can lead to stale data or unexpected behavior.

2. React won't re-run the effect if dependencies change, potentially causing bugs.

2. Over-Reliance on useEffect

1. Not all logic needs to be in useEffect. Avoid placing synchronous state updates or logic that can run during rendering inside useEffect.

Bad Example:

useEffect(() => {
  setCount(count + 1); // Causes unnecessary renders
}, [count]);

Instead:

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

3. Running Effects Unnecessarily

1. Using useEffect with no dependency array or incomplete dependencies can lead to unnecessary re-renders and performance issues.

4. Infinite Loops

1. Updating state inside useEffect without proper conditions can cause infinite render loops.

Bad Example:

useEffect(() => {
  setCount(count + 1); // Causes infinite loop
}, [count]);

Fix:

useEffect(() => {
  if (count < 10) {
    setCount(count + 1);
  }
}, [count]);

5. Memory Leaks

1. Forgetting to clean up subscriptions, timers, or listeners can lead to memory leaks.

Bad Example:

useEffect(() => {
  const interval = setInterval(() => {
    console.log("Running");
  }, 1000);
  // No cleanup
}, []);

Fix:

useEffect(() => {
  const interval = setInterval(() => {
    console.log("Running");
  }, 1000);
  return () => clearInterval(interval); // Proper cleanup
}, []);

When to Avoid useEffect

1. Derived State: Avoid computing derived state using useEffect. Use useMemo or inline computations instead.

2. Synchronous Updates: Don’t use useEffect for state updates that can happen during rendering.

Example:

const fullName = `${firstName} ${lastName}`; // No need for useEffect

Conclusion

useEffect is a powerful tool for managing side effects, but it requires careful handling to avoid common pitfalls like memory leaks, unnecessary renders, and infinite loops. By adhering to best practices, keeping effects focused, and properly managing dependencies, you can ensure that your React components remain efficient, maintainable, and bug-free.

.

👉 Download Javascript: from ES2015 to ES2023 - eBook