What should I name my states for my XState state machine?

2upmedia

Jorge Colon

Posted on February 23, 2020

What should I name my states for my XState state machine?

I recently implemented XState for a project that went to production. Thinking in terms of state machines was completely different from my usual way of writing programs.

Here are the lessons that I learned figuring out what states to choose and what to name them.

In general you should think of your application as what different states it's in over time. So lets look at the dictionary definition for the word state.

"the particular condition that someone or something is in at a specific time" - Oxford American Dictionary

So what are the different conditions that your application could be at a specific time? Look for both states that show what's happening at the moment and what happened in the past.

What you want to focus on, are the states that change the behavior of your application. If that state doesn't the behavior of your application then you probably don't need to add it to your state machine.

Some examples of states:

  • idle
  • loading
  • loaded
  • inProgress
  • selecting
  • selected
  • errored
  • rejected
  • draft
  • published
  • unpublished
  • publishing
  • loggingIn
  • loggedIn
  • loggingOut
  • loggedOut

Once again, think about what condition your application is in over time. Put names to those.

Thinking about your application in this way, what states would you have? Comment below.

💖 💪 🙅 🚩
2upmedia
Jorge Colon

Posted on February 23, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related