Skip to content

Comments

fix(useRouteHash, useRouteParams, useRouteQuery): fix effect triggering multiple times#4113

Merged
antfu merged 1 commit intovueuse:mainfrom
aethr:4112-fix-useRouteQuery-multiple-effect
Aug 13, 2024
Merged

fix(useRouteHash, useRouteParams, useRouteQuery): fix effect triggering multiple times#4113
antfu merged 1 commit intovueuse:mainfrom
aethr:4112-fix-useRouteQuery-multiple-effect

Conversation

@aethr
Copy link
Contributor

@aethr aethr commented Jul 23, 2024

Resolves #4112.

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.
⚠️ Slowing down new functions

Warning: Slowing down new functions

As the VueUse audience continues to grow, we have been inundated with an overwhelming number of feature requests and pull requests. As a result, maintaining the project has become increasingly challenging and has stretched our capacity to its limits. As such, in the near future, we may need to slow down our acceptance of new features and prioritize the stability and quality of existing functions. Please note that new features for VueUse may not be accepted at this time. If you have any new ideas, we suggest that you first incorporate them into your own codebase, iterate on them to suit your needs, and assess their generalizability. If you strongly believe that your ideas are beneficial to the community, you may submit a pull request along with your use cases, and we would be happy to review and discuss them. Thank you for your understanding.


Description

When a ref is created with useRouteQuery, assigning a new value to the ref calls trigger twice for each change. It is called once immediately by the set operation, and the route is updated in a nextTick. When the route updates in the following tick, it triggers a watcher on the route query, which calls trigger again.

The extra call to trigger means that effects on the ref are triggered multiple times for the same value in different ticks.

More details are available in #4112.

Additional context

This behavior was probably introduced in d525244.

Previously, the setter would only update the route, and we would rely on the route watcher to update the value and trigger the effect. This commit introduced a trigger call into the set method, but didn't add a guard against the trigger being called again in the subsequent tick.

@dosubot dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Jul 23, 2024

it('should trigger effects only once', async () => {
const route = getRoute()
const router = { replace: (r: any) => Object.assign(route, r) } as any
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This mock router implementation is different from other tests in this file, which use:

const router = { replace: (r: any) => route = r } as any

Using basic assignment to replace the value of route (ie route = r) doesn't trigger watchers on route, so this mock behaves closer to the real vue-router.

I don't think it would be a bad idea to update the other tests in this file to use the same method, or even create a more realistic mock router that the tests can all use. However, I didn't feel that change would be in the scope of this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm This PR has been approved by a maintainer size:M This PR changes 30-99 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

useRouteQuery triggers reactivity twice

2 participants