Modelling application behaviour with the XState library (in React)

If you’ve ever had a moment while building your web application, where you loudly exclaimed “Wait, my UI is NOT supposed to do THAT in this situation!“, then this talk is for you!

​

As your application gets larger and more complex, guaranteeing correct and robust behaviour becomes an increasingly difficult task. Managing a growing multitude of different states and events throughout your user interface, and ensuring “bad things” do not happen, often proves unwieldy.

​

What is sorely lacking is a formal approach to modelling web applications and their various states, events and actions. The notion of “state machines” and associated abstractions have long been been used to model and build all types of software; with XState, we gain such power to properly design, implement, test and visualize state machines in frontend scenarios.

​

Marc Klefter, tech lead at Edument, will guide you through the XState library and apply it to modelling the user interface of a React application. 

You’ll learn

• Fundamental concepts such as states, events, transitions and effects.

• How to model application behaviour and define, view and interact with state machines in the XState Visualizer.

• How to utilize XState in React components.

• Best practices when working with state machines (forget about those pesky “isLoading” and “hasError” booleans).

After this webinar, you’ll have a solid grasp of XState and state machines, and how they can help you take control of all parts of your application.