useTimeout()
Very similar to the useInterval
hook, this React hook implements the native setTimeout
function keeping the same interface.
You can enable the timeout by setting delay
as a number
or disabling it using null
.
When the time finish, the callback function called.
The Hook
1import { useEffect, useRef } from 'react'23function useTimeout(callback: () => void, delay: number | null) {4 const savedCallback = useRef(callback)56 // Remember the latest callback if it changes.7 useEffect(() => {8 savedCallback.current = callback9 }, [callback])1011 // Set up the timeout.12 useEffect(() => {13 // Don't schedule if no delay is specified.14 if (delay === null) {15 return16 }1718 const id = setTimeout(() => savedCallback.current(), delay)1920 return () => clearTimeout(id)21 }, [delay])22}2324export default useTimeout
Usage
1import React, { useState } from 'react'23import useTimeout from './useTimeout'45export default function Component() {6 const [visible, setVisible] = useState(true)78 const hide = () => setVisible(false)910 useTimeout(hide, 5000)1112 return (13 <div>14 <p>15 {visible16 ? "I'm visible for 5000ms"17 : 'You can no longer see this content'}18 </p>19 </div>20 )21}
Created:
15 days ago