Skip to content

fix: abort and reschedule effect processing after state change in user effect #16280

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 4 commits into from
Jul 7, 2025

Conversation

Rich-Harris
Copy link
Member

Fixes #16072. It's a real edge case, hence the convoluted nature of the test, but it's possible for a state change in one effect to cause a subsequent already-scheduled effect to run even though the second effect would be destroyed if the effect tree was being processed from the root.

The solution, I think, is to abort the processing of effects if a state change occurs. We can schedule the remaining effects and start again from the top; this will ensure that any dirty branches (i.e. a now-falsy if containing an effect with a now-broken reference) are updated before their children. Within each flush of the effect tree, predictable order is preserved.

We need to distinguish between user effects and non-user effects, since element bindings can result in state changes, and these should not cause flushing to be aborted (they are guaranteed to run before the effects that depend on the changed state, so this is not a problem).

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.
  • If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

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

Copy link

changeset-bot bot commented Jul 2, 2025

🦋 Changeset detected

Latest commit: 8d82339

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

@svelte-docs-bot
Copy link

Copy link
Contributor

github-actions bot commented Jul 2, 2025

Playground

pnpm add https://pkg.pr.new/svelte@16280

@dummdidumm
Copy link
Member

dummdidumm commented Jul 2, 2025

This is a good solution IMO - it doesn't yet work for $effect.pre though, since that's executed in another part. If I change the reproducible to use $effect.pre it still fails

Adding similar logic to process_effects and returning an empty array seems to fix it.

@Rich-Harris
Copy link
Member Author

Good catch. Rather than making changes to process_effects, which will create more merge headaches with the async branch, I think we should park this until that branch is merged. Adding a failing test in the meantime

@Rich-Harris
Copy link
Member Author

I've skipped the $effect.pre for now in the interests of merging — we can revisit it once async is in

@Rich-Harris Rich-Harris merged commit cf2ff5e into main Jul 7, 2025
14 checks passed
@Rich-Harris Rich-Harris deleted the gh-16072 branch July 7, 2025 15:46
@github-actions github-actions bot mentioned this pull request Jul 7, 2025
@abtinturing
Copy link

abtinturing commented Jul 7, 2025

I was having a problem similar to #16072 and after pulling the latest update, it's still there. It happens only if there is an $inspect in the components inside an if directive.

I wasn't able to reproduce exactly that scenario, but I got another issue when trying to recreate it, which also is running code before the if directive executes. Here's a simple REPL, where when you click the button, it assigns undefined to activeTab, which should make the child component disappear, but some code is still running within the if directive, attempting to read from activeTab, and it throws an error (If you remove the $inspect inside the child, the error goes away):
image


As for my original problem, all I can provide are these screenshots since I couldn't reproduce, but this is just for reference, the REPL above is enough to trigger the issue:

Here's the error:
image

And here's where that error is thrown, which as you can see, that code shouldn't even be running given the condition of the if statement.:
image

@PatrickG
Copy link
Member

PatrickG commented Jul 7, 2025

@abtinturing please create a new issue.

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.

Re-rendering occurs before the execution of the #if directive.
4 participants