State machines are great, so why aren’t we rewriting all of our async/await code to them?04:37 AM - 31 Dec 2020
Over the Christmas holiday, I dove into finite state machines because I was intrigued by its popularity. I built a couple of small apps using XState with React hooks, Vue 2 and Vue 3 (composition API), using TypeScript for every project.
I was seduced by the concept of finite state machines. For example, in my project with Vue 2 I was dealing with multiple intricate states, and I was eager to clear things out thanks to XState. It took me a while to get a grasp on how to use that library, which has a large surface area and is not easy to get started with. I took a course on Udemy, which provided me with a solid foundation.
However, I quickly found out that XState doesn't play well with Vue 2 and that I would need to use Vuex anyway. . My original thought was to replace Vuex with XState and I don't see the point of having to state management solutions.
Then I built a second, smaller project with Vue 3 and its composition API. This time, the integration of XState was smooth and I was able to manage my data globally thanks to XState context. Since the project was quite small, I can't really tell if this approach would scale well in a larger codebase.
The experience with React Hooks was very similar to Vue 3 Composition API. I also would like to say that XState integrates very well with TypeScript.
In conclusion, I think that XState is not a good fit for the websites I usually build for clients, which are JAMstack websites with simple state logic. But it's true that XState forces developers to think of all the possible outcomes and a seemingly simple state logic can actually hide complex workflows and possible paths. However, covering all those paths takes time, and time is money for the client. It's sad, but it's not rare that I have to build forms where in case of an error I just log it to the console.
However, if I had more time, I wouldn't implement XState, but rather add a bug tracking solution (LogRocket, Sentry, Bugsnap, etc.) or write E2E tests.
I'm persuaded that XState is the perfect tool for specific applications, but it definitely doesn't make sense to use it every time. For example, I find the TodoMVC example on the XState website to be incredibly complex and convoluted.