Think of your React component as a restaurant kitchen:
componentDidMount is like the head chef who shows up once when the kitchen opens, setting up everything needed before cooking begins. This is how class components handle tasks that should run only once after the component mounts.
useEffect, however, is more like a sous-chef who’s incredibly flexible — they can come in once when the kitchen opens, but also anytime the ingredients change, or even after every dish if you want. This hook can run once, many times, or conditionally, depending on what dependencies you give it.
In short, useEffect replaces and extends the lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount with a cleaner, more powerful API tailored for functional components.
If you want to write modern React code that’s easier to maintain and debug, learning when and how to use useEffect is a must.