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 :)