useEffect Demystified: The Hook Every React Developer Must Know

1.What is useEffect in React?

Simple Meaning

useEffect = Run some code after your component renders

That’s it at the core.

Think Like This

Imagine your React component is like a TV screen.

• First, React shows the UI (render)

• After that, you want to do some extra work:

• Fetch data

• Update something

• Start a timer

• Listen to events

That “extra work” is called a side effect

And useEffect is how you handle it

Basic Syntax

useEffect(() => {
  // your side effect code
});

Example

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("Component rendered");
  });

  return <h1>Hello</h1>;
}

This runs every time the component renders

2.What is Dependency Array in React

Core Definition

The dependency array is the second argument of useEffect:

useEffect(() => {
  // side effect
}, [dependencies]);

It tells React:

Re-run this effect only if these values change

How React Actually Uses It

Every time your component renders:

1. React checks the previous values of dependencies

2. Compares them with current values

3. If any value changed → effect runs

4. If nothing changed → effect is skipped

React uses shallow comparison (===)

Shallow Comparison(TBD)

Different Cases Explained Clearly

No Dependency Array

useEffect(() => {
  console.log("Runs every render");
});

Runs:

• On first render

• On every re-render

This can cause performance issues if heavy logic is inside.

Empty Dependency Array []

useEffect(() => {
  console.log("Runs only once");
}, []);

Runs:

• Only once (when component mounts)

Equivalent to:

• componentDidMount in class components

componentDidMount(TBD)

With Dependencies

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

Runs:

• First render

• Whenever count changes

Multiple Dependencies

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

Runs if:

• count changes OR

• user changes

3.What is Cleanup Function in React

Simple Definition

A cleanup function is used to remove or stop side effects when a component is updated or removed.

Easy Understanding

Think like this:

• You start something (timer, API, event listener)

• Later, you must stop or clean it

That “stop/cleanup” part = cleanup function

Syntax

useEffect(() => {
  // do something

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

Cleanup runs in 2 situations:

Before the effect runs again

if dependencies change

When component unmounts

removed from UI

Example 1: Timer

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

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

Without cleanup:

• Timer keeps running forever

With cleanup:

• Timer stops properly

Example 2: Event Listener

useEffect(() => {
  const handleResize = () => {
    console.log("Window resized");
  };

  window.addEventListener("resize", handleResize);

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

Why Cleanup is Important

Without cleanup:

• Memory leaks

• Duplicate events

• Performance issues

4.What is Component Lifecycle in React.

Simple Definition

Component lifecycle = the different stages a React component goes through from creation to removal.

3 Main Phases of Lifecycle

1.Mounting Phase (Birth)

Component is created and shown on the screen

What happens:

• Component initializes

• JSX renders

• Appears in UI

Example:

useEffect(() => {
  console.log("Component mounted");
}, []);

Runs only once

2.Updating Phase (Life)

Component updates when:

• State changes

• Props change

Example:

useEffect(() => {
  console.log("Component updated");
}, [count]);

Runs when count changes

Unmounting Phase (Death)

Component is removed from the UI

Example:

useEffect(() => {
  return () => {
    console.log("Component unmounted");
  };
}, []);

Cleanup runs when component is removed

5.Final Takeaway

Control when your effect runs, clean up after it, and always keep your component in sync with state and props.