Community: Frequently Asked Questions

Curated Q&A from community discussions about state machines in frontend development.

Questions

What's the difference between a state machine and a statechart?

A state machine is the basic formalism (states, events, transitions). A statechart extends this with hierarchy (nested states), parallelism (orthogonal regions), and history states. XState implements statecharts.

Do I need XState to use state machines?

No. You can implement state machines with plain JavaScript objects and a switch statement. XState provides tools for visualization, simulation, and type safety.

When should I use a state machine vs. useState?

Use state machines when a component has multiple interacting states (loading + error + data), sequential flows (multi-step forms), or complex guard conditions. For simple toggles, useState is fine.

Can I use state machines with my framework?

Yes. XState works with React, Vue, Svelte, Angular, and vanilla JS. See Integrations for framework-specific guides.

How do I test state machines?

State machines are easy to test — send events and assert the resulting state. No DOM mocking needed. See Testing.

Glossary

Learn

TODO

Aggregate questions from comments

Add community Q&A section

Link to relevant discussions