Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A React hook that tells if the component is mounted.
import React from 'react'
export const useIsMounted = () => {
const ref = React.useRef(false)
const [, setIsMounted] = React.useState(false)
React.useEffect(() => {
ref.current = true
return () => (ref.current = false)
}, [])
return () => ref.current
Copy link

daveteu commented Dec 2, 2021

why don’t return isMount.current? When you use the hook, what you want is just true or false. Does return isMount.current break the hook?

Copy link

tamvo22 commented Dec 3, 2021

Hi Daveteu,

You are correct. I tried returning isMount.current and got it to work. Thank you.

export default function useIsMounted(): boolean {
  const isMounted = useRef(true);
  useEffect(() => {
    return () => {
      isMounted.current = false;
  }, []);

  const mounted = useCallback(() => {
    return isMounted.current;
  }, []);

  return isMounted()
const isMounted = useIsMounted();

useEffect(() => {
  isMounted && stateSet(true);
}, [state])

Copy link

o-az commented Jan 16, 2022

What's the point of the setState part? I think the isMount hook itself is sufficient.

Copy link

Stevemoretz commented Jan 16, 2022

Think about it, if you don't change the state you will not be able to for instance use useEffect on the result of that hook, basically a rerender won't occur, of course you can reach the value if you want to and it is changed but you can't monitor the changes.

Copy link

daveteu commented Jan 17, 2022

Normally you don't use the result from the hook as a dependency of a useEffect. You only use it for check.


useEffect(() => {
  if (isMounted) {
    do something.


Copy link

Just be aware that what you want from a useIsMounted hook is not for it to return a boolean, but to return a way to check on demand the mounted status. For example, maybe you awaited a loading promise and want to update some state, but want to first check the component is still mounted before doing so to avoid a React set state on unmounted component error. If you read a simple boolean that was created at the same render that started the loading side effect, it will be stale. The component may be unmounted because that boolean is out of date.

I don't actually have a need for a useIsMounted hook anymore, because I use a useForceUpdate pattern instead, for example:

Copy link

@daveteu You've got a point there, I don't remember why but I needed it in cases like that dependency, it should work without setState for you though.

Copy link

zmeyc commented Apr 3, 2022

@tamvo22 @daveteu It's not correct to return isMounted() from hook because it will reflect the mounted state at the time of hook call, not when async function finishes. I.e. the hook needs to return a 'checker function', not result of the function.

But the function needs to be memoized, otherwise when it's added to useEffect dependencies (eslint and it's autofix will suggest doing this), it will trigger effect recalculation on each re-render. So I think this implementation is correct:

Copy link

@timoxley I have since found ways to avoid having to use a useIsMounted hook, but from my rusty memory, the state is updated arbitrarily in the useEffect callback to trigger a re-render? I worked through a lot of gotchas to get it going.

The state update is in fact an instance of the forceUpdate pattern.

Copy link

tamvo22 commented Oct 18, 2022

@zmeyc Thank you for the clarification! I tested with a delayed API calls and found that you are right. As you pointed out, it only reflected the initial mount status hook call. All this time, I was under the assumption that isMounted would return the useRef value at the time of the API request. When I pass the function isMounted() to call during the API return, it does provide the correct mounted value when my test component mounted and unmounted. Thanks again cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment