React Hooks for Machine

Once you've created a machine, you can integrate it into your React components using Retomus-provided hooks.

🧩 useState

const count = machine.useState('count');

Returns a reactive value from the machine's state context.

const ref = machine.useRef('scrollRef');

Access a mutable ref-style value. Useful for non-reactive data like DOM refs, timers, etc.

const status = machine.useStatus();

Returns the current machine status (e.g., 'idle', 'loading').

const increment = machine.useAction('increment');

<Button onClick={() => increment({ step: 1 })}>+</Button>;

Returns a callable function for the action.

const isReady = machine.useFlag('isReady');

Used to check machine initialization flags like isReady, isReadyCtx, isReadyActions.

All machine and context hooks are generated based on their value category IDs.

Retomus uses the following naming rule:

use${CapitalizedCategoryId}

For example:

const useSv = machine.useSv('countSharedValue');

If your value category has id: 'custom', the generated hook will be useCustom().

Out of the box, Retomus provides two built-in value categories:

ID	Hook Name	Description
`state`	`useState`	Reactive application state
`ref`	`useRef`	Mutable non-reactive references

You can also define your own via createRetomusConfig() and they will become available as additional hooks.