Rahul Verma - Full Stack Developer

React’s useEffect hook is one of the most powerful and commonly misunderstood tools. Whether you’re fetching data, adding event listeners, or syncing state, useEffect makes it possible.

In this post, we’ll dive deep into:

What is useEffect?

When to use it?

How it works in React & Next.js

Common patterns and pitfalls

Real-world examples

What is `useEffect`?

useEffect is a React Hook that lets you run side effects in function components. Side effects include:

Fetching data

Changing the DOM

Subscribing to events

Setting up timers


import { useEffect } from 'react';

useEffect(() => {
  // This code runs after the component mounts
});

When Should You Use `useEffect`?

Use it when:

You need to fetch data when the component mounts.

You want to run code after a render (e.g., animation triggers).

You need to listen to window or DOM events.

You want to sync external systems or APIs with React state.

Basic Syntax


useEffect(() => {
  // Side-effect logic

  return () => {
    // Cleanup (runs when the component unmounts or before next effect)
  };
}, [dependencies]);

Common Use Cases with Examples

Fetch Data on Component Mount


import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      const res = await fetch(`/api/user/${userId}`);
      const data = await res.json();
      setUser(data);
    }
    fetchUser();
  }, [userId]); // Refetch if userId changes

  if (!user) return <p>Loading...</p>;
  return <div>{user.name}</div>;
}

Add Event Listener (e.g., Window Resize)


import { useState, useEffect } from 'react';

function WindowSize() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => {
      // Clean up
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <p>Window width: {width}px</p>;
}

Set a Timer


import { useEffect } from 'react';

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

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

  return <div>Timer running...</div>;
}

Using useEffect in Next.js

Next.js is just React under the hood. useEffect works the same way, but you must not use it for SSR logic — it runs only on the client.

Example: Logging page views


import { useEffect } from 'react';

export default function Page() {
  useEffect(() => {
    console.log("Page view logged");
  }, []);

  return <h1>Welcome to the page</h1>;
}

✅ Tip: Use getServerSideProps or getStaticProps for server-side data fetching, and useEffect for client-side actions.

Common Mistakes

Forgetting the Dependency Array


useEffect(() => {
  fetchData(); // will run on every render if [] is missing
});

✅ Fix:


useEffect(() => {
  fetchData();
}, []);

Updating state without checking dependencies


useEffect(() => {
  setCounter(counter + 1);
}, [counter]);

This creates an infinite loop!

✅ Fix: use a callback or conditional logic

When Not to Use `useEffect`

Avoid using useEffect:

For logic that can be derived purely from props or state.

For synchronous updates inside render logic.

If you're trying to use it just to trigger re-renders.

Pro Tips

Always clean up subscriptions and timers to avoid memory leaks.

Use AbortController for fetch cancellation.

Break large effects into smaller specific useEffect calls.

Summary

Use case	When to use `useEffect`?
Fetch API data	On component mount or param change
Set interval or timeout	On mount, and clean up on unmount
DOM manipulation	For client-side interactions only
Event listeners	Add on mount, remove on unmount
Syncing props/state	Carefully with dependency array

Final Words

React's useEffect is a swiss-army knife — powerful but easy to misuse. Understand when and why you’re using it. When used correctly, it allows you to build dynamic, performant, and reactive applications.

Next time you add an API call or scroll listener, remember: "Does this belong in a useEffect?"

What is useEffect?

When Should You Use useEffect?