useIsMounted for React

Gives you a function that's true while the component is mounted and false after. For React, when a fetch, a timer or async code might set state too late.

useIsMounted returns a function you call to see if the component is still mounted.

Check it after an await, a timeout, or a request, and skip setState when it returns false. It is a function, not a boolean, so the answer stays current inside an async callback. To tell the server render from the browser, use useIsClient. In React the flag flips in an effect, which also covers Strict Mode's extra setup and cleanup.

PreviewCode

Last result: —

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

import { useIsMounted } from "@/hooks/use-is-mounted";

const isMounted = useIsMounted();

Call isMounted() after the async gap. Set state only when it returns true. The function is stable, so an effect can list it as a dependency.

FAQ

How is useIsMounted different from useIsClient?

useIsClient answers whether this render is in the browser after hydration. useIsMounted answers whether this component instance is still on the page. A client component can be unmounted while the browser stays. Use useIsClient before touching window or document. Use useIsMounted before setting state from a callback that might finish after the user has left the view.

How do I use it with fetch or async await?

Start the request from an effect. After the await, call the function this hook returned. If it returns true, set state. If it returns false, the component is gone and you should skip the update. The hook does not abort the request. Return an AbortController cleanup from the effect when you also want the network work to stop.

Why does it return a function instead of a boolean?

A boolean captured by an async function would be the value from the render that started the work, which is often stale by the time the promise resolves. The function reads a ref at the moment you call it, so the answer is current. The function itself is stable, so it is safe to put in an effect dependency list without restarting the effect.

Does useIsMounted work with React Strict Mode?

Yes. In development, Strict Mode runs the effect, runs its cleanup, and runs the effect again. The ref follows that sequence: true, then false, then true. After the second setup it reports mounted, which matches the component you can see. The hook does not treat the extra development cycle as a permanent unmount. Production runs the effect once.

Does this hook prevent memory leaks?

It prevents a state update on a component that has already unmounted, which is the warning people hit from a late callback. It does not close sockets, cancel timers, or abort fetches. Those still belong in the effect cleanup. Call the function as a guard around setState, and also cancel the underlying work if it should not continue in the background.

Can I call the function during render?

You can, but it returns false on the first render, because the ref is set in an effect that has not run yet. It also returns false after unmount. The useful call is later, from a timeout, a subscription, or a promise. Do not branch your JSX on it to detect the browser. That question is what useIsClient is for, and this ref is not a render-time signal.