Intro to Xstate — a true state management library for react

When it comes to writing applications using react, we end up having a huge package.json file with additional libraries that are used to manage application state and behavior. And there are so many options: Redux, Unistore, Mobx, Immerjs and so on. There is one big issue with those libraries though. They aren’t managing application state, but rather its data. You can treat all of them as an application cache level 0.

In this article, I want to introduce you to, in my opinion, one true state management library — Xstate. I will do that by writing a simple search application using Github's public API. I won't cover layout build nor styling for this project, but instead, feel free to explore this codesandbox:

So, what is Xstate? Well, it’s a state management library 🙂. It describes the application state using finite state machines and statecharts. It adheres to the SCXML specification which means that its mechanisms are well defined and it does not introduce any new patterns (like facebook’s FLUX). The nice part of statecharts and Xstate, in particular, is…