Nearby lessons
17 of 43⚛️ ReactJS – useEffect Hook
📌 What is useEffect Hook?
The word effect refers to a functional programming term called a "side effect".
Some examples of side effects are: fetching data from an API, directly updating the DOM, and timers.
The useEffect Hook allows you to perform side effects in your functional component.
📋 Common Side Effects
- Making API requests to a backend server
- Interacting with browser APIs (like
documentorwindow) - Using unpredictable timing functions like
setTimeoutorsetInterval
📌 Why use useEffect?
- Lets you run extra code after React updates the DOM
- Useful for data fetching, subscriptions, or manually changing the DOM
- Runs after the first render and after every update by default
- Cannot be written inside
render(), only inside function components
⚙️ Syntax
The useEffect hook accepts two arguments:
useEffect(callback, dependencies)- callback: Function to run after render
- dependencies: Optional array controlling when effect runs
You can use multiple useEffect hooks inside a single component.
🟢 Example 1: No Dependency Passed
When no dependency array is passed, useEffect runs after every render.
🟢 Example 2: Empty Dependency []
When an empty dependency array is passed, useEffect runs only once after the first render.
🟢 Example 3: With Dependencies
When specific values (state or props) are added in the dependency array, useEffect runs only when those values change.
🟢 Example 4: Multiple useEffect Hooks
You can use multiple useEffect hooks to separate concerns.