React useEffect Hook

⏱ Estimated reading time: 2 min

The useEffect hook lets you perform side effects in functional components. Side effects include data fetching, subscriptions, timers, DOM updates, and logging.

What is useEffect?

• Runs after render

• Replaces lifecycle methods like
  componentDidMount, componentDidUpdate, and componentWillUnmount

• Helps keep side-effect logic organized

Basic Syntax

import { useEffect } from "react";

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

1. Run on Every Render

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

• No dependency array

• Runs after every render

2. Run Once (On Mount)

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

• Empty dependency array

• Runs only once when component mounts

3. Run When Dependencies Change

useEffect(() => {
  console.log("Count changed:", count);
}, [count]);

• Runs when count changes

Common Use Cases

Fetching Data

useEffect(() => {
  fetch("https://api.example.com/users")
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

Updating Document Title

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

Timers

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

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

Cleanup Function

Use cleanup to avoid memory leaks.

useEffect(() => {
  window.addEventListener("resize", handleResize);

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

Dependency Array Rules

• Include all values used inside useEffect

• React compares dependencies using shallow comparison

• Missing dependencies can cause bugs

Common Mistakes

❌ Forgetting dependency array
❌ Incorrect dependencies
❌ Infinite loops due to state updates

Best Practices

• Use multiple useEffect hooks for different logic

• Keep effects small and focused

• Always clean up subscriptions and timers

Key Points

• useEffect handles side effects

• Dependency array controls when it runs

• Cleanup prevents memory leaks

• Essential for real-world React apps