fix: read elements from refs directly instead of keeping stale values in closure #1662
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What:
This is a fix which I discovered while upgrading to React v19, but it's for sure applicable to any version of React.
Why:
The issue is: the downshift elements from refs were accessed in the main scope of the effect callback inside
useMouseAndTouchTracker, which saves the version of the elements at the moment of the initialization of that effect. Since those are the refs, they can be updated at any point without causing re-rendering which leads to incorrect values being used in the event handlers (mouse up etc.).How:
The fix is quite simple - read the elements from refs at the moment of the event to make sure we always get the actual values.
Checklist: