A(nother) version of setState that won't raise an error when called on an unmounted component, TypeScript version

useSafeState.ts

import {
  useState,
  Dispatch,
  SetStateAction,
  useRef,
  useEffect,
  useCallback,
} from "react"

function useSafeState<S = undefined>(
  initialState: S | (() => S),
): [S | undefined, Dispatch<SetStateAction<S | undefined>>] {
  const [state, setState] = useState<S | undefined>(initialState)

  // detect unmount
  const mounted = useRef(true)
  useEffect(
    () => () => {
      mounted.current = false
    },
    [mounted],
  )

  // and wrap setState to avoid calling it on unmounted components
  const safeSetState: Dispatch<SetStateAction<S | undefined>> = useCallback(
    (value: SetStateAction<S | undefined>) => {
      if (mounted.current) setState(value)
    },
    [mounted, setState],
  )
  return [state, safeSetState]
}

export default useSafeState