Day 4 of #100DaysOfCode — Mastering useEffect in React

Understanding useEffect in React is like unlocking a magical spellbook, suddenly you can summon APIs, tame event listeners, and command the DOM.
It’s the key to handling side effects, keeping your UI consistent, and writing logic that reacts to data changes.

In today’s challenge, I dug deep into useEffect: why it exists, how it works, and how to avoid the dreaded infinite loops.
Here’s a clear and practical breakdown.

---

What Are Side Effects in React?

Side effects are any actions your component performs outside the normal rendering process.
React’s render cycle must remain predictable and pure—but many real tasks aren’t pure at all, such as:

• Fetching data from an API
• Updating document.title
• Working with timers (setTimeout, setInterval)
• Using browser APIs like localStorage
• Adding event listeners
• Subscribing to WebSockets

These actions affect the world outside your component—those are side effects.

---

🤔 Why Do React Components Even Need useEffect?

Isn’t useState enough?

useState updates your UI.
useEffect handles everything outside your UI.

If React allowed side effects during rendering, you’d get unpredictable behavior and potentially infinite loops. React must render → compare → update in a pure, deterministic way.

useEffect runs after React paints the screen, keeping the render pure and safe.

---

Three Types of useEffect Behavior

1️⃣ No Dependency Array: Runs on every render

useEffect(() => {
  console.log("I run after every render");
});

When to use:

Rarely.
This triggers on initial mount + every re-render, which can cause performance issues or infinite loops.

---

2️⃣ Empty Dependency Array []: Runs only once (on mount)

useEffect(() => {
  console.log("I run only once when the component mounts");
}, []);

When to use:

• Fetch API data on mount
• Setup once (listeners, subscriptions, timers)
• Initialize state from localStorage

This makes the effect behave like:
componentDidMount in class components.

---

3️⃣ Dependency-Based: Runs when dependencies change

useEffect(() => {
  console.log("I run when count changes");
}, [count]);

When to use:

• Syncing state with props
• Triggering re-fetching when filters change
• Updating UI or document title
• Running logic when some value updates

This is the most common and most powerful usage.

---

How Does the Dependency Array Actually Work?

The array tells React:

“Run this effect only if any of these values change from the previous render.”

React compares each dependency with its previous value using shallow comparison.

Example:

useEffect(() => {
  console.log("Runs when userId changes");
}, [userId]);

If userId goes from 1 → 2, the effect runs.

Important:

• Objects, arrays, and functions always change reference unless memoized
• This can cause unintentionally frequent effect runs

---

How to Avoid Infinite Loops in useEffect

The most common cause:

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

What happens?

• Setting state triggers re-render
• Dependencies detect change
• Effect runs again
• State updates
• Loop forever

How to prevent:

• Avoid updating state inside the effect based on its own dependency
• Use functional updates instead:

setCount(prev => prev + 1);

• Or restructure logic to avoid state → effect → state loops.

---

Cleanup Functions: What They Are and Why We Need Them

Cleanup functions run before the effect runs again or when the component unmounts.

Syntax:

useEffect(() => {
  console.log("Effect started");

  return () => {
    console.log("Cleanup before re-run or unmount");
  };
}, []);

Used for cleaning:

• Event listeners
• Subscriptions (WebSockets, Firebase, etc.)
• Intervals and timeouts
• Removing observers
• Aborting fetch requests

Example (listener cleanup):

useEffect(() => {
  const handleResize = () => console.log("Resized");

  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

Without cleanup → memory leaks.

---

Real-World Use Cases of useEffect

---

1. Fetching API Data

useEffect(() => {
  async function loadData() {
    const res = await fetch("https://api.example.com/data");
    const data = await res.json();
    setItems(data);
  }
  loadData();
}, []);

---

2. Updating Document Title

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

---

3. Timers

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Tick");
  }, 1000);

  return () => clearInterval(timer);
}, []);

---

4. Adding Event Listeners

useEffect(() => {
  const handler = () => console.log("Clicked");

  window.addEventListener("click", handler);

  return () => window.removeEventListener("click", handler);
}, []);

---

5. Working with localStorage

Save to storage whenever value changes:

useEffect(() => {
  localStorage.setItem("name", name);
}, [name]);

Load once on mount:

useEffect(() => {
  const saved = localStorage.getItem("name");
  if (saved) setName(saved);
}, []);

---

Summary

Concept	Meaning
Side effects	Actions outside rendering (API, timers, listeners)
Why useEffect	Keeps render pure, runs effects after UI update
No dependency	Runs on every render
Empty array	Runs once on mount
Dependency array	Runs when listed values change
Cleanup	Unsubscribes, removes listeners, clears timers
Use cases	API calls, title updates, listeners, timers, storage

---

Final Thoughts

Learning useEffect is a turning point in becoming comfortable with React.
It powers almost all real app functionality—from fetching data to syncing your UI with the outside world.

A deeper comprehension of useEffect supports the creation of components that scale gracefully as application complexity grows.

If you're learning too, feel free to share your thoughts or questions below! 👇

Happy coding!