Hook?

[alex-saunders]

Hey, first of all thanks for this project, it's great to see finite state machines gaining traction in react development and i'm a big advocate of them myself!

I'm interested whether this library has plans for offering a hook (e.g. useStateMachine or similar)? I'm interested in creating a solution myself but am not sure if it would be suitable to be included as part of this project, or as a separate package.

My rough idea is to have a useStateMachine(statechart) hook where statechart is an object which is then interpreted by xstate. This would return [State, transition] where State is a component (with is prop that can be a string, array of strings/glob pattern) and transition is a function that executes an action on the current state of the machine (e.g. transition('EVENT')). An 'optional' third value, machineState would also be returned, if the user wishes to tightly couple their UI with the internal machine's state.

Example usage would be similar to:

function App() {
	const statechart = { ... }

	const [State, transition, machineState] = useStateMachine(statechart);

	return (
		<button onClick={() => transition('TOGGLE')}>toggle</button>
		<State is="active">active</State>
		{ machineState === 'inactive' && <span>inactive</span> }
	)
}

State could maybe accept children as a pure React node or as a render prop function with visible (or similar) passed as a parameter.

[davidkpiano]

Just for reference, here's how you can use XState with hooks today: https://xstate.js.org/docs/recipes/react.html#hooks

Would be great to see this implemented into react-automata too!

[MicheleBertoli]

Thank you very much @alex-saunders for opening this issue, and @davidkpiano for your comment.

I'm glad you are passionate about state machines, and I appreciate you have ideas on improving this package.
It would be awesome to "rethink" react-automata, support xstate v4 and provide hooks.

I recently came across this project, did you see it @alex-saunders?
https://github.com/carloslfu/use-machine

[alex-saunders]

Hi @MicheleBertoli , I'd not seen the use-machine project before and it looks like a good interpretation of how a state machine might be implemented as a hook.

I suppose the differences between the ideas would be that use-machine solely returns the constructed machine and I'd like to return a <State /> component, similar to react-automata's current implementation, and a dedicated transition function (rather than machine.send).

Would these return values (along with the machineState as an 'optional' value) be something you see as useful for a state machine hook?

I like how use-machine employs the use of an 'actions' (or similar) object as part of the config, to enable running side effects on state entries/exits. I think this something we could definitely draw inspiration from as it allows us to run side effects without having to couple a component too closely with the machine (and seems a good alternative to not having component.instance available - like with the HOC).

Interested to get your thoughts on this.