1. What is useEffect?
useEffect() is used to perform side effects in a React component.
A side effect is an operation that happens outside the normal rendering process.
Examples:
- Fetching API data
- Setting a timer
- Adding an event listener
- Updating the browser tab title
- Subscribing to an event
Basic syntax
useEffect(() => { // Your code }, [dependencies]); There are two important parts:
() => {} -Effect function
[] -Dependency array
Let's learn what the dependency array does.
2. Three types of useEffect
Type 1: Run only once — []
useEffect(() => { console.log("Component Mounted"); }, []); Output:
Component Mounted - Runs after the component initially mounts.
- Does not run again on ordinary re-renders.
- Useful for fetching API data on mount.
Type 2: Run when state changes — [count]
useEffect(() => { console.log("Count changed:", count); }, [count]); Output when count increases from 0 to 3:
Count changed: 0 Count changed: 1 Count changed: 2 Count changed: 3 - Runs after initial mount.
- Runs again whenever count changes.
Type 3: Run on every render — no dependency array
useEffect(() => { console.log("Rendered"); }); Output:
Rendered Rendered Rendered Rendered It runs after every render.
3. Complete React example
This example demonstrates useState + useEffect.
import { useState, useEffect } from "react"; function App() { const [count, setCount] = useState(0); useEffect(() => { console.log("Count changed:", count); }, [count]); return ( <div> <h1>Count: {count}</h1> <button onClick={() => setCount(count + 1)}> Increment </button> </div> ); } export default App; 
