Skip to content

useEffect cleanup not called when component unmounts inside React.StrictMode with concurrent features enabled #36284

@Vansh1811

Description

@Vansh1811

React version: 19.1.0

Steps To Reproduce

  1. Enable React.StrictMode in the root of the app
  2. Create a component with a useEffect that sets up an event listener and returns a cleanup function
  3. Use concurrent features (startTransition) to unmount the component
  4. Observe that the cleanup function is not called on unmount in some edge cases

Link to code example:

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

function MyComponent() {
  useEffect(() => {
    const handler = () => console.log('event fired');
    window.addEventListener('resize', handler);
    return () => {
      console.log('cleanup called'); // This does not log on unmount
      window.removeEventListener('resize', handler);
    };
  }, []);
  return <div>Hello</div>;
}

The current behavior

The cleanup function is not reliably called when the component unmounts inside StrictMode with concurrent rendering, leading to memory leaks and duplicate event listeners.

The expected behavior

The cleanup function returned from useEffect should always be called when the component unmounts, regardless of whether StrictMode or concurrent features are active.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions