React · Hooks (Comprehensive)

useEffect Hook

Master the useEffect Hook for synchronizing components with external systems, handling side effects, and managing component lifecycle.

Find videos you like?

Save to resource drawer for future reference!

What is useEffect?

Running side effects in React

useEffect lets you perform side effects in function components. Side effects are operations that affect things outside the component - like data fetching, subscriptions, or manually changing the DOM.

Syntax

useEffect(() => {

// Effect code (setup)

return () => {

// Cleanup code (optional)

};

}, [dependencies]);

Setup

Code that runs after render to start the effect

Cleanup

Optional function to clean up before re-running or unmounting

Dependencies

Array of values that trigger effect re-run when changed

When Does It Run?

Effects run after render, allowing React to update the screen first. Then your effect code runs!

Step-by-Step Guide

Learn useEffect progressively

Step 1: Import useEffect

First, import useEffect from React at the top of your component file.

import React, { useEffect } from 'react';

Pro Tip

You can import multiple hooks at once: { useState, useEffect, useContext }.

Step 2: Basic useEffect Syntax

Use useEffect with a function that contains your side effect code.

useEffect(() => {}

console.log('Component mounted or updated');

document.title = 'New Title';

});

Key Point

This effect runs after every render. Use dependency arrays to control when it runs!

Step 3: Add Dependency Array

Control when your effect runs by adding a dependency array as the second argument.

useEffect(() => {}

console.log('Count changed:', count);

}), [count]); // Only runs when count changes

Important

Empty array [] = runs once on mount. Include dependencies to re-run when they change!

Step 4: Add Cleanup Function

Return a cleanup function to prevent memory leaks and handle cleanup.

useEffect(() => {}

const timer = setInterval(() => {}

console.log('Tick');

}), 1000);

return () => {}

clearInterval(timer); // Cleanup

});

}), []); // Empty array = run once

Key Point

Cleanup runs before the next effect and when component unmounts. Perfect for subscriptions!

Example 1: Fetching Data

useEffect with API calls

User Data Fetcher

Fetch data when component mounts

Frontend

function UserProfile() {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  // Effect runs after first render
  React.useEffect(() => {
    setLoading(true);
    
    // Simulate API call
    setTimeout(() => {
      const mockUser = {
        name: 'John Doe',
        email: 'john@example.com',
        role: 'Developer'
      };
      setUser(mockUser);
      setLoading(false);
    }, 1500);
  }, []); // Empty array = run once on mount

  return (
    <div className="container">
      <h1>👤 User Profile</h1>

      {loading ? (
        <div className="loading">
          <div className="spinner"></div>
          <p>Loading user data...</p>
        </div>
      ) : (
        <div className="profile">
          <div className="avatar">
            {user.name.charAt(0)}
          </div>
          <div className="info">
            <h2>{user.name}</h2>
            <p className="email">{user.email}</p>
            <span className="role">{user.role}</span>
          </div>
        </div>
      )}

      <div className="info-box">
        💡 useEffect with empty [] runs once on mount
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<UserProfile />);

Live Preview

Loading preview...

The Dependency Array

Controlling when effects run

No Array

Runs After Every Render

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

⚠️ Usually not what you want - can cause performance issues!

Empty []

Runs Once on Mount

useEffect(() => { /* runs once */ }, []);

✅ Perfect for data fetching, subscriptions that don't change

With Dependencies

Runs When Dependencies Change

useEffect(() => { /* runs when id changes */ }, [id]);

✅ Re-fetch data when props/state change

Example 2: Effect with Cleanup

Preventing memory leaks

Live Clock

Cleanup stops the timer when unmounting

Frontend

function LiveClock() {
  const [time, setTime] = React.useState(new Date());
  const [isRunning, setIsRunning] = React.useState(true);

  React.useEffect(() => {
    if (!isRunning) return;

    // Setup: Start interval
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // Cleanup: Stop interval
    return () => {
      clearInterval(interval);
    };
  }, [isRunning]);

  const hours = time.getHours().toString().padStart(2, '0');
  const minutes = time.getMinutes().toString().padStart(2, '0');
  const seconds = time.getSeconds().toString().padStart(2, '0');

  return (
    <div className="container">
      <h1>⏰ Live Clock</h1>

      <div className="clock">
        <div className="time">{hours}:{minutes}:{seconds}</div>
        <div className="date">{time.toLocaleDateString()}</div>
      </div>

      <button
        onClick={() => setIsRunning(!isRunning)}
        className="btn-toggle"
      >
        {isRunning ? 'Pause' : 'Start'} Clock
      </button>

      <div className="info-box">
        <h3>✨ Cleanup Function:</h3>
        <p>Prevents memory leaks by clearing the interval when component unmounts or effect re-runs</p>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<LiveClock />);

Live Preview

Loading preview...

Key Takeaways

Remember these important points

After Render

Effects run after render, not during. This keeps rendering fast!

Cleanup Required

Return a cleanup function to prevent memory leaks from timers, subscriptions, etc.

Dependency Array

Always include values from component scope that the effect uses in the dependency array.

External Systems

Use for fetching data, subscriptions, timers, and DOM manipulation.

Most Powerful Hook!

useEffect is essential for connecting React components to external systems. Master it to build real-world applications!

Previous Topic

useState Deep Dive

Advanced useState patterns: functional updates, lazy initialization, and performance considerations.

Next Topic

Why Use Effect?

Understand the fundamental need for useEffect, when side effects are necessary, and the philosophy behind effect-driven programming.

Ask a Question

Have a question about useEffect Deep Dive? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Hooks (Comprehensive)

useEffect Hook

Master the useEffect Hook for synchronizing components with external systems, handling side effects, and managing component lifecycle.

Find videos you like?

Save to resource drawer for future reference!

What is useEffect?

Running side effects in React

Syntax

useEffect(() => {

// Effect code (setup)

return () => {

// Cleanup code (optional)

};

}, [dependencies]);

Setup

Code that runs after render to start the effect

Cleanup

Optional function to clean up before re-running or unmounting

Dependencies

Array of values that trigger effect re-run when changed

When Does It Run?

Effects run after render, allowing React to update the screen first. Then your effect code runs!

Step-by-Step Guide

Learn useEffect progressively

Step 1: Import useEffect

First, import useEffect from React at the top of your component file.

import React, { useEffect } from 'react';

Pro Tip

You can import multiple hooks at once: { useState, useEffect, useContext }.

Step 2: Basic useEffect Syntax

Use useEffect with a function that contains your side effect code.

useEffect(() => {}

console.log('Component mounted or updated');

document.title = 'New Title';

});

Key Point

This effect runs after every render. Use dependency arrays to control when it runs!

Step 3: Add Dependency Array

Control when your effect runs by adding a dependency array as the second argument.

useEffect(() => {}

console.log('Count changed:', count);

}), [count]); // Only runs when count changes

Important

Empty array [] = runs once on mount. Include dependencies to re-run when they change!

Step 4: Add Cleanup Function

Return a cleanup function to prevent memory leaks and handle cleanup.

useEffect(() => {}

const timer = setInterval(() => {}

console.log('Tick');

}), 1000);

return () => {}

clearInterval(timer); // Cleanup

});

}), []); // Empty array = run once

Key Point

Cleanup runs before the next effect and when component unmounts. Perfect for subscriptions!

Example 1: Fetching Data

useEffect with API calls

User Data Fetcher

Fetch data when component mounts

Frontend

function UserProfile() {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  // Effect runs after first render
  React.useEffect(() => {
    setLoading(true);
    
    // Simulate API call
    setTimeout(() => {
      const mockUser = {
        name: 'John Doe',
        email: 'john@example.com',
        role: 'Developer'
      };
      setUser(mockUser);
      setLoading(false);
    }, 1500);
  }, []); // Empty array = run once on mount

  return (
    <div className="container">
      <h1>👤 User Profile</h1>

      {loading ? (
        <div className="loading">
          <div className="spinner"></div>
          <p>Loading user data...</p>
        </div>
      ) : (
        <div className="profile">
          <div className="avatar">
            {user.name.charAt(0)}
          </div>
          <div className="info">
            <h2>{user.name}</h2>
            <p className="email">{user.email}</p>
            <span className="role">{user.role}</span>
          </div>
        </div>
      )}

      <div className="info-box">
        💡 useEffect with empty [] runs once on mount
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<UserProfile />);

Live Preview

Loading preview...

The Dependency Array

Controlling when effects run

No Array

Runs After Every Render

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

⚠️ Usually not what you want - can cause performance issues!

Empty []

Runs Once on Mount

useEffect(() => { /* runs once */ }, []);

✅ Perfect for data fetching, subscriptions that don't change

With Dependencies

Runs When Dependencies Change

useEffect(() => { /* runs when id changes */ }, [id]);

✅ Re-fetch data when props/state change

Example 2: Effect with Cleanup

Preventing memory leaks

Live Clock

Cleanup stops the timer when unmounting

Frontend

function LiveClock() {
  const [time, setTime] = React.useState(new Date());
  const [isRunning, setIsRunning] = React.useState(true);

  React.useEffect(() => {
    if (!isRunning) return;

    // Setup: Start interval
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // Cleanup: Stop interval
    return () => {
      clearInterval(interval);
    };
  }, [isRunning]);

  const hours = time.getHours().toString().padStart(2, '0');
  const minutes = time.getMinutes().toString().padStart(2, '0');
  const seconds = time.getSeconds().toString().padStart(2, '0');

  return (
    <div className="container">
      <h1>⏰ Live Clock</h1>

      <div className="clock">
        <div className="time">{hours}:{minutes}:{seconds}</div>
        <div className="date">{time.toLocaleDateString()}</div>
      </div>

      <button
        onClick={() => setIsRunning(!isRunning)}
        className="btn-toggle"
      >
        {isRunning ? 'Pause' : 'Start'} Clock
      </button>

      <div className="info-box">
        <h3>✨ Cleanup Function:</h3>
        <p>Prevents memory leaks by clearing the interval when component unmounts or effect re-runs</p>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<LiveClock />);

Live Preview

Loading preview...

Key Takeaways

Remember these important points

After Render

Effects run after render, not during. This keeps rendering fast!

Cleanup Required

Return a cleanup function to prevent memory leaks from timers, subscriptions, etc.

Dependency Array

Always include values from component scope that the effect uses in the dependency array.

External Systems

Use for fetching data, subscriptions, timers, and DOM manipulation.

Most Powerful Hook!

useEffect is essential for connecting React components to external systems. Master it to build real-world applications!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

useState Deep Dive

Why Use Effect?

Building Your Learning Module...

useEffect Hook

Syntax

Setup

Cleanup

Dependencies

When Does It Run?

Step 1: Import useEffect

Step 2: Basic useEffect Syntax

Step 3: Add Dependency Array

Step 4: Add Cleanup Function

User Data Fetcher

Runs After Every Render

Runs Once on Mount

Runs When Dependencies Change

Live Clock

After Render

Cleanup Required

Dependency Array

External Systems

Most Powerful Hook!

useState Deep Dive

Why Use Effect?

useEffect Hook

Syntax

Setup

Cleanup

Dependencies

When Does It Run?

Step 1: Import useEffect

Step 2: Basic useEffect Syntax

Step 3: Add Dependency Array

Step 4: Add Cleanup Function

User Data Fetcher

Runs After Every Render

Runs Once on Mount

Runs When Dependencies Change

Live Clock

After Render

Cleanup Required

Dependency Array

External Systems

Most Powerful Hook!