Function useDelayedValue

frontend/src/react/hooks/useDelayedValue.ts:33–68

(
  initialValue: T,
  options: UseDelayedValueOptions = {}
)

 * after the component has gone away.
 */
export function useDelayedValue<T>(
  initialValue: T,
  options: UseDelayedValueOptions = {}
): UseDelayedValueResult<T> {
  const { delayBefore = 0, delayAfter = 0 } = options;
  const [value, setValue] = useState<T>(initialValue);
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const cancel = useCallback(() => {
    if (timerRef.current !== null) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
  }, []);

  const update = useCallback<DelayedValueUpdate<T>>(
    (next, direction, overrideDelay) => {
      const delay =
        overrideDelay ?? (direction === "before" ? delayBefore : delayAfter);
      cancel();
      if (delay > 0) {
        timerRef.current = setTimeout(() => {
          timerRef.current = null;
          setValue(next);
        }, delay);
      } else {
        setValue(next);
      }
    },
    [cancel, delayBefore, delayAfter]
  );

  useEffect(() => cancel, [cancel]);

  return { value, update, cancel };
}