Model Finite Number of State and Events with State Machines

Segun Adebayo
InstructorSegun Adebayo
Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

A state machine is a method of modeling a finite number of states and events. When an event is sent, actions and transitions are triggered within the machine to update it's state.

Here we model a a state machine for a check box. There are unchecked and checked states with a click event that transitions the machine between these two states.

Instructor: [0:00] A state machine is a method of modeling a system that has finite number of states and events. [0:06] At any given state, when the machine is sent an event, it causes the machine to execute actions and transitions. In this example here, we're modeling the native checkbox element. Let's assume the checkbox starts in the unchecked state. Clicking the checkbox takes you to the checked state. If you click the checkbox again, it takes us back to the unchecked state.

[0:28] This is what we mean when we say a state machine has finite number of states. In this contract example, we have unchecked and checked state, and a single event called Click.

[0:40] Events in the state machine can trigger transitions as well as actions and side effects.

[0:46] Join me on this journey. We're going to try to build a robust pin input component. We'll see you on the other side.

~ 5 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today