Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useDebounce infinite loop with arrays #300

Open
ambewas opened this issue Apr 29, 2024 · 2 comments
Open

useDebounce infinite loop with arrays #300

ambewas opened this issue Apr 29, 2024 · 2 comments

Comments

@ambewas
Copy link

ambewas commented Apr 29, 2024

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
Copy link

kachidk commented Jun 12, 2024

Version: 2.4.1

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

@AnYiEE
Copy link

AnYiEE commented Jun 16, 2024

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);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants