[Svelte] Updating Props after the fact

[Oshimani]

Hey guys,

I have a question regarding reactivity and props in zag.js using svelte. I am building a component library but I am running into strange bugs.

First let's take a look at the example code for the switch component (1:1 copy from the docs):

<script lang="ts">
  import { normalizeProps, useMachine } from "@zag-js/svelte"
  import * as zagSwitch from "@zag-js/switch"

  const id = $props.id()
  const service = useMachine(zagSwitch.machine, {
    id,
    name: "switch",
  })
  const api = $derived(zagSwitch.connect(service, normalizeProps))
</script>

<label {...api.getRootProps()}>
  <input {...api.getHiddenInputProps()} />
  <span {...api.getControlProps()}>
    <span {...api.getThumbProps()}></span>
  </span>
  <span {...api.getLabelProps()}>{api.checked ? "On" : "Off"}</span>
</label>

Notice how there is no derived rune on the useMachine-Statement, meaning it will not reflect changes to the props.

Imagine this use case:

I have a form in which you have multiple fields like a select and a switch. Selecting option A from the select should prevent users from switching the switch to on, so I would like to disable it depending on a state-rune.

<Switch disabled={disableSwitch} />

Now for my implementation of the switch (I called it toggle and created a component for each api.getXYZProps() method):

<script lang="ts">
	import * as zagSwitch from '@zag-js/switch';

	import { cn } from '../../utils/classes.utility';
	import Control from './control.component.svelte';
	import Label from './label.component.svelte';
	import { setRootContext } from './root.context';

	let {
		id: customId,
		label,
		checked = $bindable(),
		value = $bindable(),
		color = 'primary',
		class: classProp,
		children,
		...restProps
	}: RootProps = $props();

	const id = $props.id();
	const [machineProps, rootProps] = $derived(
		zagSwitch.splitProps({
			...restProps,
			id: customId ?? id
		})
	);

	const service = $derived(
		useMachine(zagSwitch.machine, {
			...machineProps,
			value,
			get checked() {
				return checked;
			},
			onCheckedChange(details) {
				checked = details.checked;
				machineProps.onCheckedChange?.(details);
			}
		})
	);
	const api = $derived(zagSwitch.connect(service, normalizeProps));

	setRootContext(() => ({ api, color }));

	const rootClasses = $derived(
		cn(
			'group flex w-fit cursor-pointer items-center gap-2',
			'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
			classProp
		)
	);
</script>

<label {...api.getRootProps()} {...rootProps} class={rootClasses}>
	<!-- HIDDEN INPUT -->
	<input {...api.getHiddenInputProps()} />

	{#if children}
		{@render children()}
	{:else}
		<!-- DEFAULT -->
		<Control />
		<Label>{label}</Label>
	{/if}
</label>

Notice how I wrapped the useMachine-Statement with derived. I did this because changes to props like disabled would not be reflected otherwise and I got a elint warning about useMachine only using the initial value of machineProps.

EDIT: When I remove the $derived rune from useMachine the component works as expected but obvioulsy will not listen to prop changes.

Now when I use the Toggle component in my app I can only toggle it twiche (once on and once off). It switches to true and back to false as expected but then it won't react to any inputs anymore. I have the suspicion that recreating the service every time a prop changes breaks the machine in some way.
Also the behavior changes when I insert $inspect(checked) runes then it will only toggle once.

---

So my question is, how am I supposed to implement reactive props and bindings properly?

I am currently running version 1.24.2 of @zag-js/svelte and @zag-js/switch

[Oshimani]

Consulting Claude on this issue I came to the possible solution of putting my props inside a function and passing that to the machine:

// Pass a function that returns the config - this makes it reactive
const service = useMachine(
	zagSwitch.machine,
	() => ({
		...machineProps,
		value,
		checked,
		onCheckedChange(details) {
		checked = details.checked;
			machineProps.onCheckedChange?.(details);
		}
	})
);

[segunadebayo]

Hi! Yes, using a function for the context is the correct solution here. Let me explain why:

The Problem

Zag machines capture their context once during initialization. When you pass a static object to useMachine, the
machine takes a snapshot of those values and doesn't automatically react to prop changes.

The Solution

By passing a function that returns the context, you're enabling the machine to receive fresh values on each evaluation:

const service = useMachine(zagSwitch.machine, () => ({
  ...machineProps,
  value,
  checked,
  onCheckedChange(details) {
    checked = details.checked
    machineProps.onCheckedChange?.(details)
  },
}))

This works because:

1. Reactive Context: The function re-evaluates whenever dependencies change, ensuring the machine always has current
   prop values
2. State Preservation: The machine's internal state remains intact while context gets updated
3. Framework Integration: This pattern aligns with Svelte's reactivity model

This approach ensures single-directional data flow while maintaining reactivity. Your solution is on the right track!

[Oshimani]

Thanks for your answer. This should be updated in the documentation, I took the solution that is being presented for the checkbox and ported it over to the switch component.

https://zagjs.com/components/svelte/checkbox#controlled-checkbox

I will look into updating the docs, if I find some time to do so.