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.