See the following custom hook. It simply sets a state value to true
and back to false
after 2 seconds.
export const useDelay = () => { const [loading, setIsLoading] = useState(false); const timer = useRef(null); const runDelay = () => { setIsLoading(true); timer.current = setTimeout(() => { setIsLoading(false); }, 2000); } return [loading, runDelay];}
However, when importing this hook TypeScript thinks the loading
value, which is clearly a boolean
can also be of type () => void
(The type of runDelay). How is this possible?
const [loading, runDelay] = useDelay();// const loading: boolean | (() => void)
I know it's best practice to cleanup the timer in useEffect cleanup function, wip hook :)