Implementing component state as a combination of booleans may seem like the easiest way to do it, but... Tagged with webdev, javascript, programming, typescript.

Dev.to is a community platform for developers, offering resources, discussions, and networking opportunities to empower individuals in their coding journey. Developers can learn new programming languages, frameworks, and tools, engage in discussions on best practices, and share their experiences with fellow developers to enhance their skills and grow their professional network.

Implementing component state as a combination of booleans can lead to impossible states. Using state machines can eliminate impossible states, improve component readability, and simplify code.

You're doing state wrong

Most of the problems demonstrated here are from poor choices of what variables are even necessary and what types represent them.
Like what’s the difference between paused and stopped? Maybe stopping resets? In that case one boolean for isPlaying and a position variable are all that’s necessary. Then stopping is just pausing with a side effect of resetting position. A state machine isn’t a bad choice, but just keeping track of the right things would solve the problem too.
The form is a possibly worse example. They’ve clearly converted all possible states to booleans instead of logical data. Just use 2 booleans, and problem solved, no state machine necessary. How about isValid, and isSubmitting? Then you can use isSubmitting to toggle a loading widget.
There are certainly use cases for state machines, but it’s probably also worth just modeling your data right, and figuring out what can be derived from properly modeled data.

I’ve been controlling state with state machine for quite some time now. It’s the best way to do it, not only because of impossible state avoidance, but simply due to its readability.

One shall push “events” to the state machine and avoid switching state directly from the “outside world”.
It is up to the state machine to encapsulate the state graph and decision logic on how to switch states (or issue asserts depending on how state and even are combined).

honestly love this, been working on a personal project and might give this implementation of state a shot.

This is what I do in my projects. As the last section shows, you can still use booleans that are derived from the status so you get the best of both worlds.