Second argument for useMachine

[niksy]

In the usage example for combobox, second argument is used for useMachine hook/composable, with collection added as value for context property.

What is the meaning of that context property? Collection is already provided as property to first useMachine argument. I can’t see that it’s used for other Zag components.

[segunadebayo]

Hi @niksy,

The second argument to the useMachine hook can be used to sync/update the machine's context at runtime.

The first argument's context represents the "initial" context of the machine. It can't be updated afterward. In this case, the collection needs to be kept in sync so that keyboard navigation and value retrieval can work as expected.

For a static select component where the options are known ahead of time, the initial collection works just fine. In the case of dynamically changing items, then it needs to be kept in sync with the machine.

[niksy]

Thank you!

[gbouteiller]

Hello,
Sorry if my question is naïve since I'm new to state machines and Zag. I'm currently working on a svelte 5 version of zag, and, looking at the source code in the different frameworks, I understand the use of context in the second argument of the react version (it's used on the website to be reactive to the change of props but it doesn't seem to do anything in solid or vue as there is no rerender and if you want the same behavior you have to use a watcher or effect with service.setContext) but I also see other properties like actions and state and I don't see any use of them in zag or ark (or I missed them :) ). What are they for?