Skip to content

fix: always mount listeners in useStorage #4730

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

Merged
merged 2 commits into from
Apr 30, 2025

Conversation

43081j
Copy link
Collaborator

@43081j 43081j commented Apr 26, 2025

This is yet another possible fix for the various useStorage scope issues.

Basically, onMounted will always run in the scope of the component. This means the event listener will not be torn down unless the element itself is. When the various effect scopes we use are torn down, the listener will remain and cause various memory leaks.

We can solve this by moving the event listeners outside the onMounted callback, as they will then teardown when the scope they're in disposes.

However, this then means the event listener could run before the component has mounted, when initOnMount is true. To solve this, we check in the event handler and do nothing if it isn't mounted yet.

We only care about the first mount, since all others will have already gone through at least one update call.

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.

This is _yet another_ possible fix for the various `useStorage` scope
issues.

Basically, `onMounted` will _always_ run in the scope of the
_component_. This means the event listener will not be torn down unless
the element itself is. When the various effect scopes we use are torn
down, the listener will remain and cause various memory leaks.

We can solve this by moving the event listeners _outside_ the
`onMounted` callback, as they will then teardown when the scope they're
in disposes.

However, this then means the event listener could run before the
component has mounted, when `initOnMount` is true. To solve this, we
check in the event handler and do nothing if it isn't mounted yet.

We only care about the _first_ mount, since all others will have already
gone through at least one `update` call.
@dosubot dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Apr 26, 2025
Comment on lines +208 to 211
tryOnMounted(() => {
firstMounted = true
update()
})
Copy link
Member

Choose a reason for hiding this comment

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

This is needed for SSR maybe? Why the hooks need to be added on mount in the first place?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

i'm just maintaining whatever was there before

there's an initOnMounted option, that's why this is a thing. don't know why that is an option though

OrbisK
OrbisK previously approved these changes Apr 30, 2025
@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Apr 30, 2025
@43081j 43081j added this pull request to the merge queue Apr 30, 2025
Merged via the queue into main with commit 65a99c4 Apr 30, 2025
8 checks passed
@43081j 43081j deleted the yet-another-attempt-at-solving-scope-funk branch April 30, 2025 13:36
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.

4 participants