async: How to measure DOM before state update of #each blocks?

[Kasra-G]

Hi, wondering if there will be some mechanism to measure the dom before state change given $effect.pre is now unreliable in that regard when async mode is enabled. I figured there are still valid use cases like this autoscroll example here. I suppose you can model this same behavior with event listeners + $state in this particular case but I'm not sure if that is something that is true for all use cases.

Wondering if its recommended anymore to measure the DOM before a state change. If not, will we see $effect.pre get deprecated and a generic alternative documented?

[ELHart05]

Measure synchronously at the moment you trigger the change, then await settled() and read the post-update DOM. $effect.pre isn't being deprecated, but in async mode it's the wrong tool for reading the pre-update layout of {#each} content, and that's by design.

The reason it stopped working is the effect ordering change in async mode. From the await expressions docs: "block effects like {#if ...} and {#each ...} now run before an $effect.pre or beforeUpdate." So by the time your $effect.pre body runs, the {#each} block has already reconciled and the DOM you're trying to "measure before" is already gone. Pre/post in the old sense doesn't hold for block content anymore.

The pattern that does work: capture the "before" state at the source of the mutation (an event handler, or right before you assign to $state), apply the change, await the DOM, then read the "after" state. The settled() export (added in 5.36) is built for this. It "returns a promise that resolves once any state changes, and asynchronous work resulting from them, have resolved and the DOM has been updated" (tick() only waits for pending state to apply, settled() also waits for downstream async work, which matters in async mode).

For your autoscroll example, you don't actually need $effect.pre at all. Measure whether you're pinned to the bottom before mutating, then scroll after settled():

<script>
  import { settled } from 'svelte';

  let viewport;
  let messages = $state([]);

  async function add(msg) {
    // measure BEFORE the state change
    const autoscroll =
      viewport &&
      viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;

    messages = [...messages, msg];

    // wait for the {#each} to render the new node + any async work
    await settled();

    if (autoscroll) viewport.scrollTo(0, viewport.scrollHeight);
  }
</script>

<div bind:this={viewport}>
  {#each messages as message (message.id)}
    <div>{message.text}</div>
  {/each}
</div>

For a FLIP-style "measure old position, measure new position, invert" case where the mutation can come from anywhere (not a single handler), the same shape applies: snapshot the rects of the elements you care about, mutate state, await settled(), snapshot again, then apply the inverted transform. The measurement just moves out of $effect.pre and next to the mutation.

If you genuinely have no single mutation site and must react to arbitrary state, you can still read the current DOM in a plain $effect after await settled(), but you lose the cheap "before" snapshot, so capturing it at the mutation is the reliable route.

There's an open issue tracking the gap with React's getSnapshotBeforeUpdate / Vue's onBeforeUpdate for the arbitrary-mutation case (#16648), so a dedicated hook may show up. For now settled() plus measuring at the source covers the use cases I've hit, including autoscroll and FLIP.

[Kasra-G]

Why is it that just because my side effect needs to run before the dom rerenders, I have to do this manual tracking of all mutation points? This "workaround" you are describing is precisely the use case effect is supposed to cover.

I understand that in this specific example, the auto scrolling can be implemented through other means. My question was if there is a generic replacement that works for all situations. If the workaround is to track mutation points manually (exactly what effect.pre/effect is supposed to replace!) then my question is why is effect.pre not getting deprecated?

Can you explain why you think settled will help here? As you mentioned it runs at a minimum after dom is rerendered.

[chrisjcthomas]

In Svelte 5, synchronous reactivity means state updates apply immediately. Svelte schedules a DOM update microtask to batch visual changes, making the old beforeUpdate and afterUpdate hooks redundant.

To measure the DOM before a state change applies (e.g. for maintaining scroll position in chat windows), you can perform your measurement synchronously right before mutating the state, then await the DOM update using tick() before acting on the measurement.

Here is the idiomatic Svelte 5 implementation:

<script>
  import { tick } from 'svelte';

  let messages = $state([]);
  let chatWindow;

  async function handleAddMessage(newMessage) {
    // 1. Measure the DOM synchronously BEFORE the state changes
    const isAtBottom = 
      chatWindow.scrollHeight - chatWindow.scrollTop <= chatWindow.clientHeight + 10;

    // 2. Mutate the state
    messages.push(newMessage);

    // 3. Wait for Svelte 5 to update the DOM
    await tick();

    // 4. Act on the pre-update measurement
    if (isAtBottom) {
      chatWindow.scrollTo({
        top: chatWindow.scrollHeight,
        behavior: 'smooth'
      });
    }
  }
</script>

<div bind:this={chatWindow} class="chat-box">
  {#each messages as msg}
    <p>{msg}</p>
  {/each}
</div>

[Kasra-G]

Did you even read the question?

[yakubka]

in async mode, $effect.pre runs before the dom is updated but after state is committed, so it misses the old dom dimensions. the right replacement for measuring before a state-driven dom change is to use a beforeUpdate-style pattern with a snapshot.

the svelte 5 equivalent is to capture the measurement synchronously in the event handler before you mutate state:

function onAddItem() {
  const prev = list.scrollHeight; // measure before state change
  items.push(newItem);
  await tick(); // wait for dom update
  list.scrollTop += list.scrollHeight - prev; // apply delta
}

this works because the measurement happens before svelte reacts to the state mutation. tick() gives you the updated dom after that.

for a general autoscroll that does not have a specific trigger, you can use a resizeobserver on the container instead, which fires after every dom change without needing access to the previous snapshot:

new ResizeObserver(() => {
  el.scrollTop = el.scrollHeight;
}).observe(el);

this is more robust than $effect.pre in async mode since it does not depend on svelte scheduling.