useSlider: event callbacks are not updated

Open Beginner friendly
#2,165 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
62/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
typescript
Domain
frontend

Research direction

Start in src/useSlider.ts around the main effect at line 136, then run the linked CodeSandbox reproduction to observe the stale onScrub behavior after multiplier changes. Done means callbacks supplied on later renders are used by the hook rather than an outdated callback.

Written by the indexing model from the issue text.

Description

What is the current behavior?

With the main effect that attaches all events to the referenced element watching only the single option vertical and not the callbacks (see current code), there is a risk of trapping some outdated state value and calling an invalid function. Consider this example.

https://codesandbox.io/s/react-use-slider-callbacks-not-updated-bug-erfz1

When the multiplier state gets updated, the onScrub callback isn't internally updated and setPosition is always called with the new value multiplied by 50.

What is the expected behavior?
All callbacks are updated accordingly if they change with a subsequent render of the hook.

A little about versions:

  • OS: MacOS X
  • Browser (vendor and version): Firefox 93
  • React: 17.0.2
  • react-use: 17.3.1
  • Did this worked in the previous package version? No
Dominant language
TypeScript
Stars
44k
Forks
3.3k
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from streamich/react-use

All issues in streamich/react-use

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.