React useEffect Hook Cheat Sheet

What is `useEffect`?

A React Hook for side effects like data fetching, DOM manipulation, timers, and more.

import { useEffect } from "react";

Basic Usage

useEffect(() => {
  // Code runs after every render
});

Run Once on Mount (like `componentDidMount`)

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

Run When Dependencies Change

useEffect(() => {
  console.log(`Count is now ${count}`);
}, [count]);

• Runs on mount and when count changes.

Cleanup Function (like `componentWillUnmount`)

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

  return () => {
    clearInterval(timer);
    console.log("Cleaned up");
  };
}, []);

Fetching Data

useEffect(() => {
  async function fetchData() {
    const res = await fetch("/api/data");
    const json = await res.json();
    setData(json);
  }

  fetchData();
}, []);

Common Patterns

Conditional Effect

useEffect(() => {
  if (!user) return;
  // Run only if user exists
}, [user]);

Watching Multiple Dependencies

useEffect(() => {
  // Responds to either `a` or `b` changes
}, [a, b]);