React Side Effects Explained: What Developers Need to Know

Imagine a function is a little machine in your code. You give it an input, it does some work, and it gives you an output.

A side effect is when this machine does more than just giving you an output. It also changes something outside of itself.

The simplest definition: A side effect is when a function changes or interacts with anything outside of its own little world.

Lets understand this with the below examples:

1. A function without side effects (Pure function)

function add(a, b) {
  return a + b;
}

const result = add(2, 3); // result is 5

What did the above function do?

• The function accepts parameters a and b.

• Adds them (a + b).

• Returns the result 5.

That's it. It didn't change anything else in your program. If you call add(2, 3) a million times, it will always return 5, and nothing else in your computer will be different. It's predictable and safe.

2. A Function With Side Effects (Impure function)

let total = 0;

function addToTotal(number) {
  total = total + number; // This is the side effect!
  return total;
}

const result = addToTotal(5); // result is 5
// The SIDE EFFECT: The outside variable 'total' is now 5.

addToTotal(10); // This time it returns 15
// The SIDE EFFECT: The outside variable 'total' is now 15.

What did the function do?

• The function took parameter as number.

• Returned total.

• But it also did something else: It changed a variable (total) that lives outside of itself.

What about in React 🤷‍♀️ ?

React components are meant to be pure:

• Take state + props as input.

• Return UI (JSX) as output.

But real apps don’t function like this. They need to :

• fetch data from an API

• set up timers

• manipulate the DOM

• handle event listeners etc.

👉 These are side effects because they affect the world outside the component’s render output.

How to handle side effects ⚠️ ?

Some side effects “linger” - like:

• An open timer (setInterval) keeps ticking forever.

• An event listener keeps listening even if the component is gone.

We can handle side effects via cleanup function. Without cleanup:

• You get memory leaks (stuff running in the background unnecessarily).

• Duplicate handlers → buggy behavior.

• Duplicate API calls.

Cleanup can be performed in this way:

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

  return () => {
    clearInterval(timer); // ⬅️ cleanup function
  };
}, []);

A cleanup function is a function you return inside useEffect to clean up or undo the side effect.

🧠 Analogy

Let’s say you’re setting a dinner table every time a guest comes (render).

If you never clean up the previous settings, soon the table is overflowing with plates.

✅ So, the cleanup is like clearing the table before setting it again.

To know more, you can visit my earlier blog.

Is cleanup optional ⚠️ ?

Yes, if your side effect does not require cleanup, then returning a cleanup function is optional.

✅ Example (no cleanup needed)

useEffect(() => {
  document.title = `Page Loaded`; // simple side effect
}, []);

No event listeners or intervals here — so no need to clean anything.

✅ When is cleanup needed?

Use cleanup when your effect:

• Sets a timer/interval (setInterval, setTimeout)

• Adds an event listener (window.addEventListener)

• Opens a subscription (e.g., WebSocket or Firebase)

Why useEffect exists?

React separates rendering UI (pure) from side effects (impure).

That’s why we put side effects in useEffect — so React can:

• Run them after rendering, not during.

• Clean them up when needed.

🧩 Summary

Thank you for reading. See yah 👋