1import { useState, useEffect, EffectCallback, DependencyList } from 'react';
2
3const useDelayedEffect = (callback: EffectCallback, deps: DependencyList, delay: number) => {
4  useEffect(() => {
5    let timeoutId: NodeJS.Timeout | undefined;
6    timeoutId && clearTimeout(timeoutId);
7    timeoutId = setTimeout(callback, delay);
8    return () => timeoutId && clearTimeout(timeoutId);
9  }, [callback, delay, ...deps]);
10};
11
12export default <T>(value: T | undefined, timeout: number) => {
13  const [state, setState] = useState<T | undefined>(value);
14
15  useDelayedEffect(
16    () => {
17      state !== undefined && setState(undefined);
18    },
19    [state],
20    timeout
21  );
22
23  return [state, setState] as const;
24};
25