Welcome to XState! 👋
In this course we will go from zero knowledge of XState, to building complete solutions for all kinds of state management use cases.
But first, why learning XState? Here is my answer:
XState is the last state management library you will ever need 💯
Whereas other state management libraries (Redux, MobX, Zustand) are great for specific use cases, XState is a full state orchestration solution that covers all possible use cases.
That sounds grandiose indeed 🤔
This course is my attempt to deliver on this promise by showing you why this is the case.
Best case scenario you solved all your state management problems (that's what I claim!). Worst case you learned something new and improved your state management skills. Sounds fair, right?
Why choosing XState
I kept postponing looking into XState. My main concerns, like most people, were type-safety and overall complexity. Meanwhile, I kept jumping between all the other libraries, often using multiple at the same time.
Until XState v5.
XState v5 introduces two key features:
- Actors as the core model of abstraction
- Type safety
The first week of working with XState I was in ecstasy! (I wrote about this in my newsletter).
I was able to replace all other libraries with just XState. It covers all uses cases.
A quick online exploration reveals many other individuals and teams having the same experience after working with XState for a while:
"For me using xstate was a game changer. Pulling logic out into a state machine gives you so much clarity over your application logic. Also nice to have your business logic defined with something that is framework agnostic."
"Once you see the light of state machine based UI's, it's immediately obvious and you never want to go back."
"I am the tech lead at a large UK company. I have used Xstate as the sole source of all application state and logic in two large-scale React Native applications, with two more planned. [...] I consider my applications to not be React Native applications that use Xstate, but instead as Xstate applications that use React Native as their rendering layer.
In the latest State of React survey the comments about XState also paint an interesting picture:
"love it for complex, stateful UIs with a lot of context-aware keybinds etc. It's a bit like typescript, but for state. Makes you move a bit slower and change the way you approach things, but ultimately results in better, way more stable code."
What's the catch?
Two words: Learning curve.
XState is build on a completely different model compared to all other libraries. Instead of direct state changes (useState), reducers (Redux), or set methods (Zustand), XState is instead built on the Actor model and State machines.
This new mental model of thinking about state makes XState harder to learn for beginners. XState also makes all states and their interactions explicit, which initially causes the code to be more verbose and complex.
These reason make XState hard to learn. But fear not! This course is your solution! 💯
The course is intentionally designed to bridge the gap and teach you the benefits of XState, in practice.
We will start from useState and useReducer implementations, show their benefits and limitations, and then refactor the same code to use XState.
The course is organized in small lessons, each introducing one new concept. At the end, you will be able to combine all the features of XState to implement real world UIs.
Sounds exciting! Let's get started 🚀