useIsMounted

Hoos to know when a component is mounted or not.

Demo

INFO

The component has:

• A message state object variable with two properties: child1 and child2.
• A show state variable that shows and hides two child components by clicking on a button.
• A Child1 component that inside a useEffectOnce, after 5 second, update child1 property of message state with OK
• A Child2 component that inside a useEffectOnce, after 5 second and if isMounted function returns true update child1 property of message state with OK

If child components are showed and hides before 5 seconds, only Child1 component update its message because hiding components, isMounted() returns false so Child2 don't update its message.

Loading demo…

Show source code

import { useState } from "react";
import { useEffectOnce, useIsMounted } from "../../../..";

const sleep = () => new Promise(res => setTimeout(res, 5000));

const Child1 = ({ setMessage }: { setMessage: React.Dispatch<React.SetStateAction<{child1: string;child2: string;}>>}) => {
	useEffectOnce(() => {
		sleep().then(()=>{setMessage(t=>({...t, child1: "OK"}))})
	})
	return <p>Child 1</p>;
}

const Child2 = ({ setMessage }: { setMessage: React.Dispatch<React.SetStateAction<{ child1: string; child2: string; }>> }) => {
	const isMounted = useIsMounted();
	useEffectOnce(() => {
		sleep().then(() => { isMounted() && setMessage(t => ({...t, child2: "OK"})) })
	})
	return <p>Child 2</p>;
}

const UseIsMounted = () => {
	const [show, setShow] = useState(true);
	const [message, setMessage] = useState({child1: "", child2: ""});
	return (
		<>
			<p>Message Child1: {message.child1}</p>
			<p>Message Child2: {message.child2}</p>
			<button type="button" onClick={() => {
				setShow(!show);
				setMessage({ child1: "", child2: "" });
			}}>
				{show ? "Hide":"Show"}
			</button>
			{
				show &&
				<div style={{ display: "grid", gridTemplateColumns: "auto auto", justifyContent: "center", gap: 50 }}>
					<Child1 setMessage={setMessage} />
					<Child2 setMessage={setMessage} />
				</div>
			}
		</>
	);
}

UseIsMounted.displayName = "UseIsMounted";

export { UseIsMounted };

Types

UseIsMountedResult

Return value of useIsMounted.

A stable function that returns true when the component is currently mounted and false after it has unmounted. Useful for guarding async callbacks or deferred operations that should not update state after the component is gone.

export type UseIsMountedResult = () => boolean;