React · Hooks (Fundamentals)

Why Use Effect?

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

Find videos you like?

Save to resource drawer for future reference!

What Are Side Effects?

Understanding operations outside React's control

In React, a side effect is any operation that affects something outside the component's render cycle. React components are meant to be pure - they take props and state and return UI. Side effects break this purity by interacting with the external world.

Data Fetching

API calls, database queries, network requests

Timers

setTimeout, setInterval, countdown logic

DOM Manipulation

Direct DOM access, focus management, measurements

Subscriptions

WebSockets, event listeners, observables

Browser APIs

localStorage, geolocation, notifications

Analytics

Tracking, logging, metrics collection

Pure vs Impure

React components should be pure (same input → same output). Side effects make components impure - they need special handling!

The Problem: Without Effects

What happens when we try side effects in render?

❌ Wrong: Side Effect During Render

This causes infinite loops and performance issues

Frontend

function BrokenCounter() {
  const [count, setCount] = React.useState(0);

  // ❌ WRONG: Side effect during render!
  // This runs every time the component renders
  document.title = `Count: ${count}`;
  
  // This causes infinite loop:
  // 1. Component renders
  // 2. Side effect runs
  // 3. setCount triggers re-render
  // 4. Go back to step 1
  if (count < 10) {
    setCount(count + 1);
  }

  return (
    <div className="container">
      <h1>🚨 Broken Counter</h1>
      <p>This component has serious issues!</p>
      <div className="counter">{count}</div>
      <div className="error">
        <h3>⚠️ Problems:</h3>
        <ul>
          <li>Infinite re-render loop</li>
          <li>Performance degradation</li>
          <li>Unpredictable behavior</li>
          <li>Memory leaks</li>
        </ul>
      </div>
    </div>
  );
}

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

Live Preview

Loading preview...

The Solution: With Effects

useEffect separates rendering from side effects

✅ Correct: Side Effect with useEffect

Clean separation of concerns and proper lifecycle

Frontend

function CorrectCounter() {
  const [count, setCount] = React.useState(0);
  const [isRunning, setIsRunning] = React.useState(true);

  // ✅ CORRECT: Side effect in useEffect
  React.useEffect(() => {
    // This runs AFTER render, not during
    document.title = `Count: ${count}`;
  }, [count]); // Only runs when count changes

  // ✅ CORRECT: Timer in useEffect with cleanup
  React.useEffect(() => {
    if (!isRunning) return;

    const interval = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    // Cleanup function
    return () => clearInterval(interval);
  }, [isRunning]);

  return (
    <div className="container">
      <h1>✅ Correct Counter</h1>
      <p>Check the browser tab title!</p>
      
      <div className="counter">{count}</div>
      
      <button
        onClick={() => setIsRunning(!isRunning)}
        className="btn-toggle"
      >
        {isRunning ? 'Pause' : 'Start'}
      </button>

      <div className="success">
        <h3>✅ Benefits:</h3>
        <ul>
          <li>Controlled execution</li>
          <li>Proper cleanup</li>
          <li>Performance optimized</li>
          <li>Predictable behavior</li>
        </ul>
      </div>
    </div>
  );
}

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

Live Preview

Loading preview...

When Do You Need Effects?

Common scenarios that require useEffect

Data Synchronization

• Fetch data when component mounts
• Re-fetch when props/state change
• Sync with external data sources
• Real-time data updates

Time-based Operations

• Debouncing user input
• Throttling API calls
• Countdown timers
• Scheduled updates

DOM & Browser APIs

• Managing focus
• Measuring element dimensions
• Scroll position control
• Canvas/SVG manipulation

Subscriptions & Events

• WebSocket connections
• Browser event listeners
• Keyboard shortcuts
• Window resize handlers

External Integrations

• Third-party library initialization
• Payment gateway setup
• Analytics tracking
• Authentication state

Performance & Optimization

• Lazy loading resources
• Preloading data
• Caching strategies
• Background processing

The Philosophy Behind Effects

Understanding React's mental model

🎯 Single Responsibility

Rendering and side effects have different responsibilities. useEffect enforces this separation by moving side effects out of the render cycle.

⏰ Timing Control

Effects run after React has updated the DOM. This prevents layout thrashing and ensures the UI is ready before side effects execute.

🧹 Predictable Cleanup

The cleanup function pattern ensures resources are released properly, preventing memory leaks and race conditions.

🔄 Declarative Synchronization

Instead of imperative "when this happens, do that," useEffect lets you declare "keep this in sync with that."

React's Way of Thinking

useEffect embodies React's philosophy: describe what you want, not how to do it. Tell React which data your effect depends on, and React handles the execution timing.

Key Takeaways

Remember these fundamental concepts

Side Effects Are External

Anything affecting the world outside React's render cycle needs useEffect.

Effects Run After Render

This ensures the UI is updated before side effects execute, preventing visual glitches.

Dependencies Control Execution

The dependency array tells React when to re-run your effect based on data changes.

Cleanup Prevents Leaks

Always return a cleanup function for subscriptions, timers, and external resources.

Foundation of React

useEffect is not just a hook - it's React's solution to the fundamental challenge of connecting pure components to the impure outside world. Master it to build robust React applications!

Previous Topic

useEffect Deep Dive

Master useEffect: cleanup functions, dependency arrays, effects lifecycle, and common patterns.

Next Topic

useReducer Hook

Advanced useReducer patterns, complex state logic, actions, dispatch, and comparing with useState.

Ask a Question

Have a question about Why Use Effect?? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Hooks (Fundamentals)

Why Use Effect?

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

Find videos you like?

Save to resource drawer for future reference!

What Are Side Effects?

Understanding operations outside React's control

Data Fetching

API calls, database queries, network requests

Timers

setTimeout, setInterval, countdown logic

DOM Manipulation

Direct DOM access, focus management, measurements

Subscriptions

WebSockets, event listeners, observables

Browser APIs

localStorage, geolocation, notifications

Analytics

Tracking, logging, metrics collection

Pure vs Impure

React components should be pure (same input → same output). Side effects make components impure - they need special handling!

The Problem: Without Effects

What happens when we try side effects in render?

❌ Wrong: Side Effect During Render

This causes infinite loops and performance issues

Frontend

function BrokenCounter() {
  const [count, setCount] = React.useState(0);

  // ❌ WRONG: Side effect during render!
  // This runs every time the component renders
  document.title = `Count: ${count}`;
  
  // This causes infinite loop:
  // 1. Component renders
  // 2. Side effect runs
  // 3. setCount triggers re-render
  // 4. Go back to step 1
  if (count < 10) {
    setCount(count + 1);
  }

  return (
    <div className="container">
      <h1>🚨 Broken Counter</h1>
      <p>This component has serious issues!</p>
      <div className="counter">{count}</div>
      <div className="error">
        <h3>⚠️ Problems:</h3>
        <ul>
          <li>Infinite re-render loop</li>
          <li>Performance degradation</li>
          <li>Unpredictable behavior</li>
          <li>Memory leaks</li>
        </ul>
      </div>
    </div>
  );
}

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

Live Preview

Loading preview...

The Solution: With Effects

useEffect separates rendering from side effects

✅ Correct: Side Effect with useEffect

Clean separation of concerns and proper lifecycle

Frontend

function CorrectCounter() {
  const [count, setCount] = React.useState(0);
  const [isRunning, setIsRunning] = React.useState(true);

  // ✅ CORRECT: Side effect in useEffect
  React.useEffect(() => {
    // This runs AFTER render, not during
    document.title = `Count: ${count}`;
  }, [count]); // Only runs when count changes

  // ✅ CORRECT: Timer in useEffect with cleanup
  React.useEffect(() => {
    if (!isRunning) return;

    const interval = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    // Cleanup function
    return () => clearInterval(interval);
  }, [isRunning]);

  return (
    <div className="container">
      <h1>✅ Correct Counter</h1>
      <p>Check the browser tab title!</p>
      
      <div className="counter">{count}</div>
      
      <button
        onClick={() => setIsRunning(!isRunning)}
        className="btn-toggle"
      >
        {isRunning ? 'Pause' : 'Start'}
      </button>

      <div className="success">
        <h3>✅ Benefits:</h3>
        <ul>
          <li>Controlled execution</li>
          <li>Proper cleanup</li>
          <li>Performance optimized</li>
          <li>Predictable behavior</li>
        </ul>
      </div>
    </div>
  );
}

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

Live Preview

Loading preview...

When Do You Need Effects?

Common scenarios that require useEffect

Data Synchronization

• Fetch data when component mounts
• Re-fetch when props/state change
• Sync with external data sources
• Real-time data updates

Time-based Operations

• Debouncing user input
• Throttling API calls
• Countdown timers
• Scheduled updates

DOM & Browser APIs

• Managing focus
• Measuring element dimensions
• Scroll position control
• Canvas/SVG manipulation

Subscriptions & Events

• WebSocket connections
• Browser event listeners
• Keyboard shortcuts
• Window resize handlers

External Integrations

• Third-party library initialization
• Payment gateway setup
• Analytics tracking
• Authentication state

Performance & Optimization

• Lazy loading resources
• Preloading data
• Caching strategies
• Background processing

The Philosophy Behind Effects

Understanding React's mental model

🎯 Single Responsibility

Rendering and side effects have different responsibilities. useEffect enforces this separation by moving side effects out of the render cycle.

⏰ Timing Control

Effects run after React has updated the DOM. This prevents layout thrashing and ensures the UI is ready before side effects execute.

🧹 Predictable Cleanup

The cleanup function pattern ensures resources are released properly, preventing memory leaks and race conditions.

🔄 Declarative Synchronization

Instead of imperative "when this happens, do that," useEffect lets you declare "keep this in sync with that."

React's Way of Thinking

useEffect embodies React's philosophy: describe what you want, not how to do it. Tell React which data your effect depends on, and React handles the execution timing.

Key Takeaways

Remember these fundamental concepts

Side Effects Are External

Anything affecting the world outside React's render cycle needs useEffect.

Effects Run After Render

This ensures the UI is updated before side effects execute, preventing visual glitches.

Dependencies Control Execution

The dependency array tells React when to re-run your effect based on data changes.

Cleanup Prevents Leaks

Always return a cleanup function for subscriptions, timers, and external resources.

Foundation of React

useEffect is not just a hook - it's React's solution to the fundamental challenge of connecting pure components to the impure outside world. Master it to build robust React applications!

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

useEffect Deep Dive

useReducer Hook

Building Your Learning Module...

Why Use Effect?

Data Fetching

Timers

DOM Manipulation

Subscriptions

Browser APIs

Analytics

Pure vs Impure

❌ Wrong: Side Effect During Render

✅ Correct: Side Effect with useEffect

Data Synchronization

Time-based Operations

DOM & Browser APIs

Subscriptions & Events

External Integrations

Performance & Optimization

🎯 Single Responsibility

⏰ Timing Control

🧹 Predictable Cleanup

🔄 Declarative Synchronization

React's Way of Thinking

Side Effects Are External

Effects Run After Render

Dependencies Control Execution

Cleanup Prevents Leaks

Foundation of React

useEffect Deep Dive

useReducer Hook

Why Use Effect?

Data Fetching

Timers

DOM Manipulation

Subscriptions

Browser APIs

Analytics

Pure vs Impure

❌ Wrong: Side Effect During Render

✅ Correct: Side Effect with useEffect

Data Synchronization

Time-based Operations

DOM & Browser APIs

Subscriptions & Events

External Integrations

Performance & Optimization

🎯 Single Responsibility

⏰ Timing Control

🧹 Predictable Cleanup

🔄 Declarative Synchronization

React's Way of Thinking

Side Effects Are External

Effects Run After Render

Dependencies Control Execution

Cleanup Prevents Leaks

Foundation of React