--- title: You're doing state wrong | daily.dev description: Implementing component state as a combination of booleans can lead to impossible states. Using state machines can eliminate impossible states, improve... canonical: https://daily.dev/posts/you-re-doing-state-wrong-bx3pmsyvq twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: You're doing state wrong | daily.dev og:description: Implementing component state as a combination of booleans can lead to impossible states. Using state machines can eliminate impossible states, improve... og:url: https://daily.dev/posts/you-re-doing-state-wrong-bx3pmsyvq og:image: https://api.daily.dev/og/posts/bX3PmSYvq.png og:image:alt: You're doing state wrong og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # You're doing state wrong **[DEV](https://daily.dev/sources/devto)** · 3 min read · 170 upvotes · 7 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@nhusby** · 3 upvotes > 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... **@tomaszbuszewski** · 1 upvotes > 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. **@pavlom** · 1 upvotes > 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). **@snacksident** · 1 upvotes > honestly love this, been working on a personal project and might give this implementation of state a shot. **@joeattardi** · 0 upvotes > 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. ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#typescript](https://daily.dev/tags/typescript) [View this post on daily.dev](https://daily.dev/posts/you-re-doing-state-wrong-bx3pmsyvq) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"You're doing state wrong","url":"https://daily.dev/posts/you-re-doing-state-wrong-bx3pmsyvq","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/you-re-doing-state-wrong-bx3pmsyvq"},"datePublished":"2024-06-11T08:45:51.108Z","dateModified":"2024-10-05T16:53:59.149Z","description":"Implementing component state as a combination of booleans can lead to impossible states. Using state machines can eliminate impossible states, improve...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d32a4e356c07db9f7614f6d900ee33ed?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d32a4e356c07db9f7614f6d900ee33ed?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"DEV","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"DEV","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/devto","url":"https://daily.dev/sources/devto"},"commentCount":7,"discussionUrl":"https://daily.dev/posts/you-re-doing-state-wrong-bx3pmsyvq","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":170},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":7}],"keywords":"webdev,javascript,typescript","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":3,"name":"You're doing state wrong"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/you-re-doing-state-wrong-bx3pmsyvq","comment":[{"@type":"Comment","text":"Most of the problems demonstrated here are from poor choices of what variables are even necessary and what types represent them.\nLike 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.\nThe 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.\nThere 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.","datePublished":"2024-07-09T22:19:21.557Z","url":"https://daily.dev/posts/bX3PmSYvq#c-xCv2frjgP","author":{"@type":"Person","name":"Nick Husby","url":"https://daily.dev/nhusby","image":"https://lh3.googleusercontent.com/a/ACg8ocKnB8wAY1lZzUU8Ju_l7TCYV1uOR_Jnn8jB1n7Kc4U47jYB8Wg=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"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.","datePublished":"2024-06-19T07:06:39.806Z","url":"https://daily.dev/posts/bX3PmSYvq#c-VUBQGShSO","author":{"@type":"Person","name":"Tomasz","url":"https://daily.dev/tomaszbuszewski","image":"https://media.daily.dev/image/upload/s--Xz3WReNZ--/f_auto/v1720688454/avatars/avatar_jdQtdJZTTdmST2wwQzxeG"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"One shall push “events” to the state machine and avoid switching state directly from the “outside world”.\nIt 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).","datePublished":"2024-07-11T08:31:25.950Z","url":"https://daily.dev/posts/bX3PmSYvq#c-e4dVRYwec","author":{"@type":"Person","name":"Pavlo M","url":"https://daily.dev/pavlom","image":"https://lh3.googleusercontent.com/a/ACg8ocIUVj8gNTLSbuSF73m0AUNHcpl_WUDVafgs220buVSjzPr7VLaq=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"honestly love this, been working on a personal project and might give this implementation of state a shot.","datePublished":"2024-06-14T04:54:31.293Z","url":"https://daily.dev/posts/bX3PmSYvq#c-4NQdoOwOA","author":{"@type":"Person","name":"andy","url":"https://daily.dev/snacksident","image":"https://media.daily.dev/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"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.","datePublished":"2024-07-03T14:20:50.789Z","url":"https://daily.dev/posts/bX3PmSYvq#c-491MYqnQJ","author":{"@type":"Person","name":"Joe Attardi","url":"https://daily.dev/joeattardi","image":"https://lh3.googleusercontent.com/a/ACg8ocLP0I53n9TGWcsgvVNTJ-cgN5WnOpFulskK56mteI_4ZpOqTXjxiQ=s96-c"}}]} ```