useEffect vs Class Lifecycle Methods in React
💡 Concept Name
useEffect vs Class Lifecycle Methods – Two ways of handling side effects in React: the modern functional `useEffect` hook and the classic class-based lifecycle methods like `componentDidMount`.
📘 Quick Intro
React functional components use the `useEffect` hook to perform side effects such as fetching data or setting subscriptions. In class components, methods like `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` are used to manage these phases.
🧠 Analogy / Short Story
Think of managing a shop: you unlock the doors in the morning, handle customer orders during the day, and close the shop in the evening. These are like mounting, updating, and unmounting phases of a component.
In class components, you handle each with its own method. In functional components, `useEffect` acts like a single smart assistant that does all three depending on the instructions (dependencies).
🔧 Technical Explanation
- 🏗️ `componentDidMount` is equivalent to `useEffect(() => {...}, [])`.
- 🔁 `componentDidUpdate` is mimicked with `useEffect(() => {...}, [dependencies])`.
- 🧹 `componentWillUnmount` is handled by returning a cleanup function inside `useEffect`.
- 📦 `useEffect` centralizes lifecycle logic in one place.
- ✅ `useEffect` is more flexible and used in all modern functional components.
💻 Real Code Example
// Functional Component with useEffect
import React, { useEffect } from 'react';
function DemoComponent() {
useEffect(() => {
console.log("Mounted");
return () => {
console.log("Cleanup before unmount");
};
}, []);
return <h1>Hello World</h1>;
}// Class Component
class DemoClass extends React.Component {
componentDidMount() {
console.log("Mounted");
}
componentWillUnmount() {
console.log("Cleanup before unmount");
}
render() {
return <h1>Hello World</h1>;
}
}
❓ Interview Q&A
Q1: What does useEffect replace in class components?
A: It replaces methods like `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`.
Q2: Can you have multiple useEffect hooks?
A: Yes, you can use as many as needed for different effects.
Q3: How does cleanup work in useEffect?
A: Return a function from useEffect to handle unmounting logic like subscriptions or timers.
Q4: When does useEffect run without dependencies?
A: On every render, mimicking `componentDidUpdate` behavior.
Q5: What are lifecycle methods in class components?
A: Methods like `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` used to hook into component phases.
Q6: What is the equivalent of componentDidUpdate in useEffect?
A: useEffect with a dependency array: `useEffect(() => {...}, [value])`.
Q7: Why is useEffect preferred in modern React?
A: Because functional components are simpler, and useEffect provides a unified way to handle side effects.
Q8: How can you prevent useEffect from running on initial render?
A: Use a ref to track first render and skip the effect accordingly.
Q9: Do class components support hooks?
A: No, hooks like useEffect work only in functional components.
Q10: Can useEffect replace all lifecycle logic?
A: Yes, for most scenarios in functional components.
📝 MCQs
Q1. Which lifecycle methods does useEffect replace?
- render and shouldComponentUpdate
- All class methods
- componentDidMount, componentDidUpdate, componentWillUnmount
- Only componentWillUnmount
Q2. How do you run an effect once after mount in useEffect?
- Use setTimeout
- Add all props to array
- Pass null
- Pass an empty dependency array
Q3. What happens when useEffect returns a function?
- It gets ignored
- It runs during render
- It triggers rerender
- It runs during cleanup (unmount)
Q4. Can you use useEffect in class components?
- Yes
- Only with mixins
- No
- Only in lifecycle
Q5. What lifecycle method does useEffect([]) mimic?
- componentDidUpdate
- constructor
- componentDidMount
- render
Q6. What does useEffect with [count] do?
- Nothing
- Runs once
- Runs every second
- Runs effect when count changes
Q7. Where is it best to clean up subscriptions?
- Inside render
- In constructor
- In return function inside useEffect
- In propTypes
Q8. Why use multiple useEffect calls?
- For styling
- To break JSX
- To separate concerns
- For routing
Q9. What runs on every render without dependencies?
- componentDidMount
- render
- useEffect(() => {...})
- useMemo
Q10. Which component type supports useEffect?
- Class components
- Pure components
- Functional components
- All components
💡 Bonus Insight
You can have multiple `useEffect` hooks to isolate effects and avoid complexity. This encourages cleaner and more modular code, especially when different side effects depend on different states.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!