DEV Community

Jérôme Pott
Jérôme Pott

Posted on

1

My personal experience with XState

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.

More opinions on XState on Reddit

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay