The Beginner’s Roadmap to useEffect Hook in React.js
React added Hooks in version 16.8 to make it easier to write logic in functional components, without needing class components. Among all the hooks, useEffect is one of the most important and widely used.
The useEffect Hook allows you to perform side effects in your components. Some examples of side effects are: fetching data, directly updating the DOM, and using timers.
What is useEffectHook in ReactJS?
useEffect is a Hook in ReactJS that lets you perform side effects in your functional components.
What are the side effects?
Get Deepak Rathore’s stories in your inbox
Join Medium for free to get updates from this writer.
Side effects are operations that affect something outside the component, like:
- Fetching data from an API
- Updating the DOM manually
- Setting up subscriptions or timers
What is the Syntax of useEffect?
- The first argument is a function that runs after the component renders.
- The second argument is an optional dependency array to control when the effect runs.
How does useEffect work?
- Run on Every Render (No Dependency Array)
- This runs after every render.
- Be cautious: It might lead to performance issues.
Run Only Once (Component Did Mount)
- The empty array [] instructs React to execute this code only once when the component is mounted.
Run on Specific State or Prop Change
useEffect(() => {
console.log(‘Count updated:’, count);
}, [count]);
Cleanup Side Effects (Component Will Unmount)
- You can return a function inside useEffect to clean up resources.
Real-Life Example: Fetch Data from API
Real Example — Counter
The useEffect hook is essential when working with dynamic, side-effect-heavy applications in React. Understanding when and how to use it will make your components more efficient and predictable.
Take it slow, build small examples, and get comfortable with the render lifecycle. With time, useEffect will become second nature in your React toolbox.
Conclusion
The useEffect hook is one of the most important tools in React for handling side effects, such as API calls, timers, or event listeners. It allows your functional components to do more than just render UI — it lets them interact with the outside world in a controlled way.
To recap:
- useEffect() runs after rendering
- You can control when it runs using the dependency array
- You can clean up side effects by returning a function
By understanding how useEffect works and using it correctly, you can write cleaner, more efficient, and bug-free React applications.
