[{"_1":2,"_1146":-5,"_1147":-5},"loaderData",{"_3":4,"_18":19},"root",{"_5":6,"_7":8,"_9":10,"_11":10,"_12":13,"_14":15,"_16":17},"isProd",true,"enableStats",false,"domain","dailyplanet.io","siteHost","sentryTrace","1a798db5877b4304a65b0cfe0655622f--0","sentryBaggage","sentry-environment=production,sentry-trace_id=1a798db5877b4304a65b0cfe0655622f,sentry-sampled=false","remixVersion",2,"routes/$",{"_20":21,"_1104":1105},"json",{"_22":23,"_24":25,"_26":-5,"_27":-5,"_28":-5,"_29":8,"_30":-5,"_31":32,"_462":6,"_42":463,"_473":-5,"_474":475,"_1077":1078,"_1079":6,"_11":1080,"_1081":1080,"_1082":1083,"_1099":1100},"prefersLanguages",[],"viewTerm","comments","panelParam","openComment","accountUid","isInspect","inspectTab","document",{"_33":34,"_436":437,"_438":439,"_440":441,"_442":443,"_444":445,"_446":447,"_448":449,"_453":454,"_455":45,"_456":457,"_460":461},"content",[35,74,119,147,196,240,290,321,349,370],{"_36":37,"_38":39},"children",[],"block",{"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_72":73,"_63":64},"type","Paragraph","id","Yl2K_LSQ","revision","bafy2bzacebkqzb64fcvmh5ovzsectjkvnjnz5zplcytarmy2gcuwsu3w7yba2","attributes",{},"annotations",[50,65],{"_40":51,"_52":53,"_57":58,"_46":62,"_63":64},"Bold","starts",[54,55,56],162,170,182,"ends",[59,60,61],168,176,193,{},"link","",{"_40":66,"_52":67,"_57":69,"_46":71,"_63":64},"Italic",[68],417,[70],428,{},"text","State machines can sound intimidating at first — all those diagrams and boxes and arrows. But at the heart of it, they’re built on three incredibly simple ideas: states, events, and transitions. If you've ever handled a button click or shown a loading spinner, you've already worked with them. This week, we're going to demystify how these pieces fit together and why they can make your UI logic feel like it finally makes sense.",{"_36":75,"_38":111},[76,83,90,97,104],{"_36":77,"_38":78},[],{"_40":41,"_42":79,"_44":45,"_46":80,"_48":81,"_72":82,"_63":64},"nMfdZKTf",{},[],"In the last issue, we looked at why state machines are a better way to model UI logic. This week, we’re breaking down the three concepts that power every state machine:",{"_36":84,"_38":85},[],{"_40":41,"_42":86,"_44":45,"_46":87,"_48":88,"_72":89,"_63":64},"Iu1orm1x",{},[],"States – the different modes your UI can be in",{"_36":91,"_38":92},[],{"_40":41,"_42":93,"_44":45,"_46":94,"_48":95,"_72":96,"_63":64},"xQUYl6x3",{},[],"Events – the things that happen to trigger change",{"_36":98,"_38":99},[],{"_40":41,"_42":100,"_44":45,"_46":101,"_48":102,"_72":103,"_63":64},"UiCxB73G",{},[],"Transitions – how you move from one state to another",{"_36":105,"_38":106},[],{"_40":41,"_42":107,"_44":45,"_46":108,"_48":109,"_72":110,"_63":64},"vl4dgcB0",{},[],"Once you understand these, even the most complex flows start to feel… obvious.",{"_40":112,"_42":113,"_44":45,"_46":114,"_48":117,"_72":118,"_63":64},"Heading","ovQKELVh",{"_115":116},"childrenType","Group",[],"✨ Intro: The Foundation of Every State Machine",{"_36":120,"_38":142},[121,128,135],{"_36":122,"_38":123},[],{"_40":41,"_42":124,"_44":45,"_46":125,"_48":126,"_72":127,"_63":64},"U1dHAH7O",{},[],"A state is just a label for a condition your UI is in.",{"_36":129,"_38":130},[],{"_40":41,"_42":131,"_44":45,"_46":132,"_48":133,"_72":134,"_63":64},"0SKJ-5Bd",{},[],"🔁 Example: A toggle switch has two states: active and inactive. A form might have: idle, validating, submitting, success, error.",{"_36":136,"_38":137},[],{"_40":41,"_42":138,"_44":45,"_46":139,"_48":140,"_72":141,"_63":64},"rHbGcoNi",{},[],"You define them up front — and your component can only be in one of them at a time.",{"_40":112,"_42":143,"_44":45,"_46":144,"_48":145,"_72":146,"_63":64},"QDNDq9wF",{"_115":116},[],"🧠 What Is a State?",{"_36":148,"_38":191},[149,156,163,170,177,184],{"_36":150,"_38":151},[],{"_40":41,"_42":152,"_44":45,"_46":153,"_48":154,"_72":155,"_63":64},"idyPSZrg",{},[],"An event is something that happens — usually triggered by the user or the system.",{"_36":157,"_38":158},[],{"_40":41,"_42":159,"_44":45,"_46":160,"_48":161,"_72":162,"_63":64},"BUv71qfw",{},[],"👇 Examples:",{"_36":164,"_38":165},[],{"_40":41,"_42":166,"_44":45,"_46":167,"_48":168,"_72":169,"_63":64},"Cc6_Mkj0",{},[],"A click → TOGGLE",{"_36":171,"_38":172},[],{"_40":41,"_42":173,"_44":45,"_46":174,"_48":175,"_72":176,"_63":64},"fSrsl3Fs",{},[],"A form submission → SUBMIT",{"_36":178,"_38":179},[],{"_40":41,"_42":180,"_44":45,"_46":181,"_48":182,"_72":183,"_63":64},"Wno7ieql",{},[],"An API call fails → FAILURE",{"_36":185,"_38":186},[],{"_40":41,"_42":187,"_44":45,"_46":188,"_48":189,"_72":190,"_63":64},"rb8tuU7y",{},[],"Events don’t do anything on their own — they ask the machine to change.",{"_40":112,"_42":192,"_44":45,"_46":193,"_48":194,"_72":195,"_63":64},"DAaz8SPf",{"_115":116},[],"⚡ What Is an Event?",{"_36":197,"_38":235},[198,205,212],{"_36":199,"_38":200},[],{"_40":41,"_42":201,"_44":45,"_46":202,"_48":203,"_72":204,"_63":64},"IR301vuL",{},[],"A transition is how the machine changes from one state to another in response to an event.",{"_36":206,"_38":207},[],{"_40":41,"_42":208,"_44":45,"_46":209,"_48":210,"_72":211,"_63":64},"uatRUWoJ",{},[],"Think of it as: \"When I'm in [this state] and [this event] happens, move to [that state].\"",{"_36":213,"_38":230},[214,224],{"_36":215,"_38":216},[],{"_40":217,"_42":218,"_44":45,"_46":219,"_48":222,"_72":223,"_63":64},"Code","hTH4qlLt",{"_220":221},"language","typescript",[],"createMachine({\n initial: 'idle',\n states: {\n idle: {\n on: { SUBMIT: 'submitting' }\n },\n submitting: {\n on: {\n SUCCESS: 'success',\n FAILURE: 'error'\n }\n },\n success: {},\n error: {}\n }\n});",{"_36":225,"_38":226},[],{"_40":41,"_42":227,"_44":45,"_46":228,"_48":229,"_72":64,"_63":64},"gGVdQRWe",{},[],{"_40":41,"_42":231,"_44":45,"_46":232,"_48":233,"_72":234,"_63":64},"loO-Xd4j",{"_115":116},[],"In XState, it looks like this:",{"_40":112,"_42":236,"_44":45,"_46":237,"_48":238,"_72":239,"_63":64},"rCYytQHq",{"_115":116},[],"🔄 What Is a Transition?",{"_36":241,"_38":285},[242,249,256,271,278],{"_36":243,"_38":244},[],{"_40":41,"_42":245,"_44":45,"_46":246,"_48":247,"_72":248,"_63":64},"BozreRL2",{},[],"Because you define states and transitions explicitly, you avoid:",{"_36":250,"_38":251},[],{"_40":41,"_42":252,"_44":45,"_46":253,"_48":254,"_72":255,"_63":64},"qUQLFu2K",{},[],"Ambiguous conditions",{"_36":257,"_38":258},[],{"_40":41,"_42":259,"_44":45,"_46":260,"_48":261,"_72":270,"_63":64},"CzebmtN5",{},[262],{"_40":217,"_52":263,"_57":266,"_46":269,"_63":64},[264,265],27,40,[267,268],36,47,{},"Invalid combinations (e.g. isLoading && isError)",{"_36":272,"_38":273},[],{"_40":41,"_42":274,"_44":45,"_46":275,"_48":276,"_72":277,"_63":64},"Tx1DpbI7",{},[],"“Where am I in the flow?” type bugs",{"_36":279,"_38":280},[],{"_40":41,"_42":281,"_44":45,"_46":282,"_48":283,"_72":284,"_63":64},"9r7snjTE",{},[],"The machine won’t allow transitions that aren’t defined. That’s safety by design.",{"_40":112,"_42":286,"_44":45,"_46":287,"_48":288,"_72":289,"_63":64},"wVj4RLs9",{"_115":116},[],"🧪 Why This Structure Is Powerful",{"_36":291,"_38":316},[292,299,309],{"_36":293,"_38":294},[],{"_40":41,"_42":295,"_44":45,"_46":296,"_48":297,"_72":298,"_63":64},"RFFrDPZ_",{},[],"Here’s that form state machine as a diagram:",{"_36":300,"_38":301},[],{"_40":302,"_42":303,"_44":45,"_46":304,"_48":307,"_72":64,"_63":308},"Button","zGkNsRNw",{"_305":306},"name","👉 Open in Stately.ai",[],"https://stately.ai/registry/editor/a3732429-1a6a-4304-81dc-7344199eb5c2?mode=Simulate&machineId=36c1ed61-65d0-40a0-a8a9-aac1bcc79275",{"_36":310,"_38":311},[],{"_40":41,"_42":312,"_44":45,"_46":313,"_48":314,"_72":315,"_63":64},"mhjwuw_5",{},[],"Diagrams like this aren’t just pretty — they’re living documentation of how your app behaves.",{"_40":112,"_42":317,"_44":45,"_46":318,"_48":319,"_72":320,"_63":64},"JqHCmjLs",{"_115":116},[],"Visualize It",{"_36":322,"_38":344},[323,330,337],{"_36":324,"_38":325},[],{"_40":41,"_42":326,"_44":45,"_46":327,"_48":328,"_72":329,"_63":64},"A5V14JbG",{},[],"Instead of exposing a bunch of props or handlers, you can think of your UI machine as exposing one clean interface:",{"_36":331,"_38":332},[],{"_40":217,"_42":333,"_44":45,"_46":334,"_48":335,"_72":336,"_63":64},"-gD34P1J",{"_220":221},[],"send({ type: 'SUBMIT' });",{"_36":338,"_38":339},[],{"_40":41,"_42":340,"_44":45,"_46":341,"_48":342,"_72":343,"_63":64},"G5zl8WVl",{},[],"That’s it. Consumers of your component don’t care about your internal logic — they just send events and get predictable behavior.",{"_40":112,"_42":345,"_44":45,"_46":346,"_48":347,"_72":348,"_63":64},"nTqWAYZK",{"_115":116},[],"🧠 Pro Tip: Events Are the API of Your Component",{"_36":350,"_38":365},[351,358],{"_36":352,"_38":353},[],{"_40":41,"_42":354,"_44":45,"_46":355,"_48":356,"_72":357,"_63":64},"CrXa47YA",{},[],"In the next issue, we’ll get hands-on: ✅ Setting up XState in a React project ✅ Using useMachine ✅ Connecting state to your UI",{"_36":359,"_38":360},[],{"_40":41,"_42":361,"_44":45,"_46":362,"_48":363,"_72":364,"_63":64},"daDU7UWi",{},[],"We’ll build a real machine and hook it into a real component.",{"_40":112,"_42":366,"_44":45,"_46":367,"_48":368,"_72":369,"_63":64},"IXvDGYZn",{"_115":116},[],"Coming Up Next: Modeling UI with XState",{"_36":371,"_38":431},[372,401,416,423],{"_36":373,"_38":395},[374,381,388],{"_36":375,"_38":376},[],{"_40":41,"_42":377,"_44":45,"_46":378,"_48":379,"_72":380,"_63":64},"FOjdob1O",{},[],"What are the possible states?",{"_36":382,"_38":383},[],{"_40":41,"_42":384,"_44":45,"_46":385,"_48":386,"_72":387,"_63":64},"xugADqhu",{},[],"What events can happen?",{"_36":389,"_38":390},[],{"_40":41,"_42":391,"_44":45,"_46":392,"_48":393,"_72":394,"_63":64},"D0O2B5Dg",{},[],"How do you transition from one to another?",{"_40":41,"_42":396,"_44":45,"_46":397,"_48":399,"_72":400,"_63":64},"MOh7AMCQ",{"_115":398},"Unordered",[],"Pick a small UI in your app (a toggle, button, form, etc) and answer:",{"_36":402,"_38":403},[],{"_40":41,"_42":404,"_44":45,"_46":405,"_48":406,"_72":415,"_63":64},"IlbNtUNc",{},[407],{"_40":408,"_52":409,"_57":411,"_46":413,"_63":414},"Link",[410],33,[412],43,{},"https://stately.ai/","Try modeling it on paper — or in Stately.ai",{"_36":417,"_38":418},[],{"_40":41,"_42":419,"_44":45,"_46":420,"_48":421,"_72":422,"_63":64},"EzmaXgis",{},[],"Reply to this with your flow — I’d love to feature a few in future issues!",{"_36":424,"_38":425},[],{"_40":41,"_42":426,"_44":427,"_46":428,"_48":429,"_72":430,"_63":64},"rqDQ3P-0","bafy2bzaceasflmgw6yafc3mygkufwzsrzcjoh5vbpczy532qvitkfsli3icns",{},[],"Until next time,\nHoracio",{"_40":112,"_42":432,"_44":45,"_46":433,"_48":434,"_72":435,"_63":64},"FKkiCW0n",{"_115":116},[],"💡 Try This","version","bafy2bzacedotl422ziudilmywzwcsi6chssstqlwujt5v5cozsewueabcuyzs","account","z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp","authors",[439],"path","/content/states-events-and-transitions-demystified","createTime","2025-04-06T22:59:47.219Z","updateTime","2025-04-07T08:39:48.879Z","metadata",{"_305":450,"_451":452},"States, Events, and Transitions, Demystified","cover","ipfs://bafybeibu6gd4vij4zi7rpjhgp7au3bhjqf6yumgb35gof4wjusq3sfm2nu","detachedBlocks",{},"genesis","generationInfo",{"_455":45,"_458":459},"generation","1743980387218","visibility","PUBLIC","isLatest",{"_442":464,"_436":437,"_466":6,"_467":439,"_42":468,"_469":-5,"_470":-5,"_471":-5,"_472":-5},[33,465],"states-events-and-transitions-demystified","latest","uid","hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified","blockRef","blockRange","hostname","scheme","siteHomeIcon","dehydratedState",{"_476":477,"_478":479},"mutations",[],"queries",[480,775,947,989,995,1008,1065],{"_481":482,"_770":771,"_773":774},"state",{"_483":484,"_754":755,"_756":757,"_758":-5,"_759":760,"_761":760,"_762":760,"_763":-5,"_764":-5,"_765":8,"_766":767,"_768":769},"data",{"_40":31,"_31":485,"_42":752},{"_33":486,"_436":437,"_438":439,"_440":748,"_442":443,"_444":445,"_446":447,"_448":749,"_453":750,"_455":45,"_456":751,"_460":461},[487,500,530,550,585,615,649,669,689,704],{"_36":488,"_38":489},[],{"_40":41,"_42":43,"_44":45,"_46":490,"_48":491,"_72":73,"_63":64},{},[492,496],{"_40":51,"_52":493,"_57":494,"_46":495,"_63":64},[54,55,56],[59,60,61],{},{"_40":66,"_52":497,"_57":498,"_46":499,"_63":64},[68],[70],{},{"_36":501,"_38":527},[502,507,512,517,522],{"_36":503,"_38":504},[],{"_40":41,"_42":79,"_44":45,"_46":505,"_48":506,"_72":82,"_63":64},{},[],{"_36":508,"_38":509},[],{"_40":41,"_42":86,"_44":45,"_46":510,"_48":511,"_72":89,"_63":64},{},[],{"_36":513,"_38":514},[],{"_40":41,"_42":93,"_44":45,"_46":515,"_48":516,"_72":96,"_63":64},{},[],{"_36":518,"_38":519},[],{"_40":41,"_42":100,"_44":45,"_46":520,"_48":521,"_72":103,"_63":64},{},[],{"_36":523,"_38":524},[],{"_40":41,"_42":107,"_44":45,"_46":525,"_48":526,"_72":110,"_63":64},{},[],{"_40":112,"_42":113,"_44":45,"_46":528,"_48":529,"_72":118,"_63":64},{"_115":116},[],{"_36":531,"_38":547},[532,537,542],{"_36":533,"_38":534},[],{"_40":41,"_42":124,"_44":45,"_46":535,"_48":536,"_72":127,"_63":64},{},[],{"_36":538,"_38":539},[],{"_40":41,"_42":131,"_44":45,"_46":540,"_48":541,"_72":134,"_63":64},{},[],{"_36":543,"_38":544},[],{"_40":41,"_42":138,"_44":45,"_46":545,"_48":546,"_72":141,"_63":64},{},[],{"_40":112,"_42":143,"_44":45,"_46":548,"_48":549,"_72":146,"_63":64},{"_115":116},[],{"_36":551,"_38":582},[552,557,562,567,572,577],{"_36":553,"_38":554},[],{"_40":41,"_42":152,"_44":45,"_46":555,"_48":556,"_72":155,"_63":64},{},[],{"_36":558,"_38":559},[],{"_40":41,"_42":159,"_44":45,"_46":560,"_48":561,"_72":162,"_63":64},{},[],{"_36":563,"_38":564},[],{"_40":41,"_42":166,"_44":45,"_46":565,"_48":566,"_72":169,"_63":64},{},[],{"_36":568,"_38":569},[],{"_40":41,"_42":173,"_44":45,"_46":570,"_48":571,"_72":176,"_63":64},{},[],{"_36":573,"_38":574},[],{"_40":41,"_42":180,"_44":45,"_46":575,"_48":576,"_72":183,"_63":64},{},[],{"_36":578,"_38":579},[],{"_40":41,"_42":187,"_44":45,"_46":580,"_48":581,"_72":190,"_63":64},{},[],{"_40":112,"_42":192,"_44":45,"_46":583,"_48":584,"_72":195,"_63":64},{"_115":116},[],{"_36":586,"_38":612},[587,592,597],{"_36":588,"_38":589},[],{"_40":41,"_42":201,"_44":45,"_46":590,"_48":591,"_72":204,"_63":64},{},[],{"_36":593,"_38":594},[],{"_40":41,"_42":208,"_44":45,"_46":595,"_48":596,"_72":211,"_63":64},{},[],{"_36":598,"_38":609},[599,604],{"_36":600,"_38":601},[],{"_40":217,"_42":218,"_44":45,"_46":602,"_48":603,"_72":223,"_63":64},{"_220":221},[],{"_36":605,"_38":606},[],{"_40":41,"_42":227,"_44":45,"_46":607,"_48":608,"_72":64,"_63":64},{},[],{"_40":41,"_42":231,"_44":45,"_46":610,"_48":611,"_72":234,"_63":64},{"_115":116},[],{"_40":112,"_42":236,"_44":45,"_46":613,"_48":614,"_72":239,"_63":64},{"_115":116},[],{"_36":616,"_38":646},[617,622,627,636,641],{"_36":618,"_38":619},[],{"_40":41,"_42":245,"_44":45,"_46":620,"_48":621,"_72":248,"_63":64},{},[],{"_36":623,"_38":624},[],{"_40":41,"_42":252,"_44":45,"_46":625,"_48":626,"_72":255,"_63":64},{},[],{"_36":628,"_38":629},[],{"_40":41,"_42":259,"_44":45,"_46":630,"_48":631,"_72":270,"_63":64},{},[632],{"_40":217,"_52":633,"_57":634,"_46":635,"_63":64},[264,265],[267,268],{},{"_36":637,"_38":638},[],{"_40":41,"_42":274,"_44":45,"_46":639,"_48":640,"_72":277,"_63":64},{},[],{"_36":642,"_38":643},[],{"_40":41,"_42":281,"_44":45,"_46":644,"_48":645,"_72":284,"_63":64},{},[],{"_40":112,"_42":286,"_44":45,"_46":647,"_48":648,"_72":289,"_63":64},{"_115":116},[],{"_36":650,"_38":666},[651,656,661],{"_36":652,"_38":653},[],{"_40":41,"_42":295,"_44":45,"_46":654,"_48":655,"_72":298,"_63":64},{},[],{"_36":657,"_38":658},[],{"_40":302,"_42":303,"_44":45,"_46":659,"_48":660,"_72":64,"_63":308},{"_305":306},[],{"_36":662,"_38":663},[],{"_40":41,"_42":312,"_44":45,"_46":664,"_48":665,"_72":315,"_63":64},{},[],{"_40":112,"_42":317,"_44":45,"_46":667,"_48":668,"_72":320,"_63":64},{"_115":116},[],{"_36":670,"_38":686},[671,676,681],{"_36":672,"_38":673},[],{"_40":41,"_42":326,"_44":45,"_46":674,"_48":675,"_72":329,"_63":64},{},[],{"_36":677,"_38":678},[],{"_40":217,"_42":333,"_44":45,"_46":679,"_48":680,"_72":336,"_63":64},{"_220":221},[],{"_36":682,"_38":683},[],{"_40":41,"_42":340,"_44":45,"_46":684,"_48":685,"_72":343,"_63":64},{},[],{"_40":112,"_42":345,"_44":45,"_46":687,"_48":688,"_72":348,"_63":64},{"_115":116},[],{"_36":690,"_38":701},[691,696],{"_36":692,"_38":693},[],{"_40":41,"_42":354,"_44":45,"_46":694,"_48":695,"_72":357,"_63":64},{},[],{"_36":697,"_38":698},[],{"_40":41,"_42":361,"_44":45,"_46":699,"_48":700,"_72":364,"_63":64},{},[],{"_40":112,"_42":366,"_44":45,"_46":702,"_48":703,"_72":369,"_63":64},{"_115":116},[],{"_36":705,"_38":745},[706,726,735,740],{"_36":707,"_38":723},[708,713,718],{"_36":709,"_38":710},[],{"_40":41,"_42":377,"_44":45,"_46":711,"_48":712,"_72":380,"_63":64},{},[],{"_36":714,"_38":715},[],{"_40":41,"_42":384,"_44":45,"_46":716,"_48":717,"_72":387,"_63":64},{},[],{"_36":719,"_38":720},[],{"_40":41,"_42":391,"_44":45,"_46":721,"_48":722,"_72":394,"_63":64},{},[],{"_40":41,"_42":396,"_44":45,"_46":724,"_48":725,"_72":400,"_63":64},{"_115":398},[],{"_36":727,"_38":728},[],{"_40":41,"_42":404,"_44":45,"_46":729,"_48":730,"_72":415,"_63":64},{},[731],{"_40":408,"_52":732,"_57":733,"_46":734,"_63":414},[410],[412],{},{"_36":736,"_38":737},[],{"_40":41,"_42":419,"_44":45,"_46":738,"_48":739,"_72":422,"_63":64},{},[],{"_36":741,"_38":742},[],{"_40":41,"_42":426,"_44":427,"_46":743,"_48":744,"_72":430,"_63":64},{},[],{"_40":112,"_42":432,"_44":45,"_46":746,"_48":747,"_72":435,"_63":64},{"_115":116},[],[439],{"_305":450,"_451":452},{},{"_455":45,"_458":459},{"_42":468,"_467":439,"_442":753,"_436":437,"_469":-5,"_470":-5,"_471":-5,"_472":-5,"_466":6},[33,465],"dataUpdateCount",1,"dataUpdatedAt",1776801990099,"error","errorUpdateCount",0,"errorUpdatedAt","fetchFailureCount","fetchFailureReason","fetchMeta","isInvalidated","status","success","fetchStatus","idle","queryKey",[772,468,437,6],"ENTITY","queryHash","[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified\",\"bafy2bzacedotl422ziudilmywzwcsi6chssstqlwujt5v5cozsewueabcuyzs\",true]",{"_481":776,"_770":945,"_773":946},{"_483":777,"_754":755,"_756":944,"_758":-5,"_759":760,"_761":760,"_762":760,"_763":-5,"_764":-5,"_765":8,"_766":767,"_768":769},{"_40":31,"_31":778,"_42":941},{"_33":779,"_436":929,"_438":439,"_440":930,"_442":64,"_444":931,"_446":932,"_448":933,"_453":937,"_455":938,"_456":939,"_460":461},[780,788,800,813,820,868,888,896],{"_36":781,"_38":782},[],{"_40":112,"_42":783,"_44":784,"_46":785,"_48":786,"_72":787,"_63":64},"YS5-lwb-","bafy2bzacedo2fapga62cenj2wqdo7fnnbwssy3ohyonmse3l74fds24nqx4r6",{},[],"Modeling UI with State Machines should be the norm.",{"_36":789,"_38":790},[],{"_40":41,"_42":791,"_44":784,"_46":792,"_48":793,"_72":799,"_63":64},"HIUNgDv3",{},[794],{"_40":51,"_52":795,"_57":796,"_46":798,"_63":64},[760],[797],79,{},"A practical guide to building better interfaces with XState, React & TypeScript",{"_36":801,"_38":802},[],{"_40":41,"_42":803,"_44":784,"_46":804,"_48":805,"_72":812,"_63":64},"RH2vgIqw",{},[806],{"_40":217,"_52":807,"_57":809,"_46":811,"_63":64},[808],132,[810],141,{},"Modern UI development is full of invisible complexity: async flows, conflicting states, edge cases, and fragile logic spread across useEffects and booleans.",{"_36":814,"_38":815},[],{"_40":41,"_42":816,"_44":784,"_46":817,"_48":818,"_72":819,"_63":64},"1i3NXohu",{},[],"This series is about doing it differently.",{"_36":821,"_38":857},[822,829,836,843,850],{"_36":823,"_38":824},[],{"_40":41,"_42":825,"_44":784,"_46":826,"_48":827,"_72":828,"_63":64},"cP0mEJaa",{},[],"Easier to understand",{"_36":830,"_38":831},[],{"_40":41,"_42":832,"_44":784,"_46":833,"_48":834,"_72":835,"_63":64},"mUUMMN68",{},[],"Safer to extend",{"_36":837,"_38":838},[],{"_40":41,"_42":839,"_44":784,"_46":840,"_48":841,"_72":842,"_63":64},"xkA4h4Fv",{},[],"Visually predictable",{"_36":844,"_38":845},[],{"_40":41,"_42":846,"_44":784,"_46":847,"_48":848,"_72":849,"_63":64},"1AW5Zc7P",{},[],"Naturally testable",{"_36":851,"_38":852},[],{"_40":41,"_42":853,"_44":784,"_46":854,"_48":855,"_72":856,"_63":64},"mISZl3dK",{},[],"Easy to Maintain and Refactor",{"_40":41,"_42":858,"_44":784,"_46":859,"_48":860,"_72":867,"_63":64},"mZU_BNzy",{"_115":398},[861],{"_40":51,"_52":862,"_57":864,"_46":866,"_63":64},[863],34,[865],64,{},"By modeling your UI behavior with state machines and statecharts, you can write code that’s:",{"_36":869,"_38":870},[],{"_40":41,"_42":871,"_44":784,"_46":872,"_48":873,"_72":887,"_63":64},"dT3b7j6V",{},[874],{"_40":51,"_52":875,"_57":880,"_46":886,"_63":64},[876,877,878,879,59],100,134,142,149,[881,882,883,884,885],116,140,147,160,179,{},"Through weekly posts, hands-on code examples, and short video breakdowns, you’ll learn how to build state-driven UIs using tools like XState, React, TypeScript and even Vanilla JS — from the fundamentals to real-world patterns like forms, modals, async data, and more.",{"_36":889,"_38":890},[],{"_40":41,"_42":891,"_44":892,"_46":893,"_48":894,"_72":895,"_63":64},"-dfXsmmY","bafy2bzacedzht25ysz76cqbnx7vjw7ry62rde3ewqjdscea3ruhurpw7xqt7g",{},[],"Whether you’re just curious about state machines or want to build your next app with them from the ground up, this is your guide to building interfaces that don't fall apart.",{"_36":897,"_38":924},[898],{"_36":899,"_38":900},[],{"_40":901,"_42":902,"_44":784,"_46":903,"_48":923,"_72":64,"_63":64},"Query","XMasrKG1",{"_904":905,"_906":907,"_908":909,"_922":8},"columnCount",3,"style","List","query",{"_910":911,"_916":917},"includes",[912],{"_913":439,"_442":33,"_914":915},"space","mode","Children","sort",[918],{"_919":8,"_920":921},"reverse","term","UpdateTime","banner",[],{"_40":112,"_42":925,"_44":784,"_46":926,"_48":927,"_72":928,"_63":64},"JuhiSEfW",{"_115":116},[],"Posts","bafy2bzacecwxx5llylg2hzhhcsf4r3dzvtr22wwk6wnw4qklwcvdp6jxln2ni",[439],"1970-01-01T00:00:00Z","2025-04-24T21:23:24.377Z",{"_305":934,"_935":936},"UI with State Machines","siteUrl","https://ui-with-state-machines.hyper.media",{},"bafy2bzacecztctsdsles75mugrpzhgspjvfnf7atqvn5cmqqbccz4grooldak",{"_455":938,"_458":940},"0",{"_42":942,"_467":439,"_442":943,"_436":-5,"_469":-5,"_470":-5,"_471":-5,"_472":-5,"_466":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp",[],1776801990083,[772,942,-5,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",null,true]",{"_481":948,"_770":986,"_773":988},{"_483":949,"_754":755,"_756":985,"_758":-5,"_759":760,"_761":760,"_762":760,"_763":-5,"_764":-5,"_765":8,"_766":767,"_768":769},[950],{"_40":31,"_42":951,"_442":955,"_440":956,"_444":957,"_446":962,"_965":966,"_455":967,"_436":954,"_968":969,"_972":973,"_456":980,"_982":-5,"_448":983,"_460":461},{"_42":952,"_467":439,"_442":953,"_436":954,"_469":-5,"_470":-5,"_471":-5,"_472":-5,"_466":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content",[33],"bafy2bzacebsxm4y2fsik3g3ovk5kx4kri56g32o6r7dszvekaqugfrqbmhmx6",[33],[439],{"_958":959,"_960":961},"seconds","1743456714","nanos",453000000,{"_958":963,"_960":964},"1744015648",838000000,"sortTime","2025-03-31T21:31:54.453Z","bafy2bzacecefqjbssb4ej2oc4wbspy3cvuuadbabfzxrzls56zqiissf6inw4","breadcrumbs",[970],{"_305":934,"_442":64,"_971":8},"isMissing","activitySummary",{"_974":-5,"_975":64,"_976":760,"_977":978,"_979":8},"latestCommentTime","latestCommentId","commentCount","latestChangeTime",{"_958":963,"_960":964},"isUnread",{"_455":967,"_458":981},"1743456714453","redirectInfo",{"_305":984},"Content",1776801990076,[987,942,915],"DOC_LIST_DIRECTORY","[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",\"Children\"]",{"_481":990,"_770":993,"_773":994},{"_483":991,"_754":755,"_756":992,"_758":-5,"_759":760,"_761":760,"_762":760,"_763":-5,"_764":-5,"_765":8,"_766":767,"_768":769},[],1776801990070,[987,468,915],"[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified\",\"Children\"]",{"_481":996,"_770":1005,"_773":1007},{"_483":997,"_754":755,"_756":1004,"_758":-5,"_759":760,"_761":760,"_762":760,"_763":-5,"_764":-5,"_765":8,"_766":767,"_768":769},{"_998":755,"_25":760,"_999":905,"_36":760,"_1000":1001,"_1002":1003},"citations","changes","authorUids",[439],"blocks",{},1776801990195,[1006,468],"DOCUMENT_INTERACTION_SUMMARY","[\"DOCUMENT_INTERACTION_SUMMARY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified\"]",{"_481":1009,"_770":1063,"_773":1064},{"_483":1010,"_754":755,"_756":1062,"_758":-5,"_759":760,"_761":760,"_762":760,"_763":-5,"_764":-5,"_765":8,"_766":767,"_768":769},{"_40":31,"_31":1011,"_42":1060},{"_33":1012,"_436":954,"_438":439,"_440":1054,"_442":1055,"_444":966,"_446":1056,"_448":1057,"_453":1058,"_455":967,"_456":1059,"_460":461},[1013,1040,1047],{"_36":1014,"_38":1034},[1015,1026],{"_36":1016,"_38":1017},[],{"_40":1018,"_42":1019,"_44":1020,"_46":1021,"_48":1024,"_72":64,"_63":1025},"Embed","I01RCHLp","bafy2bzacedffkd4rdzzkikyjdm23zb2evqbqhnwklr5nxlcaod7pynmzj75um",{"_1022":1023},"view","Card",[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong?v=bafy2bzacecxbssfu6tsgckkty6krdldbq232rib3mvbbxhfhi745pqg4m7zsg&l",{"_36":1027,"_38":1028},[],{"_40":1018,"_42":1029,"_44":1030,"_46":1031,"_48":1032,"_72":64,"_63":1033},"TbDjWW-e","bafy2bzaced2hqcefph7tgklninzu5dcebzjmxq67dmjn7puloiksgwttj6gig",{"_1022":1023},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified?v=bafy2bzaceasflmgw6yafc3mygkufwzsrzcjoh5vbpczy532qvitkfsli3icns&l",{"_40":112,"_42":1035,"_44":1036,"_46":1037,"_48":1038,"_72":1039,"_63":64},"SpGu0tBK","bafy2bzaceblppdcojdh2aj4zbh6aax7c6a6ynzvetc2elfxbi44o2mxwvc5go",{"_115":116},[],"English",{"_36":1041,"_38":1042},[],{"_40":112,"_42":1043,"_44":1036,"_46":1044,"_48":1045,"_72":1046,"_63":64},"nvxL-VgX",{},[],"Spanish",{"_36":1048,"_38":1049},[],{"_40":1018,"_42":1050,"_44":954,"_46":1051,"_48":1052,"_72":64,"_63":1053},"XG17WIWR",{"_1022":1023},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal?v=bafy2bzacedeehy4mmf4hniuuxqoww54eacrhpypjtzu5qotzkgrq2bm6lfmqm&l",[439],"/content","2025-04-07T08:47:28.838Z",{"_305":984},{},{"_455":967,"_458":981},{"_42":952,"_467":439,"_442":1061,"_436":-5,"_469":-5,"_470":-5,"_471":-5,"_472":-5},[33],1776801990109,[772,952,-5,8],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content\",null,false]",{"_481":1066,"_770":1074,"_773":1076},{"_483":1067,"_754":755,"_756":1073,"_758":-5,"_759":760,"_761":760,"_762":760,"_763":-5,"_764":-5,"_765":8,"_766":767,"_768":769},{"_40":438,"_42":1068,"_448":1070},{"_436":929,"_467":439,"_42":942,"_442":1069,"_469":-5,"_470":-5,"_471":-5,"_472":-5},[],{"_305":934,"_935":936,"_1071":-5,"_1072":-5},"icon","summary",1776801990250,[1075,439],"ACCOUNT","[\"ACCOUNT\",\"z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"]","ssrContentHTML","

State machines can sound intimidating at first — all those diagrams and boxes and arrows. But at the heart of it, they’re built on three incredibly simple ideas: states, events, and transitions. If you've ever handled a button click or shown a loading spinner, you've already worked with them. This week, we're going to demystify how these pieces fit together and why they can make your UI logic feel like it finally makes sense.

✨ Intro: The Foundation of Every State Machine

In the last issue, we looked at why state machines are a better way to model UI logic. This week, we’re breaking down the three concepts that power every state machine:

States – the different modes your UI can be in

Events – the things that happen to trigger change

Transitions – how you move from one state to another

Once you understand these, even the most complex flows start to feel… obvious.

🧠 What Is a State?

A state is just a label for a condition your UI is in.

🔁 Example: A toggle switch has two states: active and inactive. A form might have: idle, validating, submitting, success, error.

You define them up front — and your component can only be in one of them at a time.

⚡ What Is an Event?

An event is something that happens — usually triggered by the user or the system.

👇 Examples:

A click → TOGGLE

A form submission → SUBMIT

An API call fails → FAILURE

Events don’t do anything on their own — they ask the machine to change.

🔄 What Is a Transition?

A transition is how the machine changes from one state to another in response to an event.

Think of it as: "When I'm in [this state] and [this event] happens, move to [that state]."

In XState, it looks like this:

createMachine({\n  initial: 'idle',\n  states: {\n    idle: {\n      on: { SUBMIT: 'submitting' }\n    },\n    submitting: {\n      on: {\n        SUCCESS: 'success',\n        FAILURE: 'error'\n      }\n    },\n    success: {},\n    error: {}\n  }\n});

🧪 Why This Structure Is Powerful

Because you define states and transitions explicitly, you avoid:

Ambiguous conditions

Invalid combinations (e.g. isLoading && isError)

“Where am I in the flow?” type bugs

The machine won’t allow transitions that aren’t defined. That’s safety by design.

Visualize It

Here’s that form state machine as a diagram:

Button

Diagrams like this aren’t just pretty — they’re living documentation of how your app behaves.

🧠 Pro Tip: Events Are the API of Your Component

Instead of exposing a bunch of props or handlers, you can think of your UI machine as exposing one clean interface:

send({ type: 'SUBMIT' });

That’s it. Consumers of your component don’t care about your internal logic — they just send events and get predictable behavior.

Coming Up Next: Modeling UI with XState

In the next issue, we’ll get hands-on: ✅ Setting up XState in a React project ✅ Using useMachine ✅ Connecting state to your UI

We’ll build a real machine and hook it into a real component.

💡 Try This

Pick a small UI in your app (a toggle, button, form, etc) and answer:

What are the possible states?
What events can happen?
How do you transition from one to another?

Try modeling it on paper — or in Stately.ai

Reply to this with your flow — I’d love to feature a few in future issues!

Until next time,\nHoracio

","enableWebSigning","https://dailyplanet.io","origin","homeMetadata",{"_305":1084,"_1071":1085,"_1086":1085,"_451":1087,"_935":1080,"_1088":64,"_1089":1085,"_1090":1091,"_1092":8,"_1093":1094,"_1095":1096},"Daily Planet","ipfs://bafkreibwi4h3nzuc7invuqbq55pdsa4n6gyh2stz6a6a5vi2qylp62w2na","thumbnail","ipfs://bafybeifzrxuorbf6gmsw65r3ro3t5jko3vvhbuxeiljflvvysmg447di6m","layout","seedExperimentalLogo","seedExperimentalHomeOrder","CreatedFirst","showOutline","contentWidth","L","theme",{"_1097":1098},"headerLayout","Center","originHomeId",{"_467":1101,"_42":1102,"_442":1103,"_436":-5,"_469":-5,"_470":-5,"_471":-5,"_472":-5},"z6Mkp8UGrBu3RMJZkoNKTgBiRp7LTA2bZ2EUvqFokKDof8FW","hm://z6Mkp8UGrBu3RMJZkoNKTgBiRp7LTA2bZ2EUvqFokKDof8FW",[],"meta",{"_1106":1107,"_1141":1142},"values",{"_1108":1109,"_1111":1112,"_1113":1114,"_1115":1116,"_1118":1119,"_1120":1121,"_1122":1123,"_1125":1126,"_1127":1128,"_1129":1130,"_1131":1132,"_1133":1134,"_1135":1136,"_1137":1138,"_1139":1140},"document.generationInfo.generation",[1110],"bigint","dehydratedState.queries.0.state.data.document.generationInfo.generation",[1110],"dehydratedState.queries.1.state.data.document.generationInfo.generation",[1110],"dehydratedState.queries.1.queryKey.2",[1117],"undefined","dehydratedState.queries.2.state.data.0.createTime.seconds",[1110],"dehydratedState.queries.2.state.data.0.updateTime.seconds",[1110],"dehydratedState.queries.2.state.data.0.sortTime",[1124],"Date","dehydratedState.queries.2.state.data.0.activitySummary.latestCommentTime",[1117],"dehydratedState.queries.2.state.data.0.activitySummary.latestChangeTime.seconds",[1110],"dehydratedState.queries.2.state.data.0.generationInfo.generation",[1110],"dehydratedState.queries.2.state.data.0.redirectInfo",[1117],"dehydratedState.queries.5.state.data.document.generationInfo.generation",[1110],"dehydratedState.queries.5.queryKey.2",[1117],"dehydratedState.queries.6.state.data.metadata.icon",[1117],"dehydratedState.queries.6.state.data.metadata.summary",[1117],"referentialEqualities",{"_1108":1143,"_1120":1144,"_1129":1145},[1111],[1127],[1133],"actionData","errors"]