mango-web/hooks/useInterval.tsx

40 lines
996 B
TypeScript

import { useState, useRef, useEffect } from 'react'
export function useEffectAfterTimeout(effect, timeout) {
useEffect(() => {
const handle = setTimeout(effect, timeout)
return () => clearTimeout(handle)
})
}
export function useListener(emitter, eventName) {
const [, forceUpdate] = useState(0)
useEffect(() => {
const listener = () => forceUpdate((i) => i + 1)
emitter.on(eventName, listener)
return () => emitter.removeListener(eventName, listener)
}, [emitter, eventName])
}
export default function useInterval(callback, delay) {
const savedCallback = useRef<() => void>()
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback
}, [callback])
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current && savedCallback.current()
}
if (delay !== null) {
const id = setInterval(tick, delay)
return () => {
clearInterval(id)
}
}
}, [delay])
}