Advanced useEffect Patterns in React

Introduction

The useEffect hook is one of the most important hooks in React. It allows developers to handle side effects such as fetching data, subscribing to events, or manipulating the DOM in functional components. While basic usage of useEffect is straightforward, advanced scenarios require careful handling to avoid performance issues, infinite loops, or redundant renders.

In this post, we will explore advanced useEffect patterns, including:

• Using multiple effects in a single component
• Conditional effects
• Avoiding infinite loops
• Effect optimization techniques

By understanding these patterns, you can write clean, maintainable, and efficient React applications.

---

Basics of useEffect

Before diving into advanced patterns, let’s briefly recap the basic usage of useEffect.

import React, { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
const interval = setInterval(() => setSeconds(prev => prev + 1), 1000);
return () => clearInterval(interval); // Cleanup
  }, []); // Empty dependency array runs once on mount

  return <p>Seconds: {seconds}</p>;
}

Key Points:

• useEffect runs after render
• Cleanup functions avoid memory leaks
• Dependency arrays control when the effect executes

Advanced patterns build upon these principles.

---

Pattern 1: Multiple Effects in One Component

A single component often has multiple side effects. Instead of combining all logic in one useEffect, splitting them into multiple hooks improves readability and maintainability.

Example: Fetching Data and Logging

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [count, setCount] = useState(0);

  // Effect 1: Fetch user data
  useEffect(() => {
fetch(https://jsonplaceholder.typicode.com/users/${userId})
  .then(res => res.json())
  .then(data => setUser(data));
  }, [userId]);

  // Effect 2: Log when count changes
  useEffect(() => {
console.log(Count updated: ${count});
  }, [count]);

  if (!user) return <p>Loading...</p>;

  return (
&lt;div&gt;
  &lt;h2&gt;{user.name}&lt;/h2&gt;
  &lt;p&gt;Count: {count}&lt;/p&gt;
  &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increment&lt;/button&gt;
&lt;/div&gt;
  );
}

Benefits:

• Each useEffect handles one responsibility
• Easier to read and debug
• Avoids mixing unrelated logic

Best Practice: Always split effects when they have different dependencies or purposes.

---

Pattern 2: Conditional Effects

Sometimes you only want an effect to run under certain conditions. Conditional effects help reduce unnecessary API calls, renders, or computations.

Example: Fetching Data Conditionally

function SearchUser({ query }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
if (!query) return; // Only fetch if query exists
const controller = new AbortController();
fetch(https://jsonplaceholder.typicode.com/users?username=${query}, { signal: controller.signal })
  .then(res => res.json())
  .then(data => setUser(data[0]))
  .catch(err => console.log(err));
return () => controller.abort(); // Cleanup
  }, [query]);

  if (!user) return <p>No user found</p>;

  return <p>User: {user.name}</p>;
}

Key Points:

• Early return inside useEffect avoids running the effect unnecessarily
• Cleanup functions prevent memory leaks or race conditions
• Conditional effects improve performance, especially in large applications

---

Pattern 3: Avoiding Infinite Loops

A common pitfall with useEffect is creating infinite loops by improperly managing dependencies.

Example of Infinite Loop

function InfiniteLoopExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
setCount(count + 1); //  Updates state without careful dependency
  }, [count]);

  return <p>Count: {count}</p>;
}

Problem:
Every state update triggers a re-render, which triggers the effect again, creating an infinite loop.

Correct Approach

function SafeCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
const timer = setInterval(() => setCount(prev => prev + 1), 1000);
return () => clearInterval(timer);
  }, []); //  Empty dependency array ensures it runs once

  return <p>Count: {count}</p>;
}

Best Practices:

1. Use functional updates (prev => prev + 1) when updating state inside useEffect.
2. Carefully manage the dependency array.
3. Use early returns to skip unnecessary updates.

---

Pattern 4: Effect Optimization Techniques

Optimizing effects is essential for performance, especially in large applications.

4.1 Using Dependency Arrays Wisely

useEffect(() => {
  // Fetch user only when userId changes
  fetch(https://api.example.com/users/${userId})
.then(res => res.json())
.then(data => setUser(data));
}, [userId]); //  Only runs when userId changes

• Avoid empty arrays when the effect depends on variables
• Avoid unnecessary variables in dependencies to prevent redundant execution

---

4.2 Debouncing API Calls

For effects triggered by user input, debounce the API calls to prevent excessive requests.

function Search({ query }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
if (!query) return;
const timeoutId = setTimeout(() => {
  fetch(https://api.example.com/search?q=${query})
    .then(res => res.json())
    .then(data => setResults(data));
}, 500); // Delay API call by 500ms
return () => clearTimeout(timeoutId); // Cleanup previous timeout
  }, [query]);
}

Benefits:

• Reduces API calls
• Improves performance
• Prevents UI lag

---

4.3 Using Cleanup Functions

Always use cleanup functions to prevent memory leaks, especially for subscriptions, timers, or event listeners.

function WindowResize() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize); // Cleanup
  }, []);

  return <p>Window width: {width}</p>;
}

• Cleanup functions run when the component unmounts or dependencies change
• Prevents dangling event listeners or intervals

---

4.4 Avoid Heavy Computations in Effects

If you perform heavy computations inside useEffect, consider memoizing results or splitting logic into separate functions.

function HeavyComputation({ data }) {
  const [result, setResult] = useState(null);

  useEffect(() => {
function compute() {
  return data.reduce((acc, val) => acc + val, 0);
}
setResult(compute());
  }, [data]);

  return <p>Result: {result}</p>;
}

Tip: Move computation outside the effect if it does not depend on side effects.

---

4.5 Combining useEffect with useRef

Sometimes you need to track previous values to conditionally run effects.

function PreviousValueTracker({ value }) {
  const prevValue = React.useRef();

  useEffect(() => {
prevValue.current = value;
  }, [value]);

  return (
<p>
  Current: {value}, Previous: {prevValue.current}
</p>
  );
}

Benefits:

• Avoids unnecessary renders
• Tracks previous values without adding them to dependency arrays

---

4.6 Using Multiple useEffect Hooks for Separation of Concerns

function Dashboard({ userId }) {
  const [user, setUser] = useState(null);
  const [notifications, setNotifications] = useState([]);

  // Fetch user info
  useEffect(() => {
fetch(/api/users/${userId})
  .then(res => res.json())
  .then(data => setUser(data));
  }, [userId]);

  // Fetch notifications
  useEffect(() => {
fetch(/api/users/${userId}/notifications)
  .then(res => res.json())
  .then(data => setNotifications(data));
  }, [userId]);

  if (!user) return <p>Loading...</p>;

  return (
&lt;div&gt;
  &lt;h2&gt;{user.name}&lt;/h2&gt;
  &lt;p&gt;Notifications: {notifications.length}&lt;/p&gt;
&lt;/div&gt;
  );
}

Advantages:

• Each effect has a single responsibility
• Easier to debug and maintain
• Dependencies are clearly defined

---

4.7 Handling Cleanup in Subscriptions

function Chat({ roomId }) {
  useEffect(() => {
const socket = new WebSocket(wss://example.com/chat/${roomId});

socket.onmessage = (event) => console.log(event.data);
return () => socket.close(); // Cleanup on unmount or roomId change
  }, [roomId]);

  return <p>Connected to chat room {roomId}</p>;
}

• Clean up WebSocket connections to prevent memory leaks
• Ensures correct behavior