XState by Example: March 2024 Update

Hey there!

Thank you for subscribing to XState by Example's newsletter. I'm reaching out to you for the first time to give you a quick update on the project.

Since the launch of XState by Example on January, I released many resources on the website:

• Two new machines: User Activity and Notification Center examples
• A new Tips and Tricks section with already two tips
• Three YouTube videos to watch me build the machines step by step

Let's look at these new resources if you haven't seen them all yet.

Two new machines

Two new machines landed on XState by Example: the User Activity and Notification Center examples.

The User Activity example reimplements the useIdle composable from the VueUse library. It's meant to detect when the user becomes inactive on the page. If the user becomes inactive, you might want to act by showing an alert or stopping a countdown. This state machine is an excellent foundation for implementing that.

The Notification Center can control many independent notifications displayed simultaneously. It assigns one actor per notification and uses cross-actor communication. This example defines two state machines: notificationCenterMachine and notificationMachine. The notificationCenterMachine is the root state machine and spawns many notificationMachines. This is an excellent case for using the actor model with XState.

Tips and Tricks

XState can sometimes be tricky, and learning to model things effectively is complex. For this reason, I want to document the best practices and patterns that make it easier for me to implement and maintain state machines.

The first two tips and tricks are:

• Control a CSS animation with XState. JavaScript doesn't always have to fully manage everything; sometimes, especially for basic animations, we can delegate some work to CSS. In this article, I explain how XState can be used to manage the CSS animations behind the Notification Center demo declaratively.
• Use a final state instead of a global id target. Final states are an excellent pattern for structuring flows with an end state. They're a better option than relying on targets with a global id.

YouTube videos

I will try to make a video for each example on XState by Example. Many people prefer the video format, and I want to reach them.

The first video I recorded is about the debouncing example:

I also recorded a video about the counterpart of the debouncing pattern: the throttling pattern.

The most recent video is about the User Activity example. I enjoyed making this video and even added a bonus about making a state machine configurable via the new input property of XState v5.

I want to create a resource for you

I want XState by Example to be an excellent resource for the community based on what people want. I already got great feedback and advice, and I thank every person who helped me in this journey.

Do you have expectations about the examples XState by Example should deliver or things I should prioritize? Please answer the survey below or reply to this email to share your feedback.

Thank you for reading, and happy XStat-ing to you until next time! If you have any question with XState, feel free to reach out to me!

Best,
Baptiste