Add documentation note that useEffect comparison is shallow

[kevindice]

A use-case one might attempt is:

const [debouncedAddress] = useDebounce({
    address1,
    address2,
    country,
    city,
    state,
    zip,
}, 1500)

useEffect(() => {
    // do API call to update address on server
}, [
    debouncedAddress.address1
    debouncedAddress.address2
    debouncedAddress.country,
    debouncedAddress.city,
    debouncedAddress.state,
    debouncedAddress.zip,
])

...such that the form is auto-saved if the user has not typed in the last 1.5 seconds.

But in JS {} !== {} is true.

Suggesting the user use a hash function would be best. Otherwise, the above code example will trigger a re-render every 1500 ms. This should be accompanied w/ a note about the exhaustive-deps eslint rule.

[xnimorz]

Thank you, @kevindice for your suggestion!

I'll add such note to the docs.

For your case, you can use useDebounceCallback, which is more configurable:

const [ debouncedAddress, setDeboucedAddress ] = useState({
    address1,
    address2,
    country,
    city,
    state,
    zip,
});

const [ callback ] = useDebounceCallback((newAddress) => {
  if (!deepEqual(newAddress, debouncedAddress)) {
    setDeboucedAddress(newAddress);
  }
}, 1500);

useEffect(() => {
    // do API call to update address on server
}, [
    debouncedAddress.address1
    debouncedAddress.address2
    debouncedAddress.country,
    debouncedAddress.city,
    debouncedAddress.state,
    debouncedAddress.zip,
])

[xnimorz]

Added info in https://github.com/xnimorz/use-debounce#simple-values-debouncing section. Thank you again for the issue!