Difference Between useEffect and componentDidMount
💡 Concept Name
useEffect and componentDidMount are mechanisms to run code after a React component is mounted, but useEffect is a hook for functional components, whereas componentDidMount is a lifecycle method in class components.
📘 Quick Intro
useEffect lets functional components perform side effects after rendering. With an empty dependency array, it behaves like componentDidMount, which runs once after the component mounts in class components.
🧠 Analogy / Short Story
Imagine a theater play: componentDidMount is like the stage crew setting up the props once before the show starts. useEffect is more flexible, like a crew that can set up, tear down, or adjust props anytime during or after the performance, depending on the instructions (dependencies) they receive.
🔧 Technical Explanation
- 📌 useEffect runs after every render by default but can be limited to run only on mount by passing an empty dependency array
[]. - 📌 componentDidMount runs only once after the first render in class components.
- 📌 useEffect supports cleanup via a return function, which runs before unmount or before re-running the effect.
- 📌 componentDidMount does not handle cleanup; cleanup is done in
componentWillUnmount. - 📌 useEffect works only in functional components; componentDidMount is exclusive to class components.
💻 Real Code Examples
// Using useEffect in functional component
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
console.log('Component mounted (useEffect)');
return () => {
console.log('Cleanup (useEffect)');
};
}, []); // Empty array means run once on mount
return <div>Hello Functional Component</div>;
}
// Using componentDidMount in class component
import React from 'react';
class MyClassComponent extends React.Component {
componentDidMount() {
console.log('Component mounted (componentDidMount)');
}
componentWillUnmount() {
console.log('Cleanup (componentWillUnmount)');
}
render() {
return <div>Hello Class Component</div>;
}
}
❓ Interview Q&A
Q1: What is the main purpose of useEffect?
A: To perform side effects like fetching data or subscribing to events in functional components.
Q2: How do you make useEffect run only once?
A: By passing an empty dependency array [].
Q3: Can useEffect replace componentDidMount?
A: Yes, in functional components useEffect with an empty array serves the same purpose.
Q4: Where do you do cleanup when using useEffect?
A: Inside the return function of useEffect.
Q5: Does componentDidMount run multiple times?
A: No, it runs only once after mounting.
Q6: Can componentDidMount be used in functional components?
A: No, it’s exclusive to class components.
Q7: How do you handle cleanup in class components?
A: In componentWillUnmount lifecycle method.
Q8: What happens if you omit the dependency array in useEffect?
A: The effect runs after every render.
Q9: Can you have multiple useEffect hooks?
A: Yes, each can handle different side effects.
Q10: Why is useEffect preferred in new React code?
A: Because functional components with hooks are simpler, more reusable, and avoid the complexity of classes.
📝 MCQs
Q1. What does useEffect with empty dependencies mimic?
- componentDidUpdate
- componentDidMount
- componentWillUnmount
- render method
Q2. Which lifecycle method runs once after mounting in class components?
- componentDidMount
- componentWillUnmount
- render
- constructor
Q3. Where do you perform cleanup in useEffect?
- componentDidMount
- Return function inside useEffect
- componentWillUnmount
- render
Q4. Can useEffect replace lifecycle methods?
- No
- Yes
- Only sometimes
- Never
Q5. Which is exclusive to class components?
- useEffect
- componentDidMount
- useState
- useRef
Q6. How do you run useEffect only once?
- No dependency array
- Empty dependency array
- Null dependency
- All dependencies
Q7. Can you have multiple useEffect hooks in one component?
- No
- Yes
- Only one
- Depends on React version
Q8. Where do you do cleanup in class components?
- componentDidMount
- componentWillUnmount
- constructor
- render
Q9. What happens if you omit dependencies in useEffect?
- Runs once
- Runs after every render
- Never runs
- Throws error
Q10. Why prefer useEffect in new React?
- More complex
- Simpler and reusable
- Deprecated
- Slower
💡 Bonus Insight
Hooks like useEffect enable functional components to have features previously only possible in class components, promoting cleaner, more maintainable code and better reuse.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!