setTimeout does not rerender component when using lifecycle functions

[ValipPowa]

Describe the bug

Basically whenever having a component that for example has a status that changes on outrostart it would rerender like in the case below
expected normal interaction: svelte 4
this is no longer the case in svelte 5 it no longer rerenders the component

Reproduction

svelte 5

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 7600X 6-Core Processor
    Memory: 21.29 GB / 31.22 GB
  Binaries:
    Node: 20.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.3 - ~\AppData\Local\pnpm\pnpm.EXE
    bun: 1.1.9 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (126.0.2592.61)
    Internet Explorer: 11.0.22621.3527

Severity

annoyance

[7nik]

A bit more demonstrative example of disabled updates during outro transition.

[dummdidumm]

I'm not sure if we can change this. We mark effects that are part of an outro transition as inert, which means they no longer update - this is what's happening here.

[Rich-Harris]

A bit more demonstrative example of disabled updates during outro transition.

Interestingly, the same behaviour happens with Svelte 4, by design. You can see the generated code in the JS Output tab includes things like this...

p(ctx, dirty) {
  if (!current || dirty & /*n*/ 2) set_data(t, /*n*/ ctx[1]);
}

...where current means 'has not outroed'.

In other words, it's a bug that the content changes in the first example. While we're striving to maximise compatibility with Svelte 4, that doesn't extend as far as recreating bugs, so I'm going to close this.

To update the text, you can manipulate the DOM directly:

onoutrostart={() => {
  console.log('outrostart');
+  const span = e.target.querySelector('span');
  setTimeout(() => {
    console.log('timeout');
-    status = 'Ready!';
+    span.textContent = 'Ready!';
  }, 500);
}}