useEffect Hook in React
useEffect Hook in React – Complete Beginner Guide (2026)
The useEffect hook is used in React to handle side effects in functional components. It is one of the most important hooks for performing tasks like fetching data, updating the DOM, and handling lifecycle events. Understanding useEffect is essential for building real-world React applications.
What is useEffect Hook in React
React useEffect is a hook that allows you to perform side effects in functional components. Side effects include operations like API calls, timers, and DOM updates.
Syntax of useEffect Hook
// side effect code
}, [dependencies]);
The first argument is a function that contains the effect, and the second argument is a dependency array that controls when the effect runs.
Basic Example of useEffect
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}
In this example, the document title updates whenever the count changes.
How useEffect Works
useEffect runs after the component renders. It can run once, multiple times, or based on specific dependencies depending on how it is configured.
Types of useEffect Usage
Run on every render when no dependency array is provided.
Run only once when an empty dependency array is used.
Run when specific values change when dependencies are provided.
Common Use Cases of useEffect
Fetching data from APIs
Updating the DOM
Setting up timers or intervals
Handling subscriptions
Best Practices for useEffect
Always define dependencies correctly
Avoid unnecessary re-renders
Clean up effects when needed
Keep logic simple and focused
Internal Linking Strategy
Click here for free courses
FAQs
What is useEffect in React
useEffect is a hook used to handle side effects in functional components.
When does useEffect run
It runs after the component renders.
What is dependency array in useEffect
It controls when the effect should run.
Can useEffect run multiple times
Yes, it can run based on dependencies.