This content originally appeared on DEV Community and was authored by Hariharan S J
1.What is useEffect in React?
Simple Meaning
useEffect = Run some code after your component renders
That’s it at the core.
Think Like This
Imagine your React component is like a TV screen.
First, React shows the UI (render)
After that, you want to do some extra work:
Fetch data
Update something
Start a timer
Listen to events
That “extra work” is called a side effect
And useEffect is how you handle it
Basic Syntax
useEffect(() => {
// your side effect code
});
Example
import { useEffect } from "react";
function App() {
useEffect(() => {
console.log("Component rendered");
});
return <h1>Hello</h1>;
}
This runs every time the component renders
2.What is Dependency Array in React
Core Definition
The dependency array is the second argument of useEffect:
useEffect(() => {
// side effect
}, [dependencies]);
It tells React:
Re-run this effect only if these values change
How React Actually Uses It
Every time your component renders:
React checks the previous values of dependencies
Compares them with current values
If any value changed → effect runs
If nothing changed → effect is skipped
React uses shallow comparison (===)
Shallow Comparison(TBD)
Different Cases Explained Clearly
No Dependency Array
useEffect(() => {
console.log("Runs every render");
});
Runs:
On first render
On every re-render
This can cause performance issues if heavy logic is inside.
Empty Dependency Array []
useEffect(() => {
console.log("Runs only once");
}, []);
Runs:
- Only once (when component mounts)
Equivalent to:
- componentDidMount in class components
componentDidMount(TBD)
With Dependencies
useEffect(() => {
console.log("Runs when count changes");
}, [count]);
Runs:
First render
Whenever count changes
Multiple Dependencies
useEffect(() => {
console.log("Runs when count or user changes");
}, [count, user]);
Runs if:
count changes OR
user changes
3.What is Cleanup Function in React
Simple Definition
A cleanup function is used to remove or stop side effects when a component is updated or removed.
Easy Understanding
Think like this:
You start something (timer, API, event listener)
Later, you must stop or clean it
That “stop/cleanup” part = cleanup function
Syntax
useEffect(() => {
// do something
return () => {
// cleanup code
};
}, []);
Cleanup runs in 2 situations:
Before the effect runs again
if dependencies change
When component unmounts
removed from UI
Example 1: Timer
useEffect(() => {
const timer = setInterval(() => {
console.log("Running...");
}, 1000);
return () => {
clearInterval(timer); // cleanup
};
}, []);
Without cleanup:
- Timer keeps running forever
With cleanup:
- Timer stops properly
Example 2: Event Listener
useEffect(() => {
const handleResize = () => {
console.log("Window resized");
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
Why Cleanup is Important
Without cleanup:
Memory leaks
Duplicate events
Performance issues
4.What is Component Lifecycle in React.
Simple Definition
Component lifecycle = the different stages a React component goes through from creation to removal.
3 Main Phases of Lifecycle
1.Mounting Phase (Birth)
Component is created and shown on the screen
What happens:
Component initializes
JSX renders
Appears in UI
Example:
useEffect(() => {
console.log("Component mounted");
}, []);
Runs only once
2.Updating Phase (Life)
Component updates when:
State changes
Props change
Example:
useEffect(() => {
console.log("Component updated");
}, [count]);
Runs when count changes
Unmounting Phase (Death)
Component is removed from the UI
Example:
useEffect(() => {
return () => {
console.log("Component unmounted");
};
}, []);
Cleanup runs when component is removed
5.Final Takeaway
Control when your effect runs, clean up after it, and always keep your component in sync with state and props.
This content originally appeared on DEV Community and was authored by Hariharan S J
Hariharan S J | Sciencx (2026-05-01T12:20:27+00:00) useEffect Demystified: The Hook Every React Developer Must Know. Retrieved from https://www.scien.cx/2026/05/01/useeffect-demystified-the-hook-every-react-developer-must-know/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.