Why React 18 Removed the Unmounted Component Warning and What It Means for Your Hooks

Translator's Preface

After the release of React 18, some changes affect how we use React Hooks. This article translates the official documentation about removing the "setState on unmounted component" warning, helping readers understand the background and impact.

2. Translation

2.1 Background

Calling setState on an already unmounted component used to trigger the warning:

Warning: Can't perform a React state update on an unmounted component. This is a no‑op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

The warning is often misunderstood and can mislead developers.

2.2 Why the Warning Is Misleading

In the common async‑request scenario, the component may unmount while awaiting a Promise, but no memory leak occurs because the Promise resolves and the garbage collector frees the memory.

useEffect(() => {
  function handleChange() {
    setState(store.getState())
  }
  store.subscribe(handleChange)
  return () => store.unsubscribe(handleChange)
}, [])

If the cleanup function forgets to call unsubscribe, a leak would exist.

async function handleSubmit() {
  setPending(true)
  await post('/someapi') // component might unmount while we’re waiting
  setPending(false)
}

Here the warning is unnecessary; the Promise finishes quickly and memory is reclaimed.

2.3 Suppressing the Warning Is Worse Than Ignoring It

Many developers add code like the following to silence the warning:

let isMountedRef = useRef(false)
useEffect(() => {
  isMountedRef.current = true
  return () => { isMountedRef.current = false }
}, [])

async function handleSubmit() {
  setPending(true)
  await post('/someapi')
  if (!isMountedRef.current) {
    setPending(false)
  }
}

This does not solve any real memory‑leak problem; it merely suppresses the warning, potentially hiding bugs and leading to poorer code quality.

2.4 Removing the Warning

The React team decided to remove this warning because the situation it guards against is rare, and the warning often encourages developers to write confusing code. Hooks such as useUnmountedRef and useSafeState were created to handle the edge case, but they will become unnecessary once the warning is gone.

Translator's Summary

In the ahooks library, useUnmountedRef and useSafeState were introduced to address this warning. After React 18 removes the warning, these hooks will no longer be needed in most scenarios.

References

Update to remove the setState on unmounted component warning: https://github.com/reactwg/react-18/discussions/82

useUnmountedRef: https://ahooks.js.org/hooks/use-unmounted-ref

useSafeState: https://ahooks.js.org/hooks/use-safe-state