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