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

Fix route components remounting rather than being updated when props change #440

Merged
merged 5 commits into from
Jan 26, 2025

Conversation

pleek91
Copy link
Contributor

@pleek91 pleek91 commented Jan 25, 2025

Description

This approach builds on what I learned in #439 and fixes the remounting of components when params change. What this does differently is it uses a factory to create a wrapper around the route's component that handles the prop binding, suspense, and async updates. And it stores that wrapper in a store so that it can be reused.

Copy link

netlify bot commented Jan 25, 2025

Deploy Preview for kitbag-router ready!

Name Link
🔨 Latest commit 991e807
🔍 Latest deploy log https://app.netlify.com/sites/kitbag-router/deploys/6796a09a1792480008105997
😎 Deploy Preview https://deploy-preview-440--kitbag-router.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@pleek91 pleek91 marked this pull request as ready for review January 26, 2025 04:29
@pleek91 pleek91 changed the title [2nd Attempt] Fix route components remounting rather than being updated when props change Fix route components remounting rather than being updated when props change Jan 26, 2025
@stackoverfloweth
Copy link
Contributor

@pleek91, just wanna make sure I fully understand this change. So RouterView is basically back to it's original form at least in the template. However, that component computed that was re-running when components changes is NOT being called anymore because the props are wrapped around component when it was added to the store?

  1. If the user actually navigates away and Vue unmounts our RouterView, do we clear the components from the store? Otherwise when the user comes back, would the store re-use an old instance?
  2. We have tests around props reactivity right? I would have been concerned that moving props out of the computed would break that reactivity.
  3. Are we still considering the idea of rejections being out of users control?

@pleek91
Copy link
Contributor Author

pleek91 commented Jan 26, 2025

@stackoverfloweth
What we're creating and storing here is component definitions not component instances. So vue will create new component instances from these component definitions each time. But I'll update the new test to reflect that.

And we could clear the definitions out but I think it makes more sense to just keep them indefinitely.

@pleek91
Copy link
Contributor Author

pleek91 commented Jan 26, 2025

@stackoverfloweth foe the rejections I think for now we should keep them as is otherwise transitions won't work going between routes and rejections.

@pleek91 pleek91 merged commit b44ce2e into main Jan 26, 2025
2 checks passed
@pleek91 pleek91 deleted the fix-components-remounting-2 branch January 26, 2025 20:53
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

Successfully merging this pull request may close these issues.

2 participants