0

In the following example taken from usehooks-ts website

import { useCallback, useEffect, useRef } from 'react'

function useIsMounted() {
  const isMounted = useRef(false)

  useEffect(() => {
    isMounted.current = true

    return () => {
      isMounted.current = false
    }
  }, [])

  return useCallback(() => isMounted.current, [])
}

export default useIsMounted

Why do we return the isMounted.current as a callback and don't return just the value isMounted.current?

What would be an example where returning just isMounted.current as a value will be a bad idea?

Hristo Enev
  • 2,421
  • 18
  • 29

1 Answers1

1

You could test the different implementation yourself to see what happens:

const UnmountingChild = ({ unmount }) => {
  const { isMounted, isMountedNC } = useIsMounted();

  useEffect(() => {
    console.log('IS MOUNTED BEFORE FETCH', isMounted()); // true
    console.log('IS MOUNTED NO CALLBACK BEFORE FETCH', isMountedNC.current); //true
    fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => {
      console.log('IS MOUNTED', isMounted()); //false
      console.log('IS MOUNTED NO CALLBACK', isMountedNC.current); //false
    });
    unmount(); // <-- This triggers the unmount of the component
  }, []);

  return <>Child</>;
};

function useIsMounted() {
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;
    return () => (isMounted.current = false);
  }, []);

  return {
    isMounted: useCallback(() => isMounted.current, []),
    isMountedNC: isMounted,
  };
}

Check the demo HERE

The usage of a callback is useful because it lets you to read directly the value of the ref with ref.current when needed , simply by calling isMounted(), if you want to directly return the ref you just have to make sure to return all the ref and not just ref.current because if you pass ref.current you will pass just the actual value and not the mutable ref object hence its value will always be stuck to false. Returning the ref forces you to then read every time the .current property, and that's not very nice, and it could mislead people using the hook without knowing the internal implementation, while calling isMounted() is nicer to read, and to use and avoids usage troubles.

Cesare Polonara
  • 3,473
  • 1
  • 9
  • 19
  • But I also wonder why would we use `useCallback` and not just wrap it in a simple callback? I mean I know that with `useCallback` we'll have the same reference to the function and without it we'll create new function every time, but what are the gains here and why would we bother using `useCallback` when it's not supposed to be overused? – Hristo Enev Apr 27 '22 at 09:43
  • 1
    That's up to you, usually in Custom hooks it is a good practice to use the React hooks when possible. There are people that wrap every function into `useCallback`, other people wrap every component in `React.memo`, in this case it's a good practice to memoize that function, since functions with no deps are worth to be memoized, I don't think it's an "overuse" case! – Cesare Polonara Apr 27 '22 at 09:50