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.

[kachidk]

Version: 2.4.1

I'm also experiencing the same infinite render loop when passing arrays.

[AnYiEE]

This happens because arrays used as dependencies are recreated on every render, causing the useEffect hook to rerun on each render, leading to an infinite loop. To solve this problem, we can use useMemo to memoize the array.

const array = useMemo(() => ["array"], []);
const value = useDebounce(array, 300);