State machine hackathon webinar

This webinar is an introduction to XState and state machines. We cover the basics of how to create and use state machines to model your software. We also discuss how they can be used to help manage and debug complex applications. Finally, we explore some real-world examples of how XState and state machines are being used today. We hope this webinar will leave you with a strong understanding of how to use XState and state machines to improve your applications!

0:00 Intro
1:04 What is Stately?
1:42 What are state machines and statecharts?
4:04 Exporting your statechart from the editor to code for XState
4:45 What is XState and how to use it
7:44 Using the editor to model a traffic light statechart
10:10 Implementing the traffic light statechart in XState
13:28 Using guards to branch conditionally
15:34 What we’re building: a shopping cart/multi-step form
17:13 Modeling our checkout machine
28:24 Using our checkout machine code with XState
59:00 Visualizing and inspecting our checkout machine
1:05:54 The final checkout machine
1:10:38 Representing tasks in states
1:22:07 The upcoming hackathon
1:24:15 Wrap up

Questions:
34:15 What is the difference between useMachine and useInterpret?
38:49 Why would we useMachine over useInterpret and useSelector?
43:54 Would it be better to decouple from the machine internal state and only listen to the context?
45:40 Can I make a transition based on the value in a state?
55:26 Why use XState instead of Zustand, Jotai, Redux, or other state management libraries?
1:01:53 Have computer-derived properties landed in XState yet?
1:03:43 Is there a way to have a condition in a transition action to change the target state?
1:08:50 Is can(s)’s value only related to conditions of a state?
1:16:07 If we use SSR (server side rendering) how can we use the state machine?
1:16:50 Can you use XState instead of React query for server state?