[{"_1":2,"_839":-5,"_840":-5},"loaderData",{"_3":4,"_12":13},"root",{"_5":6,"_7":6,"_8":9,"_10":11},"isProd",true,"enableStats","domain","hyper.media","siteHost","ui-with-state-machines.hyper.media","routes/$",{"_14":15,"_724":725},"json",{"_16":17,"_18":19,"_20":21,"_22":-5,"_23":-5,"_24":25,"_26":-5,"_27":28,"_228":6,"_38":229,"_238":-5,"_239":240,"_715":716,"_717":25,"_10":217,"_718":217,"_719":720,"_721":722},"prefersLanguages",[],"viewTerm","activity","panelParam","activity/citations","openComment","accountUid","isInspect",false,"inspectTab","document",{"_29":30,"_203":204,"_205":185,"_206":207,"_186":49,"_208":209,"_210":211,"_212":213,"_218":219,"_220":221,"_222":223,"_226":227},"content",[31,50,67,81,88,138,159,167],{"_32":33,"_34":35},"children",[],"block",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49},"type","Heading","id","YS5-lwb-","revision","bafy2bzacedo2fapga62cenj2wqdo7fnnbwssy3ohyonmse3l74fds24nqx4r6","attributes",{},"annotations",[],"text","Modeling UI with State Machines should be the norm.","link","",{"_32":51,"_34":52},[],{"_36":53,"_38":54,"_40":41,"_42":55,"_44":56,"_46":66,"_48":49},"Paragraph","HIUNgDv3",{},[57],{"_36":58,"_59":60,"_62":63,"_42":65,"_48":49},"Bold","starts",[61],0,"ends",[64],79,{},"A practical guide to building better interfaces with XState, React & TypeScript",{"_32":68,"_34":69},[],{"_36":53,"_38":70,"_40":41,"_42":71,"_44":72,"_46":80,"_48":49},"RH2vgIqw",{},[73],{"_36":74,"_59":75,"_62":77,"_42":79,"_48":49},"Code",[76],132,[78],141,{},"Modern UI development is full of invisible complexity: async flows, conflicting states, edge cases, and fragile logic spread across useEffects and booleans.",{"_32":82,"_34":83},[],{"_36":53,"_38":84,"_40":41,"_42":85,"_44":86,"_46":87,"_48":49},"1i3NXohu",{},[],"This series is about doing it differently.",{"_32":89,"_34":125},[90,97,104,111,118],{"_32":91,"_34":92},[],{"_36":53,"_38":93,"_40":41,"_42":94,"_44":95,"_46":96,"_48":49},"cP0mEJaa",{},[],"Easier to understand",{"_32":98,"_34":99},[],{"_36":53,"_38":100,"_40":41,"_42":101,"_44":102,"_46":103,"_48":49},"mUUMMN68",{},[],"Safer to extend",{"_32":105,"_34":106},[],{"_36":53,"_38":107,"_40":41,"_42":108,"_44":109,"_46":110,"_48":49},"xkA4h4Fv",{},[],"Visually predictable",{"_32":112,"_34":113},[],{"_36":53,"_38":114,"_40":41,"_42":115,"_44":116,"_46":117,"_48":49},"1AW5Zc7P",{},[],"Naturally testable",{"_32":119,"_34":120},[],{"_36":53,"_38":121,"_40":41,"_42":122,"_44":123,"_46":124,"_48":49},"mISZl3dK",{},[],"Easy to Maintain and Refactor",{"_36":53,"_38":126,"_40":41,"_42":127,"_44":130,"_46":137,"_48":49},"mZU_BNzy",{"_128":129},"childrenType","Unordered",[131],{"_36":58,"_59":132,"_62":134,"_42":136,"_48":49},[133],34,[135],64,{},"By modeling your UI behavior with state machines and statecharts, you can write code that’s:",{"_32":139,"_34":140},[],{"_36":53,"_38":141,"_40":41,"_42":142,"_44":143,"_46":158,"_48":49},"dT3b7j6V",{},[144],{"_36":58,"_59":145,"_62":151,"_42":157,"_48":49},[146,147,148,149,150],100,134,142,149,168,[152,153,154,155,156],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.",{"_32":160,"_34":161},[],{"_36":53,"_38":162,"_40":163,"_42":164,"_44":165,"_46":166,"_48":49},"-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.",{"_32":168,"_34":197},[169],{"_32":170,"_34":171},[],{"_36":172,"_38":173,"_40":41,"_42":174,"_44":196,"_46":49,"_48":49},"Query","XMasrKG1",{"_175":176,"_177":178,"_179":180,"_195":25},"columnCount",3,"style","List","query",{"_181":182,"_189":190},"includes",[183],{"_184":185,"_186":29,"_187":188},"space","z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp","path","mode","Children","sort",[191],{"_192":25,"_193":194},"reverse","term","UpdateTime","banner",[],{"_36":37,"_38":198,"_40":41,"_42":199,"_44":201,"_46":202,"_48":49},"JuhiSEfW",{"_128":200},"Group",[],"Posts","version","bafy2bzacecwxx5llylg2hzhhcsf4r3dzvtr22wwk6wnw4qklwcvdp6jxln2ni","account","authors",[185],"createTime","1970-01-01T00:00:00Z","updateTime","2025-04-24T21:23:24.377Z","metadata",{"_214":215,"_216":217},"name","UI with State Machines","siteUrl","https://ui-with-state-machines.hyper.media","detachedBlocks",{},"genesis","bafy2bzacecztctsdsles75mugrpzhgspjvfnf7atqvn5cmqqbccz4grooldak","generationInfo",{"_220":221,"_224":225},"generation","0","visibility","PUBLIC","isLatest",{"_186":230,"_203":204,"_231":25,"_232":185,"_38":233,"_234":-5,"_235":-5,"_236":-5,"_237":-5},[],"latest","uid","hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp","blockRef","blockRange","hostname","scheme","siteHomeIcon","dehydratedState",{"_241":242,"_243":244},"mutations",[],"queries",[245,369,474,538,563,704],{"_246":247,"_364":365,"_367":368},"state",{"_248":249,"_349":350,"_351":352,"_353":-5,"_354":61,"_355":61,"_356":61,"_357":-5,"_358":-5,"_359":25,"_360":361,"_362":363},"data",{"_36":27,"_27":250,"_38":347},{"_29":251,"_203":204,"_205":185,"_206":343,"_186":49,"_208":209,"_210":211,"_212":344,"_218":345,"_220":221,"_222":346,"_226":227},[252,257,266,275,280,314,323,328],{"_32":253,"_34":254},[],{"_36":37,"_38":39,"_40":41,"_42":255,"_44":256,"_46":47,"_48":49},{},[],{"_32":258,"_34":259},[],{"_36":53,"_38":54,"_40":41,"_42":260,"_44":261,"_46":66,"_48":49},{},[262],{"_36":58,"_59":263,"_62":264,"_42":265,"_48":49},[61],[64],{},{"_32":267,"_34":268},[],{"_36":53,"_38":70,"_40":41,"_42":269,"_44":270,"_46":80,"_48":49},{},[271],{"_36":74,"_59":272,"_62":273,"_42":274,"_48":49},[76],[78],{},{"_32":276,"_34":277},[],{"_36":53,"_38":84,"_40":41,"_42":278,"_44":279,"_46":87,"_48":49},{},[],{"_32":281,"_34":307},[282,287,292,297,302],{"_32":283,"_34":284},[],{"_36":53,"_38":93,"_40":41,"_42":285,"_44":286,"_46":96,"_48":49},{},[],{"_32":288,"_34":289},[],{"_36":53,"_38":100,"_40":41,"_42":290,"_44":291,"_46":103,"_48":49},{},[],{"_32":293,"_34":294},[],{"_36":53,"_38":107,"_40":41,"_42":295,"_44":296,"_46":110,"_48":49},{},[],{"_32":298,"_34":299},[],{"_36":53,"_38":114,"_40":41,"_42":300,"_44":301,"_46":117,"_48":49},{},[],{"_32":303,"_34":304},[],{"_36":53,"_38":121,"_40":41,"_42":305,"_44":306,"_46":124,"_48":49},{},[],{"_36":53,"_38":126,"_40":41,"_42":308,"_44":309,"_46":137,"_48":49},{"_128":129},[310],{"_36":58,"_59":311,"_62":312,"_42":313,"_48":49},[133],[135],{},{"_32":315,"_34":316},[],{"_36":53,"_38":141,"_40":41,"_42":317,"_44":318,"_46":158,"_48":49},{},[319],{"_36":58,"_59":320,"_62":321,"_42":322,"_48":49},[146,147,148,149,150],[152,153,154,155,156],{},{"_32":324,"_34":325},[],{"_36":53,"_38":162,"_40":163,"_42":326,"_44":327,"_46":166,"_48":49},{},[],{"_32":329,"_34":340},[330],{"_32":331,"_34":332},[],{"_36":172,"_38":173,"_40":41,"_42":333,"_44":339,"_46":49,"_48":49},{"_175":176,"_177":178,"_179":334,"_195":25},{"_181":335,"_189":337},[336],{"_184":185,"_186":29,"_187":188},[338],{"_192":25,"_193":194},[],{"_36":37,"_38":198,"_40":41,"_42":341,"_44":342,"_46":202,"_48":49},{"_128":200},[],[185],{"_214":215,"_216":217},{},{"_220":221,"_224":225},{"_38":233,"_232":185,"_186":348,"_203":204,"_234":-5,"_235":-5,"_236":-5,"_237":-5,"_231":25},[],"dataUpdateCount",1,"dataUpdatedAt",1780971695944,"error","errorUpdateCount","errorUpdatedAt","fetchFailureCount","fetchFailureReason","fetchMeta","isInvalidated","status","success","fetchStatus","idle","queryKey",[366,233,204,25],"ENTITY","queryHash","[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",\"bafy2bzacecwxx5llylg2hzhhcsf4r3dzvtr22wwk6wnw4qklwcvdp6jxln2ni\",false]",{"_246":370,"_364":472,"_367":473},{"_248":371,"_349":350,"_351":471,"_353":-5,"_354":61,"_355":61,"_356":61,"_357":-5,"_358":-5,"_359":25,"_360":361,"_362":363},{"_36":27,"_27":372,"_38":469},{"_29":373,"_203":204,"_205":185,"_206":465,"_186":49,"_208":209,"_210":211,"_212":466,"_218":467,"_220":221,"_222":468,"_226":227},[374,379,388,397,402,436,445,450],{"_32":375,"_34":376},[],{"_36":37,"_38":39,"_40":41,"_42":377,"_44":378,"_46":47,"_48":49},{},[],{"_32":380,"_34":381},[],{"_36":53,"_38":54,"_40":41,"_42":382,"_44":383,"_46":66,"_48":49},{},[384],{"_36":58,"_59":385,"_62":386,"_42":387,"_48":49},[61],[64],{},{"_32":389,"_34":390},[],{"_36":53,"_38":70,"_40":41,"_42":391,"_44":392,"_46":80,"_48":49},{},[393],{"_36":74,"_59":394,"_62":395,"_42":396,"_48":49},[76],[78],{},{"_32":398,"_34":399},[],{"_36":53,"_38":84,"_40":41,"_42":400,"_44":401,"_46":87,"_48":49},{},[],{"_32":403,"_34":429},[404,409,414,419,424],{"_32":405,"_34":406},[],{"_36":53,"_38":93,"_40":41,"_42":407,"_44":408,"_46":96,"_48":49},{},[],{"_32":410,"_34":411},[],{"_36":53,"_38":100,"_40":41,"_42":412,"_44":413,"_46":103,"_48":49},{},[],{"_32":415,"_34":416},[],{"_36":53,"_38":107,"_40":41,"_42":417,"_44":418,"_46":110,"_48":49},{},[],{"_32":420,"_34":421},[],{"_36":53,"_38":114,"_40":41,"_42":422,"_44":423,"_46":117,"_48":49},{},[],{"_32":425,"_34":426},[],{"_36":53,"_38":121,"_40":41,"_42":427,"_44":428,"_46":124,"_48":49},{},[],{"_36":53,"_38":126,"_40":41,"_42":430,"_44":431,"_46":137,"_48":49},{"_128":129},[432],{"_36":58,"_59":433,"_62":434,"_42":435,"_48":49},[133],[135],{},{"_32":437,"_34":438},[],{"_36":53,"_38":141,"_40":41,"_42":439,"_44":440,"_46":158,"_48":49},{},[441],{"_36":58,"_59":442,"_62":443,"_42":444,"_48":49},[146,147,148,149,150],[152,153,154,155,156],{},{"_32":446,"_34":447},[],{"_36":53,"_38":162,"_40":163,"_42":448,"_44":449,"_46":166,"_48":49},{},[],{"_32":451,"_34":462},[452],{"_32":453,"_34":454},[],{"_36":172,"_38":173,"_40":41,"_42":455,"_44":461,"_46":49,"_48":49},{"_175":176,"_177":178,"_179":456,"_195":25},{"_181":457,"_189":459},[458],{"_184":185,"_186":29,"_187":188},[460],{"_192":25,"_193":194},[],{"_36":37,"_38":198,"_40":41,"_42":463,"_44":464,"_46":202,"_48":49},{"_128":200},[],[185],{"_214":215,"_216":217},{},{"_220":221,"_224":225},{"_38":233,"_232":185,"_186":470,"_203":-5,"_234":-5,"_235":-5,"_236":-5,"_237":-5,"_231":6},[],1780971695942,[366,233,-5,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",null,true]",{"_246":475,"_364":535,"_367":537},{"_248":476,"_349":350,"_351":534,"_353":-5,"_354":61,"_355":61,"_356":61,"_357":-5,"_358":-5,"_359":25,"_360":361,"_362":363},[477,512],{"_36":27,"_38":478,"_186":482,"_206":483,"_208":484,"_210":489,"_492":493,"_220":494,"_203":481,"_495":496,"_499":500,"_222":507,"_509":-5,"_212":510,"_226":227},{"_38":479,"_232":185,"_186":480,"_203":481,"_234":-5,"_235":-5,"_236":-5,"_237":-5,"_231":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content",[29],"bafy2bzacecso2o7bwea36sevjo45wf2phruj5jcoomebikt7btumd3xpcrax2",[29],[185],{"_485":486,"_487":488},"seconds","1743456714","nanos",453000000,{"_485":490,"_487":491},"1776378355",213000000,"sortTime","2025-03-31T21:31:54.453Z","bafy2bzacecefqjbssb4ej2oc4wbspy3cvuuadbabfzxrzls56zqiissf6inw4","breadcrumbs",[497],{"_214":215,"_186":49,"_498":25},"isMissing","activitySummary",{"_501":-5,"_502":49,"_503":61,"_504":505,"_506":6},"latestCommentTime","latestCommentId","commentCount","latestChangeTime",{"_485":490,"_487":491},"isUnread",{"_220":494,"_224":508},"1743456714453","redirectInfo",{"_214":511},"Content",{"_36":27,"_38":513,"_186":518,"_206":519,"_208":520,"_210":521,"_492":524,"_220":525,"_203":517,"_495":526,"_499":528,"_222":530,"_509":-5,"_212":532,"_226":227},{"_38":514,"_232":185,"_186":515,"_203":517,"_234":-5,"_235":-5,"_236":-5,"_237":-5,"_231":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/home",[516],"home","bafyreicyjsg763rk6qtlns2wkpxn7uhhqc4t7c5ytd7ll7cd4ev42rgq5u",[516],[185],{"_485":225,"_487":61},{"_485":522,"_487":523},"1776190620",425000000,"1970-01-01T00:00:00.000Z","bafyreihqedcuddy2wuyh6dm6cy7pc5yhkdmq4bto7dzbz2bu3v5jsqud2y",[527],{"_214":215,"_186":49,"_498":25},{"_501":-5,"_502":49,"_503":61,"_504":529,"_506":6},{"_485":522,"_487":523},{"_220":525,"_224":531},"1776190620425",{"_214":533},"Home",1780971695941,[536,233,188],"DOC_LIST_DIRECTORY","[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",\"Children\"]",{"_246":539,"_364":560,"_367":562},{"_248":540,"_349":350,"_351":559,"_353":-5,"_354":61,"_355":61,"_356":61,"_357":-5,"_358":-5,"_359":25,"_360":361,"_362":363},{"_541":176,"_542":543,"_544":545,"_32":546,"_547":548,"_553":554},"citations","comments",22,"changes",11,2,"authorUids",[549,550,551,552,185],"z6Mkvz9TgGtv9zsGsdrksfNk1ajbFancgHREJEz3Y2HsAVdk","z6Mkfm8befyW32tingJymhfqjX6nhLwoBkQxdSmqg9DnqmiH","z6Mkk4LFMaccittZNsRiE1VPuzaZYWu5QnpUtQHsMLnrr7tN","z6MkfJx9hdCATZ8GoZnwK9LhpPEzDMxmp6HWiCjyqikaQXQ5","blocks",{"_70":555,"_141":556,"_93":557,"_114":558},{"_541":546,"_542":61},{"_541":61,"_542":350},{"_541":61,"_542":176},{"_541":61,"_542":350},1780971695988,[561,233],"DOCUMENT_INTERACTION_SUMMARY","[\"DOCUMENT_INTERACTION_SUMMARY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"]",{"_246":564,"_364":696,"_367":703},{"_248":565,"_349":350,"_351":695,"_353":-5,"_354":61,"_355":61,"_356":61,"_357":-5,"_358":-5,"_359":25,"_360":361,"_362":363},{"_566":511,"_567":568,"_570":571,"_187":188,"_679":680,"_689":690},"queryTargetName","in",{"_38":479,"_232":185,"_186":569,"_203":-5,"_234":-5,"_235":-5,"_236":-5,"_237":-5},[29],"results",[572,601,624,653],{"_36":27,"_38":573,"_186":578,"_206":579,"_208":580,"_210":582,"_492":585,"_220":586,"_203":577,"_495":587,"_499":591,"_222":593,"_509":-5,"_212":595,"_226":227},{"_38":574,"_232":185,"_186":575,"_203":577,"_234":-5,"_235":-5,"_236":-5,"_237":-5,"_231":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/why-state-machines-are-a-game-changer-for-ui-development",[29,576],"why-state-machines-are-a-game-changer-for-ui-development","bafy2bzacea5seqrzbgdxuthunjxv27bjaghy3mx4pte6vyu36fithgpiz7e7c",[29,576],[185],{"_485":490,"_487":581},108000000,{"_485":583,"_487":584},"1776378609",336000000,"2026-04-16T22:25:55.108Z","bafyreiejui73fg3kf6z4vsflc4ktnhhi2wh5inpt5m725keqduve52pcbm",[588,589],{"_214":215,"_186":49,"_498":25},{"_214":511,"_186":590,"_498":25},"/content",{"_501":-5,"_502":49,"_503":61,"_504":592,"_506":6},{"_485":583,"_487":584},{"_220":586,"_224":594},"1776378355139",{"_214":596,"_597":598,"_599":600},"Why State Machines Are a Game-Changer for UI Development","summary","A practical example: adding an \"edit older version\" confirmation guard to a document editor — with zero changes to existing UI triggers.","cover","ipfs://bafybeibehmknevwp6gtzpnifbbs6zbtuu2akzl6os6mwt2xk4nmvwxv37m",{"_36":27,"_38":602,"_186":607,"_206":608,"_208":609,"_210":612,"_492":613,"_220":606,"_203":606,"_495":614,"_499":617,"_222":619,"_509":-5,"_212":621,"_226":227},{"_38":603,"_232":185,"_186":604,"_203":606,"_234":-5,"_235":-5,"_236":-5,"_237":-5,"_231":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/estados-eventos-y-transiciones-desmitificados",[29,605],"estados-eventos-y-transiciones-desmitificados","bafyreic4j7bvslgeusgqsr436vww4wfnkjnsmxplkzpmnmxq5egw3vqogy",[29,605],[185],{"_485":610,"_487":611},"1774432586",729000000,{"_485":610,"_487":611},"2026-03-25T09:56:26.729Z",[615,616],{"_214":215,"_186":49,"_498":25},{"_214":511,"_186":590,"_498":25},{"_501":-5,"_502":49,"_503":61,"_504":618,"_506":25},{"_485":610,"_487":611},{"_220":606,"_224":620},"1774432586761",{"_214":622,"_599":623},"Estados, eventos y transiciones, desmitificados","ipfs://bafybeibu6gd4vij4zi7rpjhgp7au3bhjqf6yumgb35gof4wjusq3sfm2nu",{"_36":27,"_38":625,"_186":630,"_206":631,"_208":632,"_210":635,"_492":638,"_220":639,"_203":629,"_495":640,"_499":643,"_222":649,"_509":-5,"_212":651,"_226":227},{"_38":626,"_232":185,"_186":627,"_203":629,"_234":-5,"_235":-5,"_236":-5,"_237":-5,"_231":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified",[29,628],"states-events-and-transitions-demystified","bafy2bzacedazyemw5mvbfvvecvh7xlbfqvioyvxtwo6kmgvwapznbbxcycd56",[29,628],[185],{"_485":633,"_487":634},"1743980387",219000000,{"_485":636,"_487":637},"1774432581",353000000,"2025-04-06T22:59:47.219Z","bafy2bzacebkqzb64fcvmh5ovzsectjkvnjnz5zplcytarmy2gcuwsu3w7yba2",[641,642],{"_214":215,"_186":49,"_498":25},{"_214":511,"_186":590,"_498":25},{"_501":644,"_502":647,"_503":350,"_504":648,"_506":6},{"_485":645,"_487":646},"1772053248",730000000,"z6Mkfm8befyW32tingJymhfqjX6nhLwoBkQxdSmqg9DnqmiH/z6Fbka847o2Nk3",{"_485":636,"_487":637},{"_220":639,"_224":650},"1743980387218",{"_214":652,"_599":623},"States, Events, and Transitions, Demystified",{"_36":27,"_38":654,"_186":659,"_206":660,"_208":661,"_210":664,"_492":667,"_220":668,"_203":658,"_495":669,"_499":672,"_222":674,"_509":-5,"_212":676,"_226":227},{"_38":655,"_232":185,"_186":656,"_203":658,"_234":-5,"_235":-5,"_236":-5,"_237":-5,"_231":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong",[29,657],"you-are-writing-ui-state-wrong","bafy2bzacecxbssfu6tsgckkty6krdldbq232rib3mvbbxhfhi745pqg4m7zsg",[29,657],[185],{"_485":662,"_487":663},"1743457873",698000000,{"_485":665,"_487":666},"1743482671",918000000,"2025-03-31T21:51:13.698Z","bafy2bzaceblbz4bq35scgunjmywxitadj53jlujzzqmderu2enx65g4iibg4w",[670,671],{"_214":215,"_186":49,"_498":25},{"_214":511,"_186":590,"_498":25},{"_501":-5,"_502":49,"_503":61,"_504":673,"_506":6},{"_485":665,"_487":666},{"_220":668,"_224":675},"1743457873698",{"_214":677,"_599":678},"You are Writing UI State Wrong","ipfs://bafkreidydkqzjcztbuxuzxdc5i3ctfbtzzv6zl3nlvawtnxpo7opl6u2vu","interactionSummaries",{"_574":681,"_603":683,"_626":685,"_655":687},{"_542":61,"_547":682},[],{"_542":61,"_547":684},[],{"_542":350,"_547":686},[],{"_542":61,"_547":688},[],"accountsMetadata",{"_185":691},{"_38":692,"_212":694},{"_38":233,"_232":185,"_186":693,"_203":204,"_234":-5,"_235":-5,"_236":-5,"_237":-5},[],{"_214":215},1780971695994,[697,698],"QUERY_BLOCK",{"_181":699,"_189":701},[700],{"_184":185,"_186":29,"_187":188},[702],{"_192":25,"_193":194},"[\"QUERY_BLOCK\",{\"includes\":[{\"mode\":\"Children\",\"path\":\"content\",\"space\":\"z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"}],\"sort\":[{\"reverse\":false,\"term\":\"UpdateTime\"}]}]",{"_246":705,"_364":712,"_367":714},{"_248":706,"_349":350,"_351":711,"_353":-5,"_354":61,"_355":61,"_356":61,"_357":-5,"_358":-5,"_359":25,"_360":361,"_362":363},{"_36":205,"_38":707,"_212":709},{"_203":204,"_232":185,"_38":233,"_186":708,"_234":-5,"_235":-5,"_236":-5,"_237":-5},[],{"_214":215,"_216":217,"_710":-5,"_597":-5},"icon",1780971695991,[713,185],"ACCOUNT","[\"ACCOUNT\",\"z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"]","ssrContentHTML","

Modeling UI with State Machines should be the norm.

A practical guide to building better interfaces with XState, React & TypeScript

Modern UI development is full of invisible complexity: async flows, conflicting states, edge cases, and fragile logic spread across useEffects and booleans.

This series is about doing it differently.

By modeling your UI behavior with state machines and statecharts, you can write code that’s:

Easier to understand
Safer to extend
Visually predictable
Naturally testable
Easy to Maintain and Refactor

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.

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.

Posts

","enableWebSigning","origin","homeMetadata",{"_214":215,"_216":217},"originHomeId",{"_232":185,"_38":233,"_186":723,"_203":-5,"_234":-5,"_235":-5,"_236":-5,"_237":-5},[],"meta",{"_726":727,"_827":828},"values",{"_728":729,"_731":732,"_733":734,"_735":736,"_738":739,"_740":741,"_742":743,"_745":746,"_747":748,"_749":750,"_751":752,"_753":754,"_755":756,"_757":758,"_759":760,"_761":762,"_763":764,"_765":766,"_767":768,"_769":770,"_771":772,"_773":774,"_775":776,"_777":778,"_779":780,"_781":782,"_783":784,"_785":786,"_787":788,"_789":790,"_791":792,"_793":794,"_795":796,"_797":798,"_799":800,"_801":802,"_803":804,"_805":806,"_807":808,"_809":810,"_811":812,"_813":814,"_815":816,"_817":818,"_819":820,"_821":822,"_823":824,"_825":826},"document.generationInfo.generation",[730],"bigint","dehydratedState.queries.0.state.data.document.generationInfo.generation",[730],"dehydratedState.queries.1.state.data.document.generationInfo.generation",[730],"dehydratedState.queries.1.queryKey.2",[737],"undefined","dehydratedState.queries.2.state.data.0.createTime.seconds",[730],"dehydratedState.queries.2.state.data.0.updateTime.seconds",[730],"dehydratedState.queries.2.state.data.0.sortTime",[744],"Date","dehydratedState.queries.2.state.data.0.activitySummary.latestCommentTime",[737],"dehydratedState.queries.2.state.data.0.activitySummary.latestChangeTime.seconds",[730],"dehydratedState.queries.2.state.data.0.generationInfo.generation",[730],"dehydratedState.queries.2.state.data.0.redirectInfo",[737],"dehydratedState.queries.2.state.data.1.createTime.seconds",[730],"dehydratedState.queries.2.state.data.1.updateTime.seconds",[730],"dehydratedState.queries.2.state.data.1.sortTime",[744],"dehydratedState.queries.2.state.data.1.activitySummary.latestCommentTime",[737],"dehydratedState.queries.2.state.data.1.activitySummary.latestChangeTime.seconds",[730],"dehydratedState.queries.2.state.data.1.generationInfo.generation",[730],"dehydratedState.queries.2.state.data.1.redirectInfo",[737],"dehydratedState.queries.4.state.data.results.0.createTime.seconds",[730],"dehydratedState.queries.4.state.data.results.0.updateTime.seconds",[730],"dehydratedState.queries.4.state.data.results.0.sortTime",[744],"dehydratedState.queries.4.state.data.results.0.activitySummary.latestCommentTime",[737],"dehydratedState.queries.4.state.data.results.0.activitySummary.latestChangeTime.seconds",[730],"dehydratedState.queries.4.state.data.results.0.generationInfo.generation",[730],"dehydratedState.queries.4.state.data.results.0.redirectInfo",[737],"dehydratedState.queries.4.state.data.results.1.createTime.seconds",[730],"dehydratedState.queries.4.state.data.results.1.updateTime.seconds",[730],"dehydratedState.queries.4.state.data.results.1.sortTime",[744],"dehydratedState.queries.4.state.data.results.1.activitySummary.latestCommentTime",[737],"dehydratedState.queries.4.state.data.results.1.activitySummary.latestChangeTime.seconds",[730],"dehydratedState.queries.4.state.data.results.1.generationInfo.generation",[730],"dehydratedState.queries.4.state.data.results.1.redirectInfo",[737],"dehydratedState.queries.4.state.data.results.2.createTime.seconds",[730],"dehydratedState.queries.4.state.data.results.2.updateTime.seconds",[730],"dehydratedState.queries.4.state.data.results.2.sortTime",[744],"dehydratedState.queries.4.state.data.results.2.activitySummary.latestCommentTime.seconds",[730],"dehydratedState.queries.4.state.data.results.2.activitySummary.latestChangeTime.seconds",[730],"dehydratedState.queries.4.state.data.results.2.generationInfo.generation",[730],"dehydratedState.queries.4.state.data.results.2.redirectInfo",[737],"dehydratedState.queries.4.state.data.results.3.createTime.seconds",[730],"dehydratedState.queries.4.state.data.results.3.updateTime.seconds",[730],"dehydratedState.queries.4.state.data.results.3.sortTime",[744],"dehydratedState.queries.4.state.data.results.3.activitySummary.latestCommentTime",[737],"dehydratedState.queries.4.state.data.results.3.activitySummary.latestChangeTime.seconds",[730],"dehydratedState.queries.4.state.data.results.3.generationInfo.generation",[730],"dehydratedState.queries.4.state.data.results.3.redirectInfo",[737],"dehydratedState.queries.5.state.data.metadata.icon",[737],"dehydratedState.queries.5.state.data.metadata.summary",[737],"referentialEqualities",{"_829":830,"_728":832,"_740":833,"_755":834,"_769":835,"_781":836,"_797":837,"_811":838},"dehydratedState.queries.4.queryKey.1",[831],"document.content.7.children.0.block.attributes.query",[731,733,753],[747,767],[761],[775],[783,789],[803],[817],"actionData","errors"]