React developers often ask: How does useEffect compare to the classic componentDidMount lifecycle method? When should I use one over the other? This beginner-friendly guide breaks down their differences, usage scenarios, and examples to help you write cleaner React code.
What is componentDidMount ?
- A lifecycle method in class components.
- Runs once, after the component is mounted (added to the DOM).
- Commonly used for fetching data, setting up subscriptions, or manipulating DOM after mount.
Example: Using componentDidMount
What is useEffect ?
- A hook for functional components that lets you perform side effects.
- When used with an empty dependency array ([]), it runs once after the first render—mimicking componentDidMount.
- Can also track dependencies to re-run effects or clean up on unmount.
Example: Using useEffect to mimic componentDidMount
Key Differences
- componentDidMount is exclusive to class components; useEffect works with functional components.
- useEffect can run multiple effects with different dependencies, while componentDidMount runs once.
- useEffect supports cleanup with return functions, useful for unsubscribing or clearing timers.
Bonus
Since React's functional components are widely used now a days except some old project or code based are used with class components. But class components are the base referral for understanding React's architectural pattern.
Any way, here are detailed examples showing how to use useEffect with dependency arrays and cleanup functions to manage side effects effectively in React functional components:
Example 1: useEffect with Dependency Array
Explanation:
- The effect runs on initial mount and whenever count changes.
- The cleanup function runs before the effect re-runs and on unmount (e.g., removing event listeners or timers).
Example 2: useEffect with Cleanup for Event Listener
Explanation:
- The effect adds a resize event listener once after mount.
- The cleanup removes the listener when the component unmounts to prevent memory leaks.
Example 3: useEffect for Fetching Data with Cleanup
Explanation:
- The effect fetches new user data whenever userId changes.
- The cleanup cancels state update if the component unmounts before fetching completes.
Using dependency arrays and cleanup functions in useEffect helps manage resource lifetime, avoid bugs, and optimize React app performance.
When to Use Which?
- Use componentDidMount when working in class-based projects or legacy codebases.
- Use useEffect for new functional components or hooks-based projects—it’s more flexible and cleaner.
Developer Tips
- Always provide a dependency array to control when useEffect runs.
- Use useEffect cleanup to avoid memory leaks (e.g., remove event listeners).
- Prefer functional components with hooks for new React projects for better readability and maintainability.
Conclusion
Understanding useEffect and componentDidMount empowers React developers to manage component side effects effectively, improving app performance and code quality.