Async updates in setter of bind:value

[BlackySoul]

Hi! I have a question about the idiomatic way to handle async state updates with bind:.

Let's say I have a simple wrapper around <input type="checkbox">:

<script lang="ts">
	let { checked = $bindable() } = $props();
</script>

<input
	type="checkbox"
	bind:checked
/>

Usage with local state works perfectly fine:

let isChecked = $state(false);

<Checkbox bind:checked={isChecked} />

But sometimes the value comes from some external reactive source where updating it requires an async request to the backend.

One possible approach is using function bindings:

<Checkbox
	bind:checked={() => some.reactive.field, (value) => {
	     requestToUpdateMyField(value);
	}}
/>

However, I'm not sure whether performing side effects / async requests inside a bind setter is considered idiomatic in Svelte.

Another option would be treating the component as controlled and handling updates separately:

<Checkbox
	checked={some.reactive.field}
	onChange={(value) => {
		requestToUpdateMyField(value);
	}}
/>

But in that case, what’s the point of making checked bindable?

Also, is it considered normal for a component to support both approaches simultaneously?

For example:

• use bind: for simple/local state
• use onChange for async/server-backed updates

Or is it better to encourage only a single pattern consistently across the component API?

Would appreciate any guidance or examples from Svelte community.

[brunnerh]

If the component is general purpose where you do not know how excactly it will be used, it should provide (bindable) properties and events to be sufficiently flexible. If it is local to your project you can just expose whatever you need.

There are no hard rules around any of this, so I would say both approaches are valid since they make sense semantically. It is probably more important that you choose one approach and stick to that throughout your project for consistency. (Also, beware of race conditions when updating values asynchronously.)

[tamish560]

The cleanest pattern I've found is to not fight bind: but wrap the setter with a callback that handles the async part:

<script lang="ts">
    let checked = $state(false);
    
    async function handleChecked(newVal: boolean) {
        checked = newVal;
        // sync to external source
        await syncToStore(checked);
    }
</script>

<input type="checkbox" checked={checked} onchange={(e) => handleChecked(e.currentTarget.checked)} />

Using onchange instead of bind:checked gives you the hook point. You lose the two-way binding convenience but gain control over async updates. The tradeoff is worth it when the value lives in an async data source.

If you really need bind: to work with an external store, use a $derived that reads from the store and a setter that writes back:

<script lang="ts">
    let storeChecked = $state(false);
    
    const boundChecked = $derived({
        get: () => storeChecked,
        set: async (v: boolean) => {
            storeChecked = v;
            await pushToRemote(v);
        }
    });
</script>

<input type="checkbox" bind:checked={boundChecked} />

This keeps the bind: syntax but routes writes through your async path. The local state updates immediately for the UI, the remote sync happens in the background.