Understanding useEffect in ReactJS: A Beginner’s Guide

When learning React, one of the most important hooks you’ll encounter is useEffect. It's essential for managing side effects like fetching data, updating the DOM, or setting timers. However, as a beginner, you might run into issues such as unexpected re-renders or infinite loops, which can make it tricky to work with.

In this guide, we’ll break down the what, where, when, and why of useEffect, and dive into common mistakes you should avoid. I’ll also provide sample code to help you understand these concepts better.

What is useEffect?

useEffect is a React hook that lets you perform side effects in function components. Side effects include things like:

• Fetching data from an API
• Manually interacting with the DOM
• Subscribing to events (e.g., setting up intervals)

useEffect(() => {
  // Side effect logic here
});

The code inside useEffect runs after the component renders, and it can re-run if dependencies change.

Where to use useEffect?

You should place useEffect inside your function component. Here’s an example of fetching data on component mount:

import { useEffect, useState } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array, runs once on mount

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
}

When to use useEffect?

1. Fetching data from APIs (e.g., when a component mounts)
2. Setting up timers (e.g., setInterval)
3. Listening to events (e.g., DOM or WebSocket events)

Why use useEffect?

In React, rendering should be a pure operation (it shouldn’t have side effects). You need useEffect to perform side effects after the component has rendered. For example, fetching data or interacting with the DOM directly should happen in useEffect.

How to use useEffect correctly

1. Run on component mount: Use an empty dependency array to run the effect only once, when the component is first rendered.

useEffect(() => {
  console.log('Component mounted');
}, []); // Runs only once

2. Run when a value changes: Include variables in the dependency array to run the effect when those values change.

useEffect(() => {
  console.log('Count changed:', count);
}, [count]); // Runs when `count` changes

3. Clean up effects: Use a cleanup function to prevent memory leaks.

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

Common Mistakes to Avoid

As a beginner, you might face some issues while working with useEffect. Here are common mistakes and how to avoid them:

1. Missing Dependency Array

If you don’t provide a dependency array, your effect will run after every render.

For example:

useEffect(() => {
  console.log('Effect runs on every render');
}); // No dependency array, runs after every render

Problem: This can cause performance issues, and if your effect depends on some state, it can lead to infinite loops.

Solution: Always include a dependency array. If you want to run the effect only once (on mount), pass an empty array [].

useEffect(() => {
  console.log('Effect runs only once');
}, []); // Runs only once, on mount

2. Incorrect Dependencies in Array

If you don’t include all the dependencies correctly, React will either not re-run the effect when needed or run it too often.

For example:

useEffect(() => {
  console.log('Effect runs when `count` changes');
}, []); // `count` is missing in the dependency array

Problem: The effect depends on count, but it won’t re-run when count changes because it's not included in the dependency array.

Solution: Always list all variables your effect depends on in the dependency array.

useEffect(() => {
  console.log('Effect runs when `count` changes');
}, [count]); // Properly includes `count`

3. Unintended Infinite Loops

You may accidentally create an infinite loop if your effect causes a state update, which triggers a re-render, and thus, re-runs the effect.

For example:

useEffect(() => {
  setCount(count + 1); // Causes state change
}, [count]); // Effect runs when `count` changes

Problem: The setCount call inside useEffect updates the state, which triggers a re-render, and this re-runs useEffect—causing an infinite loop.

Solution: Ensure that state updates inside useEffect don't trigger unnecessary re-renders. Sometimes you may need to restructure your logic or use conditional updates.

4. Forgetting to Clean Up

When you set up things like event listeners, intervals, or WebSocket connections inside useEffect, you need to clean them up when the component unmounts or before the next effect runs.

For example:

useEffect(() => {
  const interval = setInterval(() => console.log('Running...'), 1000);

  // Missing cleanup function
}, []); // Runs only once on mount

Problem: If you forget the cleanup, the interval (or other side effects) will keep running even after the component is unmounted, leading to memory leaks.

Solution: Always include a cleanup function.

useEffect(() => {
  const interval = setInterval(() => console.log('Running...'), 1000);
  
  return () => clearInterval(interval); // Cleanup on unmount
}, []); // Runs only once on mount

5. Fetching Data in the Wrong Way

Fetching data inside the component body (instead of useEffect) can lead to fetching the same data multiple times, especially on re-renders.

For example:

function DataFetchingComponent() {
  fetch('https://api.example.com/data') // Fetching inside component body
    .then(response => response.json())
    .then(data => console.log(data));

  return <div>Loading...</div>;
}

Problem: The fetch will happen every time the component re-renders, even if it’s unnecessary.

Solution: Use useEffect to fetch data on mount:

function DataFetchingComponent() {
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data));
  }, []); // Fetches once on mount

  return <div>Loading...</div>;
}

Conclusion

useEffect is a powerful tool in React, but it can be tricky for beginners. By understanding its usage and avoiding common mistakes like missing dependencies, infinite loops, or forgotten cleanup functions, you can ensure your effects run efficiently and avoid unexpected behaviors.

Key Takeaways:

• Use the dependency array wisely to control when effects run.
• Always clean up side effects like intervals and event listeners.
• Be cautious about unnecessary re-renders and state updates within effects.

With these tips, you’ll be able to handle useEffect confidently and avoid the common pitfalls that many beginners face!