add useDebouncedValue hook

[ianstormtaylor]

Is your feature request related to a problem? Please describe.
The issue is when using hooks like useMeasure where a value might change many times per second as someone is resizing.

One solution could be changing useMeasure, but then every hook that needs to be debounced has to take options. Instead, it would be nice to have a useDebouncedValue that can take a quickly-changing value but only reflect the changes after a time. It would be just like useDebounce but a value instead of a function.

const debouncedValue = useDebouncedValue(someRapidlyChangingValue, 200)

[MiroslavPetrik]

import { useMemo, useState } from "react";
import { useDeepCompareEffect } from "react-use";
import { debounce } from "lodash";

export const useDebouncedValue = <T>(value: T, timeout = 1000) => {
  const [debounced, setDebounced] = useState(value);

  const debounceValue = useMemo(
    () => debounce((value) => setDebounced(value), timeout),
    [setDebounced, timeout]
  );

  useDeepCompareEffect(() => {
    debounceValue(value);
  }, [value]);

  return debounced;
};

Demo

[vincerubinetti]

@MiroslavPetrik Nice, pretty clean. Btw you don't need setDebounced in the dep array.

Wish this was built in.