xstate VS Recoil

XState is a powerful library with comprehensive documentation. Keeping the documentation handy while building your next app with XState will be invaluable.

XState is an excellent library that simplifies the utilization of actors in JavaScript applications. While this article focuses on using React, these principles apply equally well to other frameworks. In fact, they can be implemented anywhere JavaScript is executed.

In this article, I want to share a personal journey of discovery in the world of state management. My path led me to XState, a tool that I believe is the best choice for managing state in modern applications like React, Angular, Vue, and others. This isn't just a professional advice; it's a personal recommendation based on real-world experience.

You add the current user state to a React Context or state management library, read from it on the top bar, and write to it after a user signs in. Done. No big deal, right?

Lastly, I know that I've omitted many great tools like XState, React Query, and SWR. These tools are utilities that are very scalable in their own right, but aren't full replacements for a good state manager.

Atom-based: splits states into tiny pieces of data called atoms, which can be written to and read from using React hooks. In this group, we have Recoil and Jotai.

recoil -> Designed to solve a specific problem. Not good for all use cases. Understand it first! You can learn more about it here.

Recoil Official Website

Recoil 🌀

Atomic libs include Recoil, Jotai, and the one I maintain: Zedux. Zedux especially was designed to work well with sockets and RxJS observables and has been getting some traction recently, so of course I recommend checking it out. Feel free to hmu with any questions.

However you may find better luck with Recoil which is developed by Meta, and is designed to work with Async data, and is a much simpler project to get started with.

Recoil introduced a new pattern for storing state and propagating updates. This atomic model has proven to scale up better than the singleton model at the cost of some hefty learning curves.

recoil is extremely similar to Riverpod but for React (both are backed by a data flow graph).

Before we proceed you can check the project on github. This implementation is for learning purposes, for production use check Jotai or Recoil.