Explain the useEffect Hook with Examples

💡 Concept Name

useEffect is a React hook that lets you perform side effects in functional components such as data fetching, subscriptions, or manually changing the DOM.

📘 Quick Intro

The useEffect hook manages side effects in functional components, replacing lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components.

🧠 Analogy / Short Story

Think of useEffect as the cleanup crew and event manager of your app. It handles setup tasks when a component appears, such as starting data fetching or event listeners, and cleans up when the component disappears, like unsubscribing or clearing timers.

🔧 Technical Explanation

⏳ Runs after every completed render by default.
⚙️ Accepts a function that can optionally return a cleanup function.
🎯 The dependency array controls when the effect runs: empty array runs once, dependencies trigger re-run when changed.
🚫 Prevents memory leaks by cleaning subscriptions or timers on unmount.

💻 Real Code Example


// Example: Fetch data on mount and cleanup on unmount
import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data on mount
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json));

    // Cleanup function to run on unmount
    return () => {
      console.log('Cleanup: aborting fetch or clearing subscriptions');
    };
  }, []); // Empty dependency array means run once on mount

  return (
    <div>
      <h3>Fetched Data:</h3>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

❓ Interview Q&A

Q1: What is the useEffect hook used for?
A: It manages side effects like data fetching, subscriptions, and manual DOM updates in functional components.

Q2: When does useEffect run?
A: By default, it runs after every render, but the dependency array controls when it runs.

Q3: What does the dependency array do?
A: It determines when the effect should re-run, based on changes in dependencies.

Q4: How do you perform cleanup in useEffect?
A: By returning a cleanup function from the effect callback.

Q5: Can useEffect replace lifecycle methods?
A: Yes, it replaces componentDidMount, componentDidUpdate, and componentWillUnmount in functional components.

Q6: What happens if the dependency array is empty?
A: The effect runs only once after the initial render.

Q7: Can you have multiple useEffect hooks in a component?
A: Yes, you can use multiple effects for different concerns.

Q8: How do you avoid memory leaks with useEffect?
A: By cleaning up subscriptions or timers in the cleanup function.

Q9: Is useEffect synchronous or asynchronous?
A: The effect function runs synchronously after rendering but can contain async operations inside.

Q10: Can useEffect cause performance issues?
A: Yes, if dependencies are not managed correctly, it can cause unnecessary re-renders.

📝 MCQs

Q1. What is the primary use of useEffect?

Manage state
Handle events
Manage side effects like data fetching
Style components

Q2. When does useEffect run by default?

Before render
After every render
Only on mount
Only on unmount

Q3. What controls when useEffect runs?

State
Props
Dependency array
Component name

Q4. How do you clean up in useEffect?

Call a method
Return a cleanup function
Use useState
Do nothing

Q5. Can you use multiple useEffect hooks?

No
Yes
Only one
Depends on React version

Q6. What does an empty dependency array do?

Runs effect never
Runs effect once
Runs effect on every render
Runs effect twice

Q7. Can useEffect replace lifecycle methods?

No
Yes
Only some
Not recommended

Q8. How to avoid memory leaks in useEffect?

Ignore
Clean up subscriptions
Use Redux
Use Context API

Q9. Is useEffect synchronous?

No
Yes
Runs asynchronously
Never

Q10. Can useEffect cause performance issues?

No
Yes if dependencies mismanaged
Only in class components
Only in production

💡 Bonus Insight

By separating concerns with multiple useEffect hooks, you can keep code organized and make debugging easier. Always specify dependencies carefully to avoid unexpected behavior or infinite loops.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon