Hooks
State transition hooks
$onEnter
and $onLeave
are special actions that are automatically executed when entering or leaving a state. They are essentially hooks that allow you to perform certain actions or side effects during the state transitions.
$onEnter
: This hook is called when the machine enters a new state. You can use this hook to perform setup actions or to log that a new state has been entered. For example,$onEnter() { console.log("Entering STATE_ONE"); }
would log "Entering STATE_ONE" whenever the machine transitions into the "STATE_ONE" state.$onLeave
: This hook is called when the machine is about to leave a state. You can use this hook to perform cleanup actions or to log that a state is being exited. For example,$onLeave() { console.log("Leaving STATE_ONE"); }
would log "Leaving STATE_ONE" whenever the machine transitions out of the "STATE_ONE" state¹.
const machine = createMachine('counter-machine', {
initial: "INITIAL",
state: {
INITIAL: {
$onEnter(from: string, to: string) {
console.log(`Entering ${to}, leaving: ${from}`)
},
$onLeave(from: string, to: string) {
console.log(`Leaving ${from}, entering: ${to}`)
}
},
AGREED: { /* (...) */ }
}
})
machine.changeState('AGREED')
console output:
> Leaving "INITIAL", entering: "AGREED"
> Entering "AGREED", leaving: "INITIAL"