useDebounce infinite loop with arrays

[ambewas]

when using the useDebounce hook with anything other than a primitive string or number, an infinite render loop is triggered.

to reproduce, use for example an array:

let rendercount = 1;
export default function App() {
  const value = useDebounce(["array"], 300);
  console.log(value);
  rendercount += 1;
  return (
    <div className="App">
      <h1>{rendercount}</h1>
      <h2>we are looping</h2>
    </div>
  );
}

minimal reproduction case on codepen here:
https://codesandbox.io/p/sandbox/objective-kepler-ldf3p5?file=%2Fsrc%2FApp.js%3A21%2C1-22%2C1

to start the looping, simply add or edit a value in the useDebounce call.

This happens because of the inclusion of value in the dependency array of useDebounce. A solution could be to fully diff the arrays, but that might be out of scope for this project.

In any case, the documentation for useDebounce should make mention that it cannot be used with arrays. In fact, now it states that the value can be of any type, which is not the case.