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.