How to fix Warning: Expected the listening component to be mounted but it was not in React

What this error means

React components have a lifecycle: they mount (appear in the DOM), update (re-render), and unmount (get removed from the DOM). When a component unmounts, it should no longer receive updates or handle events. This warning appears when code tries to interact with a component after it has been removed from the DOM. The most common scenario is an asynchronous operation (like a setTimeout, fetch request, or event listener) that completes after the component has unmounted. When the callback tries to update state or trigger an action, React detects that the component no longer exists and issues this warning. This indicates a memory leak and improper cleanup that can degrade performance and cause unexpected behavior.

Typical symptoms

• Console warnings mentioning "listening component to be mounted" during navigation or component unmounting
• Memory usage increasing over time as unused listeners accumulate
• State updates attempting to run on components that are no longer visible
• Event handlers firing after navigating away from a page or closing a modal
• Timers or intervals continuing to run after component removal
• Fetch requests completing and trying to update state after component unmounts
• WebSocket messages or real-time updates triggering actions on removed components

Common causes

1. Event listeners added with addEventListener not being removed with removeEventListener in cleanup
2. setTimeout or setInterval callbacks executing after component unmounts without proper cleanup
3. Fetch requests or API calls completing after the component has been removed from the DOM
4. WebSocket connections or real-time subscriptions not being closed when component unmounts
5. useEffect hooks without return cleanup functions for async operations
6. Third-party libraries or custom hooks that set up subscriptions without cleanup
7. Global event listeners on window or document that are not removed during unmount
8. Promises that resolve after component unmount and attempt to call setState

How to fix "Warning: Expected the listening component to be mounted but it was not"

// WRONG - no cleanup
useEffect(() => {
  window.addEventListener("resize", handleResize);
}, []);

// CORRECT - cleanup function removes listener
useEffect(() => {
  window.addEventListener("resize", handleResize);
  
  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

useEffect(() => {
  const timerId = setTimeout(() => {
    setData(fetchedData);
  }, 1000);
  
  return () => {
    clearTimeout(timerId);
  };
}, []);

// For intervals
useEffect(() => {
  const intervalId = setInterval(() => {
    updateCounter();
  }, 1000);
  
  return () => {
    clearInterval(intervalId);
  };
}, []);

// Using AbortController for fetch
useEffect(() => {
  const controller = new AbortController();
  
  fetch("/api/data", { signal: controller.signal })
    .then(res => res.json())
    .then(data => setData(data))
    .catch(err => {
      if (err.name !== "AbortError") {
        console.error(err);
      }
    });
  
  return () => {
    controller.abort();
  };
}, []);

// Using mounted flag for other async operations
useEffect(() => {
  let isMounted = true;
  
  asyncOperation().then(result => {
    if (isMounted) {
      setData(result);
    }
  });
  
  return () => {
    isMounted = false;
  };
}, []);

useEffect(() => {
  const socket = new WebSocket("wss://api.example.com");
  
  socket.onmessage = (event) => {
    setMessages(prev => [...prev, event.data]);
  };
  
  return () => {
    socket.close();
  };
}, []);

// For Socket.IO
useEffect(() => {
  const socket = io("https://api.example.com");
  
  socket.on("message", handleMessage);
  
  return () => {
    socket.off("message", handleMessage);
    socket.disconnect();
  };
}, []);

import { Subject } from "rxjs";

useEffect(() => {
  const subject = new Subject();
  
  const subscription = subject.subscribe(data => {
    setData(data);
  });
  
  return () => {
    subscription.unsubscribe();
  };
}, []);

// WRONG - different function references
useEffect(() => {
  window.addEventListener("scroll", () => handleScroll());
  
  return () => {
    window.addEventListener("scroll", () => handleScroll()); // Won't work!
  };
}, []);

// CORRECT - same function reference
useEffect(() => {
  const handler = () => handleScroll();
  window.addEventListener("scroll", handler);
  
  return () => {
    window.removeEventListener("scroll", handler);
  };
}, []);

Advanced notes

Frequently asked questions

What does "Warning: Expected the listening component to be mounted but it was not" mean?

React components have a lifecycle: they mount (appear in the DOM), update (re-render), and unmount (get removed from the DOM). When a component unmounts, it should no longer receive updates or handle events. This warning appears when code tries to interact with a component after it has been removed from the DOM.

How do I fix "Warning: Expected the listening component to be mounted but it was not"?

This warning occurs when React attempts to update or interact with a component that has already been unmounted from the DOM. It typically happens when asynchronous operations like timers, API calls, or event listeners complete after the component has been removed, causing memory leaks and potential crashes.

What causes "Warning: Expected the listening component to be mounted but it was not"?

Event listeners added with addEventListener not being removed with removeEventListener in cleanup setTimeout or setInterval callbacks executing after component unmounts without proper cleanup Fetch requests or API calls completing after the component has been removed from the DOM

Is the "Warning: Expected the listening component to be mounted but it was not" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Component should be a function, class or ForwardRef, not a string

  Component should be a function, class or ForwardRef, not a string

  HIGH

• Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

  Component did not return a value from render

  HIGH

• Component renders too many elements, consider splitting into smaller components

  Component renders too many elements

  MEDIUM

• Component should not return undefined, null or false

  Component should not return undefined, null or false

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React Component lifecycle documentation(Official Docs)
• 📝
  Robin Wieruch guide to setState on unmounted component
• Refine.dev useEffect cleanup function guide
• Pluralsight guide to cleanup event listeners in React
• freeCodeCamp guide to fixing memory leaks in React
• 📝
  Understanding memory leaks in React applications