Handle Props Side Effect with useEffect in component
Make Component
First, create a component called Counter.jsx:
const Counter = () => {
return (
<div>
<h1>Counter Component</h1>
</div>
);
};
export default Counter;
Pass Component in App.jsx
Now render this component inside App.jsx:
<div>
<h1>Handle Props Side Effect with useEffect in component</h1>
<Counter />
</div>
Apply useEffect to Handle Side Effects
const handleCounter = () => {
console.log("handleCounter called");
};
useEffect(() => {
handleCounter();
}, []);
Now you will handle side effects in your component using useEffect.
How to Pass Props as Dependency in useEffect
const handleData = () => {
console.log("handleData called");
};
useEffect(() => {
handleData();
}, [count, data]);