Introduction

A UI can be tremendously complex nowadays. And the states depending on which the UI logic is changed, can be complex & hard to maintain also. An efficient way to handle the state changes can be controlled using the concept of Finite State Machine (FSM), a concept taken from a theory of core computer science, automata theory. What is FSM, how can we leverage it to handle our UI states, we all try to know the answers in this article.

What is a Finite State Machine?

In computer science, a finite state machine is defined by a mapping of states with given inputs. As per the input given, the machine transitions one state to another. Example would be a login-logout system, a user logs into the app, he goes from logged out to logged in state, then he logs out, he goes back from logged in to logged out state.

Log in-Log out state machine

Finite State Machine is a type of state machine that has a finite number of legal states. FSM can be categorised into Deterministic FSM & Non-deterministic FSM. A deterministic FSM has a definite input to state transition mapping, that is , for a particular input, we can surely tell about its next state. But in Non-deterministic FSM, more than one input can have the same next step. A deterministic FSM is represented by few symbols:

s: starting state
Q: set of all states
q: Final state
δ: Transition function
∑: finite set of input symbol where δ: Q x ∑ →Q

Let me provide an example of deterministic FSM, let’s consider a machine where s = {s0}, q = {s2}, Q = {s0, s1, s2}, ∑ = {a, b}.

A deterministic Finite State Machine

The above machine can accept a string, for example, abbb as a set of inputs but it can’t accept aab or bab.

Finite state machine concept can be applied in every domain, not just computer science, transportation, security, language etc sectors also.

State Machines and the UI

A UI also can be thought of as a finite state machine. It makes our UI more secure & robust. Using this concept, we may prohibit our UI to have illegal states. An example can be a payment gateway page & its corresponding subscription list, once payment is done & successful, then only the user can access his subscribed content. If the payment fails, then we do not let the user access the subscription.

XState: An FSM based state management library:

XState is a state management library that works on the principles of Finite State Machine.

It has a machine as the central state controller, the machine is constructed using an ID & the initial state, the set of legal states and the definition of transitions between them.

We can change the state of the machine using the transition function. Let’s see the code example.

Demonstration of Xstate using payment page example

In the above code, a state machine is generated by createMachine function from XState, it is given the required data like the initial state, all the legal states, and the transition mechanism.

So when a user does a successful payment it is obvious that the payment amount is more than 0, and the machine transitions to successful state & the user is sent to the content page.

If the payment is failed, then he’s redirected to the payment page. the transitions are done through the transition function, and transition function returns the next state of the machine, the value of which is utilized later on.

Let’s see the logic using a state machine diagram:

Payment controlled as a finite state machine

Conclusion

I have shown you a very trivial example of XState. But it can execute very complicated state management tasks. It can help you avoid many bugs and unintended state changes by defining a framework.

Although it's a great library for state management, we should only use it for complex and specific applications.

Don’t make it overkill.

So that’s it, I hope I’m able to give you a basic overview of XState’s application. See you later then, bye!

Build apps with reusable components like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo