question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Feature Request] Allow dependency length to change in hooks

See original GitHub issue

Not allowing dependency lists to change size limits the usefulness of useMemo in this particular use case but I imagine there are other similar use cases.

To be clear I am talking about the error triggered here:

https://github.com/facebook/react/blob/024a764310e64ef38963df16970364b9942a60cd/packages/react-reconciler/src/ReactFiberHooks.js#L322

For instance, in my app I have a bunch of items and the user can select an unlimited amount of them, in another component I want to compute an expensive derived value based on this selection that is relevant only to this component, a good use case for useMemo.

However it is not currently possible to use useMemo and I am forced to compute this derived data outside of this component even though I am only interested in doing so whilst this component is mounted.

I don’t understand why a change in dependency list length cannot be assumed to be a change in the dependencies itself?

I believe this can be implemented by changing the above to:

if (prevDeps.length !== nextDeps.length) {
    return false;
}

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:18
  • Comments:20

github_iconTop GitHub Comments

13reactions
fabiospampinatocommented, Aug 22, 2020

Yes I still care about this.

12reactions
jrmyiocommented, Sep 23, 2020

I agree with OP, I also don’t understand why instead of throwing an error prevDeps.length !== nextDeps.length can’t just count as a change in the dependencies itself.

I want to be able to memoize an array but spreading over the values inside the dependency would throw an error if the array changes in size.

A temporary solution could be to use JSON.stringify(arr) inside hook’s deps, but this will only work for serializable data.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Rules of Hooks - React
By following this rule, you ensure that Hooks are called in the same order each time a component renders.
Read more >
Hooks and state 102: the Dependency array in useEffect()
The dependency array is the second parameter, []. Whenever any of the dependencies specified in the array change, the function is re-executed.
Read more >
A React hook to handle state with dependencies
While building the app, I created something I call a "dependent state" custom hook. It's useful when you have a piece of state...
Read more >
React Hooks cheat sheet: Best practices with examples
React useState and setState don't make changes directly to the state object; they create queues to optimize performance, which is why the ...
Read more >
How to fix missing dependency warning when using useEffect ...
If you don't want to put fetchBusinesses inside the hook's dependencies, you can simply pass it as an argument to the hook's callback...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found