beforeUpdate and afterUpdate not backwards compatible

[PeytonHanel]

Describe the bug

Svelte 5 in legacy mode is supposed to be backwards compatible with Svelte 4 so that we can migrate our projects slowly. I just upgraded to Svelte 5 to find that beforeUpdate and afterUpdate don't work as expected anymore.

Reproduction

Svelte 4 (works):
https://svelte.dev/playground/8f0ca6b1708d431d95a3d457a7a5c8d1?version=4.2.19

Svelte 5 (doesn't work):
https://svelte.dev/playground/8f0ca6b1708d431d95a3d457a7a5c8d1?version=5.6.2

You should be seeing console output every time you press the button, but it doesn't work in Svelte 5.

Logs

No response

System Info

System:
    OS: macOS 14.7.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 138.38 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.7.0 - /opt/homebrew/bin/node
    npm: 10.8.2 - /opt/homebrew/bin/npm
    pnpm: 9.9.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Brave Browser: 131.1.73.91
    Chrome: 131.0.6778.109
    Edge: 131.0.2903.70
    Safari: 18.1.1
  npmPackages:
    svelte: ^4.2.19 => 4.2.19

Severity

blocking an upgrade

[webJose]

Without trying to argue the obvious difference in behavior, I cannot help but wonder: Is the v4 behavior really correct? After all, the component is not updating. What's updating is content provided by the calling component. In the v5 version, you can add beforeUpdate() to App.svelte and the console log entry appears on every click, because it is really App.svelte the one updating (the one providing the piece of template that actually updates).

[brunnerh]

Svelte 5 cannot be fully backward compatible for various reasons.
Changes to these functions are noted in the migration guide as breaking changes.

Other breaking changes section:

beforeUpdate/afterUpdate changes

beforeUpdate no longer runs twice on initial render if it modifies a variable referenced in the template.

afterUpdate callbacks in a parent component will now run after afterUpdate callbacks in any child components.

Both functions are disallowed in runes mode — use $effect.pre(...) and $effect(...) instead.

In migration script section:

Things that are not automigrated

The migration script does not convert beforeUpdate/afterUpdate. It doesn't do it because it's impossible to determine the actual intent of the code. As a rule of thumb you can often go with a combination of $effect.pre (runs at the same time as beforeUpdate did) and tick (imported from svelte, allows you to wait until changes are applied to the DOM and then do some work).

[trueadm]

As stated in our breaking changes, unfortunately beforeUpdate and afterUpdate are among some of the few things that are not backwards compatible in Svelte 5. There's not much we can do about this due to the difference in underlying runtime architecture.