Understanding useEffect in React

The useEffect hook is a powerful tool in React that solves a very specific and important problem. I’ve created a document that explains this concept in detail, so you can see exactly what problem it addresses and how it provides a solution.

The Problem useEffect Solves

In a React application, a component’s job is to render UI based on its current state and props. We want this process to be pure, meaning that given the same props and state, the component will always render the exact same output.

However, many common tasks in web development are not pure. These tasks are called side effects, because they affect something outside of the component itself. They include:

• Fetching data from an API.
• Setting up subscriptions or event listeners.
• Directly manipulating the DOM (e.g., changing the title of the page).
• Timers like SetTimout or setInterval.

Running these side effects directly inside the main body of a component is a bad idea. Every time the component re-renders (which can happen frequently), the side effect would run again, leading to performance issues or unexpected behavior.

How useEffect Provides the Solution

The hook useEffect gives you a designated place to handle these side effects. It tells React, “Hey, I need to perform this action, but please only run it after the component has rendered, and only when necessary.”

The hook takes two arguments:

1. The Effect Function: This is the function where you write your code for the side effect. This code will execute after the component has rendered.
2. The Dependency Array: This is the most crucial part for solving the problem. It’s an array of variables (like state or props) that your effect function depends on.

Here’s the key logic that the dependency array enables:

• Empty Array []: The effect will run only once after the initial render. This is perfect for setting up things like an event listener that you only need to create one time.
• No Dependency Array: The effect will run after every single render of the component. This is rarely what you want and can cause infinite loops or performance issues.
• With Dependencies [myState, myProp]: The effect will run after the initial render and then only when any of the values in the array change. This is ideal for fetching new data when a user ID or a search term changes.

Example:

Let’s say you need to fetch user data based on a user ID.

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  // The effect runs when the component mounts and whenever userId changes
  useEffect(() => {
    // This is the "side effect" - fetching data
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));

    // Optional: Return a cleanup function
    // This runs when the component unmounts or before the effect runs again.
    // Great for unsubscribing from event listeners or cleaning up timers.
    return () => {
      // Cleanup code goes here
    };
  }, [userId]); // Dependency Array: The effect depends on userId

  if (!user) {
    return <div>Loading...</div>;
  }

  return <div>{user.name}</div>;
}

By placing the data-fetching logic inside useEffect with userId in the dependency array, you ensure that the API call is only made when the component is first loaded or when a different userId is passed to the component. This prevents unnecessary re-renders and network requests.

🌱 Understanding React’s useEffect with a Gardening Metaphor 🌱

One of the trickiest parts of React for many developers isn’t rendering UI—it’s managing side effects. To make this easier, let’s step into the shoes of a gardener.

🌼 The Garden and the Gardener

Your React component is like a gardener. Their main responsibility is to plant and arrange the garden (your UI) based on two things:

• Seeds = props (the inputs you give them).
• Soil condition = state (the component’s internal state).

A good gardener is pure and predictable: give them the same seeds and the same soil, and you’ll always get the same garden layout.

But gardening isn’t just about arranging plants. Some jobs happen outside the core act of planting.

🌿 What Are Side Effects?

Side effects are those tasks that don’t directly involve laying out the plants but still affect the health and function of the garden. For example:

• 🛒 Going to the store to buy new seeds → Fetching data from an API.
• 🪆 Setting up a scarecrow to keep birds away → Adding event listeners.
• 💦 Turning on a water sprinkler → Starting a timer or an interval.

If the gardener tried to run off to the store, put up scarecrows, and turn sprinklers on every single time they rearranged a plant, the whole process would descend into chaos. Nothing would be efficient.

📋 Enter useEffect : The Gardener’s To-Do List

This is where React’s useEffect hook shines. Think of it as a specialized to-do list for the gardener. Instead of juggling everything at once, the gardener writes down all the “outside tasks” on this list.

But there’s a key rule:
👉 Don’t touch the to-do list until the garden is fully planted and ready.

This ensures that the side effects don’t interfere with the predictable process of planting the garden.

⏰ Triggers: When Should the To-Do List Run?

The gardener doesn’t always want to do everything on the list. That’s why the list has triggers—conditions that decide when each task should be done.

• No trigger: The gardener runs through the list every single time they check the garden. Result? Chaos. This is rarely useful.
• Empty trigger []: The gardener only does the tasks once, right after the garden is planted for the very first time. Perfect for things you only set up once, like building a fence.
• Specific trigger [plantType]: The gardener does the tasks once at the start, and then only again when something changes—for example, if you switch from planting roses to tulips. This way, the gardener responds efficiently to changes without unnecessary work.

🧹 Cleanup: The Gardener’s “Put Away” List

Good gardeners don’t just set things up—they clean up too.

In React, useEffect provides a cleanup function. This is like:

• Taking down the scarecrow when it’s no longer needed.
• Turning off the sprinkler when you leave the garden.

The cleanup runs before the component is removed or before the effect runs again. This prevents leaks, errors, and unwanted leftovers in your garden.

🌳 Why This Matters

By using useEffect, you:

• Keep the garden layout (UI rendering) pure and predictable.
• Manage outside tasks (side effects) in an organized, controlled way.
• Avoid chaos and inefficiency by handling setup and cleanup properly.

React doesn’t just want you to plant the garden—it wants you to manage the whole ecosystem responsibly.

💭 Next time you reach for useEffect, picture yourself as the gardener.
Plant first 🌱, check your to-do list 📋, do the right tasks ✅, and don’t forget to clean up 🧹.

That’s how you keep your React garden healthy, scalable, and beautiful.

👉 How do you explain useEffect to junior developers or teammates new to React?