In React, useEffect is the go-to hook for managing side effects—actions that happen outside the normal component rendering flow.
If you're fetching data, setting up a subscription, manually changing the DOM, or working with timers, you’re in useEffect territory.
✅ What is useEffect Used For?
React's rendering is pure, but sometimes you need to:
- Fetch data from an API
- Set up a
setInterval or setTimeout
- Attach or clean up event listeners
- Sync component state with
localStorage or the URL
useEffect lets you run code after the DOM is updated.
🧠 Example
useEffect(() => {
console.log("Component mounted!");
return () => console.log("Component will unmount!");
}, []);
Explanation
- The
[] dependency array means it runs only once (like componentDidMount in class components).
- The returned function is the cleanup function, like
componentWillUnmount.
🔄 When Does useEffect Run?
| Dependency Array |
Behavior |
[] |
Run once on mount |
[someVar] |
Run on the mount, and when someVar changes |
| (no array) |
Run after every render |
🚫 Common Mistakes with useEffect
- Forgetting the dependency array → causes infinite loops
- Incorrect dependencies → can cause stale data or unnecessary re-renders
- Updating state inside
useEffect without guard conditions → can cause render loops
🛠️ Pro Tip
Use the React DevTools to debug hooks and watch when your effects fire. You can also create custom hooks (e.g. useFetch) to abstract effect logic.