Splitting the view and the brains in JS — state machines with XState (in French)

If you are a frontend developer, you probably know how tricky managing state can be. Initial states, unexpected ones, race conditions... these are only some of the reasons that can cause bugs. Managing state is made especially difficult by the number of sources that state and state modifications originate from:

• API calls
• the cache you may have locally
• interactions within the component that has the state
• changes that happen in a parent or a child component

One solution is to adopt finite state machines. Using state machines, you remove the state from the component and move it to a machine which only job is to be in a deterministic state and maintain the logic you wanted for your application using:

• a finite number of nodes to represent the various states you can be in
• a finite number of events that represent interactions with the machine
• transitions that determine the next state and the changes that happen in the machine
• an initial state

Finite state machines has been a well-known abstraction and computational model but is rarely used in frontend applications. It is however an elegant solution to manage the state of an application (or a subpart), that has the additional perk of being framework agnostic.

About this Meetup

This Meetup will be held in French. We will be focusing on:

• what are finite state machines and how to use them
• the XState library
• an example of a Login screen in React, using XState

The concept of a state machine can be fairly complex so it is suggested that you have good knowledge of Javascript and frontend development. If you want to be comfortable, you can read some documentation prior to the Meetup:

• What are state machines? https://statecharts.dev/what-is-a-state-machine.html
• The XState documentation page: https://xstate.js.org/
• You can even play around with this very good education game on state machines: https://mastery.games/post/state-machines-in-react/