Typed debounced selector for react-redux

useDebouncedSelector.ts

import { useEffect, useRef, useState } from 'react';
import { TypedUseSelectorHook, useSelector } from 'react-redux';

// S is the RootState. If used with reselect, it can be derived. Otherwise, it could also initialized here with S = RootState
export function useDebouncedSelector<T, S>(selector: (state: S) => T, time = 100, equalityFn?: (left: T, right: T) => boolean) {
  const useAppSelector: TypedUseSelectorHook<S> = useSelector;
  const [state, setState] = useState<{ data: T | undefined }>({ data: undefined });
  const result = useRef<T>();
  const data = useAppSelector<T>(selector, equalityFn);

  useEffect(() => {
    const handler = setTimeout(() => {
      if (result.current !== data) {
        result.current = data;
        setState({ data });
      }
    }, time);

    return () => clearTimeout(handler);
  }, [data, time]);

  return state.data;
}