$effect.pre doesn't have the previous snapshot of an element

[hanielu]

Describe the bug

According to the official svelte docs, $effect.pre is used to run code before the DOM updates, but for some reason it doesn't work consistently.

This problem exists in ALL versions of svelte 5, even earlier than that in svelte 4.

I'm trying to bring React Motion (formerly framer motion) to svelte, and for layout changes, for the react lib, the DOM is measured in the getSnapshotBeforeUpdate lifecycle method. For the Vue lib, the DOM is measured in the onBeforeUpdate lifecycle hook.

Depending on state change, the previous state of the element is supposed to be captured, compared to the current state, and then an animation occurs.

I'm not even gonna pretend to understand what's going on here. $effect.pre doesn't get the previous snapshot of the element and I have no Idea why.

React's getSnapshotBeforeUpdate doesn't have this problem, neither does Vue's onBeforeUpdate.

Reproduction

SVELTE 5 REPRODUCTION Look in the console

SVELTE 4 REPRODUCTION Look in the console

System Info

System:
    OS: macOS 15.5
    CPU: (12) arm64 Apple M2 Max
    Memory: 117.81 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.17.0 - ~/.nvm/versions/node/v22.17.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.17.0/bin/npm
    pnpm: 10.13.1 - /opt/homebrew/bin/pnpm
    bun: 1.2.19 - ~/.bun/bin/bun
    Watchman: 2025.04.28.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 139.0.7258.128
    Edge: 139.0.3405.102
    Safari: 18.5
  npmPackages:
    svelte: ^5.0.0 => 5.38.1

Severity

blocking all usage of svelte

[trueadm]

$effect.pre happens during DOM mutations, not before DOM updates – where the DOM is committed and rendered to the browser. Creation and changing of the DOM is done sequentially with other template and pre effects so it's more akin to React's useLayoutEffect.

[7nik]

So, the following happens (only essential steps):

• for this:element=button:
• runs $effect.pre()
• runs $.attribute_effect($$element, () => ({ ...rest })) - it switches class on the button between start and end
• runs @render children()
• • for this:element=div:
• • runs $effect.pre() - but button's class is already updated.

[hanielu]

Thanks for the clarification.

Even solidjs doesn't have this problem https://playground.solidjs.com/anonymous/f7f52af2-5743-4462-a390-d8fce2bb230c
I really hope this is fixed

[PatrickG]

7nik is right about that on regular svelte.
But if you enable experimental async this is not true anymore, because $effect.pre() runs too late now.