batch function to update multiple sources at once

[ottomated]

Describe the problem

If I have multiple $states that are all dependencies of a $derived rune, there is no way to update them all at once. For example: REPL

let pending = $state(false);
let data = $state(undefined);
	
const status = $derived(pending ? 'pending' : data ? 'success' : 'idle');
	
function load(d) {
  pending = true;
  setTimeout(() => {
    // I need to update these at the same time
    data = d;
    pending = false;
  }, 400);
}

$inspect({ status, data });

Logs:

"init"  { status: "idle", data: undefined } 
"update" { status: "pending", data: undefined } 
"update" { status: "pending", data: "data" } // Bad state!
"update" { status: "success", data: "data" }

Describe the proposed solution

import { batch } from 'svelte';

function load(d) {
  pending = true;
  setTimeout(() => {
    // Does not mark any of the sources as dirty until the function exits
    batch(() => {
      data = d;
      pending = false;
    });
  }, 400);
}

Importance

would make my life easier

[trueadm]

We already batch updates on a microtask. The reason you're seeing all the intermediate updates is because you're using $inspect – if you instead switch to using an effect that logs the changes then you'll see it works as you expect already. Inspect works this way to help you debug each individual change.

[PatrickG]

We already batch updates on a microtask. The reason you're seeing all the intermediate updates is because you're using $inspect – if you instead switch to using an effect that logs the changes then you'll see it works as you expect already. Inspect works this way to help you debug each individual change.

Maybe the type for these logs should be 'intermediate-update' instead of 'update', to make that visible.

[trueadm]

@PatrickG It's not logging a UI update, but rather, it's logging the update to the bit of state itself.

[PatrickG]

@trueadm Yea, I understood that. But it seems like it might confuse some people.