What is useEffect? Side Effects in React

React component functions are supposed to be pure — given the same props and state, they should return the same JSX, with no observable side effects during rendering. But real applications cannot be purely functional: they need to fetch data from servers, update the browser tab title, set up WebSocket connections, and read from localStorage. These are side effects — operations that interact with the world outside React’s rendering system. The useEffect hook is how React lets you run side effects safely, after rendering, in a controlled way. Understanding this — what a side effect is, why it cannot run during render, and what useEffect provides — is the foundation for every data-fetching, event-listening, and timer-based feature in your MERN Blog.

What Is a Side Effect? #

useEffect Syntax #

import { useEffect } from 'react';

// Basic form
useEffect(
  () => {
    // Side effect code runs here — after render
    // ...
    return () => {
      // Optional cleanup function — runs before the next effect or on unmount
    };
  },
  [/* dependency array */]
);

The Three Dependency Array Forms #

// 1. No dependency array — runs after EVERY render
useEffect(() => {
  console.log('Rendered!'); // runs on every render — rarely what you want
});

// 2. Empty array — runs ONCE after the initial render (mount)
useEffect(() => {
  console.log('Component mounted!'); // runs once — fetch initial data here
}, []);

// 3. Array with values — runs when those values change
useEffect(() => {
  console.log(`Page changed to: ${page}`); // runs on mount and when page changes
}, [page]);

The React Component Lifecycle — with useEffect #

Component Lifecycle (Function Component)

Mount:
  1. Component function runs → JSX returned → DOM updated
  2. useEffect(fn, []) runs → initial data fetch, event listeners, etc.

Update (state or prop changes):
  1. Component function runs again → new JSX → DOM updated
  2. useEffect cleanup runs for effects whose dependencies changed
  3. useEffect(fn, [dep]) runs again if dep changed

Unmount (component removed from tree):
  1. useEffect cleanup functions run → cancel requests, clear timers, remove listeners
  2. Component is removed from DOM

Simple useEffect Examples #

// ── Update document title ──────────────────────────────────────────────────────
function PostPage({ post }) {
  useEffect(() => {
    if (post) {
      document.title = `${post.title} | MERN Blog`; // side effect
    }
    return () => {
      document.title = 'MERN Blog'; // cleanup: reset on unmount
    };
  }, [post]); // re-run when post changes

  return <article><h1>{post?.title}</h1></article>;
}

// ── Simple mount-only effect ───────────────────────────────────────────────────
function Analytics() {
  useEffect(() => {
    // Track page view — runs once on mount
    analytics.track('page_view', { page: window.location.pathname });
  }, []); // empty deps — runs once only

  return null;
}

// ── Sync state to localStorage ────────────────────────────────────────────────
function ThemeToggle() {
  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');

  useEffect(() => {
    localStorage.setItem('theme', theme);
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]); // sync whenever theme changes

  return (
    <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
      {theme === 'light' ? '🌙 Dark' : '☀️ Light'}
    </button>
  );
}

Common Mistakes #

Mistake 1 — Running a side effect directly in the component body #

❌ Wrong — API call during render causes infinite loops or duplicated requests:

function PostList() {
  const [posts, setPosts] = useState([]);
  // This runs on EVERY render — including the render caused by setPosts!
  fetch('/api/posts').then(r => r.json()).then(d => setPosts(d.data));
  return <div>...</div>;
}

✅ Correct — put the fetch inside useEffect:

function PostList() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    fetch('/api/posts').then(r => r.json()).then(d => setPosts(d.data));
  }, []); // ✓ runs once after mount
  return <div>...</div>;
}

Mistake 2 — Using async directly as the useEffect callback #

❌ Wrong — useEffect callback cannot be async:

useEffect(async () => { // ← async function returns a Promise, not a cleanup function
  const data = await fetch('/api/posts');
}, []);

✅ Correct — define an async function inside and call it:

useEffect(() => {
  const fetchPosts = async () => {
    const res  = await fetch('/api/posts');
    const data = await res.json();
    setPosts(data.data);
  };
  fetchPosts(); // call the async function
}, []); // ✓ outer callback is synchronous

Mistake 3 — Forgetting that StrictMode double-invokes effects #

❌ Wrong — effect creates a resource but cleanup does not release it:

useEffect(() => {
  const ws = new WebSocket('wss://api.example.com');
  // No cleanup — StrictMode creates two WebSocket connections in development!
}, []);

✅ Correct — always clean up resources the effect creates:

useEffect(() => {
  const ws = new WebSocket('wss://api.example.com');
  return () => ws.close(); // ✓ cleanup closes the connection
}, []);

Quick Reference #