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

feat: detach inert effects #11955

Merged
merged 9 commits into from
Jun 10, 2024
Merged

feat: detach inert effects #11955

merged 9 commits into from
Jun 10, 2024

Conversation

Rich-Harris
Copy link
Member

We create a lot of effects in the course of rendering an application, but many of them don't do any work after the initial execution. In some cases, they shouldn't really be effects in the first place — we're just abusing effects to defer some work until the DOM has been updated, and the actual position in the tree doesn't matter:

effect(() => {
if (document.activeElement === body) {
dom.focus();
}
});

In other cases, they do need to be effects because we don't know whether they'll contain anything dynamic (e.g. an expression like <p>{location.href}</p>, or because the position in the tree is important (e.g. onMount). But there's no need to keep them around if they're never going to update.

This PR does two things:

  • if an immediate effect contains no dependencies, has no children, contains no DOM and returns no teardown function (hereafter: is "inert"), don't add it to the tree in the first place
  • for deferred effects, check if the effect is inert after it executes, and detach from the tree if so

I imagined this would be a fairly modest gain, but it's actually quite substantial. For a simple test like this...

{#each Array(1e4) as _}
  <p>{Math.floor(100)}</p>
{/each}

memory usage in Chrome in prod mode drops 11% from 10MB to 8.9MB.

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

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • Prefix your PR title with feat:, fix:, chore:, or docs:.
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests and linting

  • Run the tests with pnpm test and lint the project with pnpm lint

Copy link

changeset-bot bot commented Jun 7, 2024

🦋 Changeset detected

Latest commit: 02d2bda

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR


try {
set_is_flushing_effect(true);
execute_effect(effect);
Copy link
Member

Choose a reason for hiding this comment

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

Is it safe to execute the effect before linking it to its parent? If we have error boundaries in the future, I imagine we have to walk up the effect tree, but it's not constructed yet then.

Copy link
Contributor

Choose a reason for hiding this comment

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

That's an interesting point actually. If we have error boundaries in the future then the link will need to be there so we can find the nearest error boundary effect.

Copy link
Member Author

Choose a reason for hiding this comment

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

The parent doesn't need to know about the child as long as the child knows about the parent, surely?

Copy link
Member

Choose a reason for hiding this comment

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

oh right, the parent is set - yeah that is probably enough

@Rich-Harris Rich-Harris merged commit c39805d into main Jun 10, 2024
8 checks passed
@Rich-Harris Rich-Harris deleted the detach-inert-effects branch June 10, 2024 13:32
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.

None yet

3 participants