1. We have an initial state of green.
2. We have a timer, and, after the timer hits 30 seconds, the state will change to yellow.
3. Now that our state is yellow, after the timer hits 10 seconds, the state will change to red.
4. In our red state, after the timer hits 30 seconds again, it will change our state to green.

1. We have a finite number of states and an initial state.
2. The state can only change (transition) in response to an input.
3. After the state changes, it produces an output.

• A finite number of states. If you have a finite number of states, you already know how your state logic is going to look and when should you change from one state to another.
• Visualized modeling. With finite state machines you can use a state machine visualization tool to create your state machine and visualize how your state logic will look. Also it gets easier to identify errors or when you’re changing to a wrong state.
• Avoid unexpected side effects . This is one of the most powerful advantages of finite state machines. It’s relative to the first point, but with a finite number of states, you’ll drastically reduce the number of unexpected side effects that you create in your state logic.
• Relatively easy to debug. Debugging a finite state machine is relatively easy. You can use a state machine visualization tool for that, and it’ll save you a few hours when you’re debugging.
• Strong test coverage. With a finite number of states, it gets pretty easy to write tests for your state logic. If you don’t know how and to where your state is going to change, you can avoid a lot of useless tests and remove those side effect tests that we usually write.

Creating our First Finite State Machine

const lightMachine = Machine({
  ...
});

const lightMachine = Machine({
 id: 'lightMachine',
 initial: 'green'
});

States

const lightMachine = Machine({
 id: 'lightMachine',
 initial: 'green',
 states: {
   green: {},
   yellow: {},
   red: {}
 }
});

const lightMachine = Machine({
 id: 'lightMachine',
 initial: 'green',
 states: {
   green: {
     on: {
       YELLOW: 'yellow'
     }
   },
   yellow: {
     on: {
       RED: 'red'
     }
   },
   red: {
     on: {
       GREEN: 'green'
     }
   }
 }
});

Context

context: {
 updated: 0
},

Actions

const updatedAction = assign({
 updated: (context, event) => context.updated + 1
})

green: {
     on: {
       yellow: {
         target: 'yellow',
         actions: 'updatedAction'
       }
     }
   },
   yellow: {
     on: {
       red: {
         target: 'red',
         actions: 'updatedAction'
       }
     }
   },
   red: {
     on: {
       GREEN: {
         target: 'green',
         actions: 'updatedAction'
       }
     }
   }

const updatedAction = assign({
 updated: (context, event) => context.updated + 1
})
const lightMachine = Machine({
 id: 'lightMachine',
 initial: 'green',
 context: {
   updated: 0
 },
 states: {
   green: {
     on: {
       YELLOW: {
         target: 'yellow',
         actions: 'updatedAction'
       }
     }
   },
   yellow: {
     on: {
       RED: {
         target: 'red',
         actions: 'updatedAction'
       }
     }
   },
   red: {
     on: {
       GREEN: {
         target: 'green',
         actions: 'updatedAction'
       }
     }
   }
 }
});

Usage in React

yarn add xstate @xstate/react

import { Machine } from "xstate";
import { useMachine } from "@xstate/react";

const [current, send] = useMachine(lightMachine, {
 actions: { updatedAction }
});

return (
<div>
<h1>Light traffic</h1>
<h1>Updated: {current.context.updated} times</h1>
{current.matches('green') ? (
<div style={{ width: 60, height: 60, borderRadius: "50%", background: "green", marginTop: 10 }} />
): null}
{current.matches('yellow') ? (
<div style={{ width: 60, height: 60, borderRadius: "50%", background: "yellow", marginTop: 10 }} />
): null}
{current.matches('red') ? (
<div style={{ width: 60, height: 60, borderRadius: "50%", background: "red", marginTop: 10 }} />
): null}
</div>
);

<button
 disabled={!current.matches('green')}
 onClick={() => send('YELLOW')}>
  YELLOW
</button>

const Light = () => {
const lightMachine = Machine({
 id: 'lightMachine',
 initial: 'green',
 context: {
   updated: 0
 },
 states: {
   green: {
     on: {
       yellow: {
         target: 'yellow',
         actions: 'updatedAction'
       }
     }
   },
   yellow: {
     on: {
       red: {
         target: 'red',
         actions: 'updatedAction'
       }
     }
   },
   red: {
     on: {
       GREEN: {
         target: 'green',
         actions: 'updatedAction'
       }
     }
   }
 }
});
const updatedAction: any = assign({
 updated: (context: any, event: any) => context.updated + 1
})
const [current, send] = useMachine(lightMachine, {
 actions: { updatedAction }
});
return (
<div>
<h1>Light traffic</h1>
<h1>Updated: {current.context.updated} times</h1>
{current.matches('green') ? (
<div style={{ width: 60, height: 60, borderRadius: "50%", background: "green", marginTop: 10 }} />
): null}
{current.matches('yellow') ? (
<div style={{ width: 60, height: 60, borderRadius: "50%", background: "yellow", marginTop: 10 }} />
): null}
{current.matches('red') ? (
<div style={{ width: 60, height: 60, borderRadius: "50%", background: "red", marginTop: 10 }} />
): null}
<button disabled={!current.matches('green')} onClick={() => send('YELLOW')}>YELLOW</button>
<button disabled={!current.matches('yellow')} onClick={() => send('RED')}>RED</button>
<button disabled={!current.matches('red')} onClick={() => send('GREEN')}>GREEN</button>
</div>
);
};