27 Nov 2025 7 min read React Series

useEffect with dependencies and cleanup

React has transformed how developers architect complex web applications, especially in enterprise fields like order management. The useEffect hook is the engine behind much of React’s dynamic power—it lets you handle side effects, data fetching, subscriptions, and more, all while keeping your UI in sync. But real mastery comes when you use dependencies and cleanup functions wisely.

If you’ve read our previous explorations on useState pitfalls and parent-child communication, you’re ready to add another essential tool to your arsenal: useEffect—with an emphasis on dependencies, cleanup, and advanced patterns for professional-grade order management.

What is useEffect? Why Does It Matter?

useEffect lets React components perform side effects: fetching order data, subscribing to event streams, interacting with the DOM, and much more, all declaratively and reactively. Think of it as your way to say, "Whenever X or Y changes, do Z."

Basic Syntax:

useEffect(() => {
  // your effect logic here
}, [dependencies]);

The first argument is your effect: code you want to run after rendering or upon changes.
The second is the dependency array: values your effect depends on, so React knows when to re-run it.

Dependencies in useEffect: The Heartbeat of Reactive Logic

Specifying dependencies in the array ensures your effect runs only when needed. For an order management UI, this might be the order ID, filter settings, or user session. Calculated wrong, it can cause wasted API calls, double renders, or missed updates.

Example: When the orderId changes, we want to fetch updated order details.

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

function OrderDetails({ orderId }) {
  const [order, setOrder] = useState(null);

  useEffect(() => {
    let ignore = false;
    setOrder(null);

    // Fake fetch using setTimeout so it works without a backend
    setTimeout(() => {
      if (ignore) return;
      const fakeOrder = {
        id: orderId,
        status: orderId % 2 === 0 ? 'Shipped' : 'Processing',
        total: 100 + orderId,
      };
      setOrder(fakeOrder);
    }, 1000);

    return () => {
      ignore = true;
    };
  }, [orderId]);

  if (!order) {
    return <div>Loading order details for #{orderId}...</div>;
  }

  return (
    <div>
      <h2>Order #{order.id}</h2>
      <p>Status: {order.status}</p>
      <p>Total: ${order.total}</p>
    </div>
  );
}

function App() {
  const [orderId, setOrderId] = useState(101);

  return (
    <div style={{ padding: '1rem' }}>
      <h1>Order Details Demo</h1>
      <button onClick={() => setOrderId(id => id + 1)}>
        Next Order
      </button>
      <button onClick={() => setOrderId(id => id - 1)} style={{ marginLeft: '0.5rem' }}>
        Previous Order
      </button>
      <OrderDetails orderId={orderId} />
    </div>
  );
}

export default App;

Why this works:

The effect runs whenever orderId changes.
The cleanup function (ignore = true) avoids outdated updates if the component unmounts or orderId changes during async work.

Advanced Dependencies: Arrays, Objects, and Best Practices

When your dependencies are arrays or objects, remember: they’re compared by reference, not value. This can cause tricky bugs in dashboards or batch processing screens.

Example: Real-time filtered order list.

// src/App.js
import React, { useState, useEffect } from 'react';

function OrderBatch({ filter }) {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    // Simulate API based on filter.status
    const allOrders = [
      { id: 201, status: 'Processing' },
      { id: 202, status: 'Shipped' },
      { id: 203, status: 'Processing' },
      { id: 204, status: 'Delivered' },
      { id: 205, status: 'Shipped' },
    ];

    const filtered = filter.status === 'All'
      ? allOrders
      : allOrders.filter(order => order.status === filter.status);

    setOrders(filtered);
  }, [filter.status]);

  return (
    <div>
      <h2>Orders (Filter: {filter.status})</h2>
      <ul>
        {orders.map(order => (
          <li key={order.id}>
            #{order.id}: {order.status}
          </li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  const [statusFilter, setStatusFilter] = useState('All');
  const filter = { status: statusFilter };

  return (
    <div style={{ padding: '1rem' }}>
      <h1>Order Batch Filter Demo</h1>
      <label>
        Status Filter:{' '}
        <select
          value={statusFilter}
          onChange={e => setStatusFilter(e.target.value)}
        >
          <option>All</option>
          <option>Processing</option>
          <option>Shipped</option>
          <option>Delivered</option>
        </select>
      </label>
      <OrderBatch filter={filter} />
    </div>
  );
}

export default App;

Tip: If your filter is an object built on each render, consider memoizing it outside to avoid infinite effect loops.

Cleanup Functions: Preventing Memory Leaks and Zombie Effects

Any resource allocation—API polling, timers, websocket connections—should be paired with a cleanup. React will call your cleanup before re-running the effect (if dependencies have changed) and when the component unmounts.

Example: Polling order status and cleaning up on unmount.

// src/OrderStatusPoller.js
import React, { useState, useEffect } from 'react';

function OrderStatusPoller({ orderId }) {
  const [status, setStatus] = useState('pending');

  useEffect(() => {
    let current = 'pending';

    const interval = setInterval(() => {
      // Fake status transitions
      if (current === 'pending') {
        current = 'Processing';
      } else if (current === 'Processing') {
        current = 'Packed';
      } else if (current === 'Packed') {
        current = 'Shipped';
      }
      setStatus(current);
    }, 3000);

    return () => clearInterval(interval);
  }, [orderId]);

  return (
    <div>
      <h3>Order #{orderId} Status: {status}</h3>
    </div>
  );
}

export default OrderStatusPoller;

// src/App.js
import React, { useState } from 'react';
import OrderStatusPoller from './OrderStatusPoller';

function App() {
  const [orderId, setOrderId] = useState(301);
  const [show, setShow] = useState(true);

  return (
    <div style={{ padding: '1rem' }}>
      <h1>Order Status Polling Demo</h1>
      <button onClick={() => setOrderId(id => id + 1)}>
        Switch Order
      </button>
      <button
        onClick={() => setShow(s => !s)}
        style={{ marginLeft: '0.5rem' }}
      >
        {show ? 'Unmount Poller' : 'Mount Poller'}
      </button>

      {show && <OrderStatusPoller orderId={orderId} />}
    </div>
  );
}

export default App;

Why it matters: Failing to clear resources can cause memory leaks, server overload, or out-of-sync UI—especially when rapidly switching between orders or pages.

Ordering Multiple useEffect Hooks: Avoiding Race Conditions

React executes multiple useEffect hooks in order as they appear in your component. Effects that depend on each other should be sequenced, and if one relies on the results of another, define them accordingly.

Example: Cascading side effects for complex dashboard widgets.

// src/App.js
import React, { useState, useEffect } from 'react';

function OrderDashboard({ userId }) {
  const [userFilters, setUserFilters] = useState([]);
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    // Simulate API for user filters
    setTimeout(() => {
      const fakeFilters = ['Processing', 'Shipped'];
      setUserFilters(fakeFilters);
    }, 1000);
  }, [userId]);

  useEffect(() => {
    if (userFilters.length === 0) return;

    // Simulate API fetching orders based on userFilters
    const allOrders = [
      { id: 401, status: 'Processing' },
      { id: 402, status: 'Shipped' },
      { id: 403, status: 'Cancelled' },
      { id: 404, status: 'Processing' },
      { id: 405, status: 'Shipped' },
    ];

    const filtered = allOrders.filter(order =>
      userFilters.includes(order.status)
    );

    setOrders(filtered);
  }, [userFilters]);

  return (
    <div>
      <h2>User {userId} Order Dashboard</h2>
      <p>Active Filters: {userFilters.join(', ') || 'Loading filters...'}</p>
      <h3>Filtered Orders</h3>
      {orders.length === 0 ? (
        <p>Loading orders...</p>
      ) : (
        <ul>
          {orders.map(order => (
            <li key={order.id}>
              #{order.id}: {order.status}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function App() {
  const [userId, setUserId] = useState(1);

  return (
    <div style={{ padding: '1rem' }}>
      <h1>Order Dashboard Demo</h1>
      <button onClick={() => setUserId(id => id + 1)}>
        Switch User
      </button>
      <OrderDashboard userId={userId} />
    </div>
  );
}

export default App;

Real Order Management Use Cases: Going Beyond the Basics

Let's power up the examples for an OMS context, moving beyond the typical fetching and polling:

1. Handling WebSocket Connections for Real-Time Order Updates

// src/OrderStatusPoller.js
import React, { useState, useEffect } from 'react';

function OrderStatusPoller({ orderId }) {
  const [status, setStatus] = useState('pending');

  useEffect(() => {
    let current = 'pending';

    const interval = setInterval(() => {
      // Fake status transitions
      if (current === 'pending') {
        current = 'Processing';
      } else if (current === 'Processing') {
        current = 'Packed';
      } else if (current === 'Packed') {
        current = 'Shipped';
      }
      setStatus(current);
    }, 3000);

    return () => clearInterval(interval);
  }, [orderId]);

  return (
    <div>
      <h3>Order #{orderId} Status: {status}</h3>
    </div>
  );
}

export default OrderStatusPoller;

// src/App.js
import React, { useState } from 'react';
import RealTimeOrderFeed from './RealTimeOrderFeed';

function App() {
  const [warehouseId, setWarehouseId] = useState(1);

  return (
    <div style={{ padding: '1rem' }}>
      <h1>Real-Time Order Feed Demo</h1>
      <button onClick={() => setWarehouseId(id => id + 1)}>
        Switch Warehouse
      </button>
      <RealTimeOrderFeed warehouseId={warehouseId} />
    </div>
  );
}

export default App;

The effect establishes a connection when warehouseId changes.
Cleanup closes the socket, preventing dead connections and ensuring correct room listening.

2. Managing Timers for Order Processing Feedback

// src/App.js
import React, { useEffect, useState } from 'react';

function OrderProcessingTimer({ isProcessing }) {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    if (!isProcessing) return;

    setSeconds(0);
    const timer = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, [isProcessing]);

  return <div>Order processed in: {seconds} seconds</div>;
}

function App() {
  const [isProcessing, setIsProcessing] = useState(false);

  return (
    <div style={{ padding: '1rem' }}>
      <h1>Order Processing Timer Demo</h1>
      <button onClick={() => setIsProcessing(p => !p)}>
        {isProcessing ? 'Stop Processing' : 'Start Processing'}
      </button>
      <OrderProcessingTimer isProcessing={isProcessing} />
    </div>
  );
}

export default App;

3. Subscribing to External Events: Packing & Shipment Status

// src/ShipmentStatus.js
import React, { useEffect, useState } from 'react';

function ShipmentStatus({ shipmentId }) {
  const [status, setStatus] = useState('pending');

  useEffect(() => {
    function handleUpdate(event) {
      // Our fake events will pass a plain object
      if (event.detail.shipmentId === shipmentId) {
        setStatus(event.detail.status);
      }
    }

    window.addEventListener('shipmentUpdate', handleUpdate);

    return () => {
      window.removeEventListener('shipmentUpdate', handleUpdate);
    };
  }, [shipmentId]);

  return <div>Shipment #{shipmentId} Status: {status}</div>;
}

export default ShipmentStatus;

// src/App.js
import React, { useState } from 'react';
import ShipmentStatus from './ShipmentStatus';

function App() {
  const [shipmentId, setShipmentId] = useState(9001);

  function simulateUpdate(status) {
    const event = new CustomEvent('shipmentUpdate', {
      detail: { shipmentId, status },
    });
    window.dispatchEvent(event);
  }

  return (
    <div style={{ padding: '1rem' }}>
      <h1>Shipment Status Subscription Demo</h1>
      <button onClick={() => setShipmentId(id => id + 1)}>
        Next Shipment
      </button>

      <div style={{ marginTop: '1rem' }}>
        <button onClick={() => simulateUpdate('Packed')}>
          Mark Packed
        </button>
        <button onClick={() => simulateUpdate('In Transit')} style={{ marginLeft: '0.5rem' }}>
          Mark In Transit
        </button>
        <button onClick={() => simulateUpdate('Delivered')} style={{ marginLeft: '0.5rem' }}>
          Mark Delivered
        </button>
      </div>

      <div style={{ marginTop: '1rem' }}>
        <ShipmentStatus shipmentId={shipmentId} />
      </div>
    </div>
  );
}

export default App;

Common Pitfalls—And How to Fix Them

Missing dependencies: Always include every prop, state, or variable used inside the effect in your dependency array.
Stale closures: Make sure the cleanup references the right values on each render.
Rapid switching/unmounting: Always clean up subscriptions, timers, and sockets.

Integrating with useState and Parent-Child Communication

If you missed our deep dives on useState practical issues and lifting state, revisit those to see how effects fit into broader data flow—especially when parent or child components drive UI side effects.

Summary Table: When to Use Cleanup Functions

Side Effect	Cleanup Needed?	Example
API Fetch	If abortable	Canceling fetch when dependencies change
Timer/Interval	Always	clearInterval/clearTimeout when done
WebSocket	Always	socket.close() on component unmount
Subscription/Event	Always	window.removeEventListener
Direct DOM Changes	Usually	Undo manual changes

Best Practices Checklist

Always specify every dependency the effect uses.
Return cleanup to undo or disconnect effects (subscriptions, intervals, sockets).
Memoize derived objects/arrays used in dependencies to avoid infinite loops.
Sequence useEffect hooks for clear and predictable order.

Where Next?

Congratulations—“useEffect” mastery will keep your OMS fast, memory-safe, and bug-resistant even as complexity grows. Next, we’ll demystify useRef: how to interact directly with the DOM and retain mutable state between renders.