React’s useEffect hook allows functional components to perform side effects such as data fetching, subscriptions, or manually changing the DOM. You can use multiple useEffect hooks in a single component to handle different concerns separately, which improves readability and separation of logic.
1. Basic Syntax of useEffect
useEffect(() => {
// Side effect logic
}, [dependencies]);
- Effect function: Code that runs after render
- Dependency array: Triggers re-run when values change
2. Why Use Multiple useEffect Hooks?
Using multiple useEffect hooks allows each effect to focus on a single purpose, making the component easier to read and maintain.
Example Use Cases:
- Fetch user data when the component mounts
- Listen to window resize events
- Sync local state to localStorage
3. Full Example with Multiple useEffect Hooks
import React, { useState, useEffect } from 'react';
const UserProfile = () => {
const [user, setUser] = useState(null);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const [theme, setTheme] = useState('light');
// 1. Fetch user data on mount
useEffect(() => {
const fetchUser = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
const data = await response.json();
setUser(data);
};
fetchUser();
}, []); // Only run on initial render
// 2. Handle window resize
useEffect(() => {
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []); // Only add event listener once
// 3. Sync theme to localStorage
useEffect(() => {
localStorage.setItem('app-theme', theme);
}, [theme]); // Run when theme changes
return (
<div>
<h1>User Profile</h1>
{user ? (
<div>
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>
</div>
) : (
<p>Loading...</p>
)}
<p>Window Width: {windowWidth}px</p>
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Toggle Theme
</button>
</div>
);
};
export default UserProfile;
4. Key Takeaways
- You can call
useEffectmultiple times in one component. - Each
useEffectshould be used for a separate concern. - Cleanup functions help prevent memory leaks.
- Keep your dependencies accurate to avoid unnecessary re-renders or bugs.
Using multiple useEffect hooks provides a clean and structured way to manage side effects in modern React apps.
