Skip to content

useDebounce infinite loop with arrays #300

Open
@ambewas

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions