Async $derived runs when using `params` even when page is being unmounted

[craig-jennings]

Describe the bug

Just wanted to bring attention to this since it seems like it'll be a common use case. When using the new params prop (#13999) or page.params from $app/state (which makes sense since page.params drives the params prop), navigating away from a page that accesses it still triggers an update before being unmounted.

This is a problem because when combined with the new async functionality, it will trigger a derived async call but then not use the result, meaning a useless, and unexpected, request is made.

Reproduction

• Go to https://codesandbox.io/p/sandbox/romantic-snow-xgdkmn
• Open the devtools of the preview, click the "Network" tab
• Click on the "Pikachu" link at the top of the preview, notice a request is made
• Click on the "Home" link at the top of the preview, notice another request is made using undefined
  • This leads to a rejected promise and the webapp becomes unresponsive

If you provide a default value for the parameter for when it is undefined (i.e. params.x || 'bulbasaur'), you'll see the request made for bulbasaur and then a warning in the console,

An async derived, pokemon (src/​routes/​[x]/​+page.svelte:4:16) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app

Logs

System Info

N/A

Severity

serious, but I can work around it

Additional Information

No response