Cleaning Up Side Effects

🧼 What Does Cleaning Up Side Effects Mean?

In React, side effects are actions that happen outside the normal flow of rendering — like setting up event listeners, starting timers, or subscribing to data streams. But if you don’t clean up these effects properly, they can lead to bugs, memory leaks, and unwanted behavior. That’s why React’s useEffect hook provides a way to clean things up before the component unmounts or the effect re-runs.

🌀 The Problem with Unclean Effects

Imagine setting a timer every time a component updates, but never clearing the previous one — it causes multiple timers to run at once. Or you register a window event listener, but forget to remove it. Over time, your app will feel sluggish or behave erratically. This is where effect cleanup becomes essential.

🔁 The useEffect Cleanup Structure

React lets you return a cleanup function from your useEffect. This function runs:

• Before the component unmounts
• Before the effect re-runs (if dependencies change)

useEffect(() => {
  // setup code here

  return () => {
    // cleanup code here
  };
}, [dependencies]);

⏲️ Example 1: Cleaning Up a Timer

Let’s say you start an interval inside useEffect — you must clear it!

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

  return () => {
    clearInterval(timer);
    console.log("Timer cleared");
  };
}, []);

Why it matters: Without clearInterval, the interval keeps running in the background even after the component is gone.

📏 Example 2: Removing Event Listeners

If you add an event listener, always remove it during cleanup:

useEffect(() => {
  const handleResize = () => {
    console.log("Resized:", window.innerWidth);
  };

  window.addEventListener("resize", handleResize);

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

📡 Example 3: Cleaning Up Subscriptions

For WebSocket or API subscriptions, cleanup ensures you're not receiving stale data.

useEffect(() => {
  const socket = new WebSocket("wss://example.com/socket");

  socket.onmessage = (event) => {
    console.log("New message:", event.data);
  };

  return () => {
    socket.close();
    console.log("WebSocket closed");
  };
}, []);

💡 Best Practices

• ✅ Always use cleanup when dealing with intervals, subscriptions, or listeners.
• ✅ If you fetch data with async functions, consider aborting the request if possible.
• ✅ Keep your cleanup function concise and only undo what's necessary.

🚫 What Happens If You Don’t Clean Up?

Not cleaning up effects can lead to:

• 🧠 Memory leaks
• 🗣️ Duplicate event triggers
• ⏳ Unnecessary network calls or socket connections
• 🔁 Infinite loops or performance issues

🚀 Final Thoughts

Cleaning up side effects is like putting your tools away after working on something — it keeps your app tidy and bug-free. Whether it’s a timer, event, or subscription, always return a cleanup function from useEffect when needed. It's one of those small details that separates smooth, performant apps from messy ones. ✨🛠️