[{"_1":2,"_821":-5,"_822":-5},"loaderData",{"_3":4,"_11":12},"root",{"_5":6,"_7":6,"_8":9,"_10":9},"isProd",true,"enableStats","domain","lunaticoin.blog","siteHost","routes/$",{"_13":14,"_709":710},"json",{"_15":16,"_17":18,"_19":-5,"_20":-5,"_21":-5,"_22":23,"_24":-5,"_25":26,"_226":6,"_36":227,"_236":-5,"_237":238,"_685":686,"_687":23,"_10":688,"_689":688,"_690":691,"_704":705},"prefersLanguages",[],"viewTerm","profile","panelParam","openComment","accountUid","isInspect",false,"inspectTab","document",{"_27":28,"_201":202,"_203":183,"_204":205,"_184":47,"_206":207,"_208":209,"_210":211,"_216":217,"_218":219,"_220":221,"_224":225},"content",[29,48,65,79,86,136,157,165],{"_30":31,"_32":33},"children",[],"block",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47},"type","Heading","id","YS5-lwb-","revision","bafy2bzacedo2fapga62cenj2wqdo7fnnbwssy3ohyonmse3l74fds24nqx4r6","attributes",{},"annotations",[],"text","Modeling UI with State Machines should be the norm.","link","",{"_30":49,"_32":50},[],{"_34":51,"_36":52,"_38":39,"_40":53,"_42":54,"_44":64,"_46":47},"Paragraph","HIUNgDv3",{},[55],{"_34":56,"_57":58,"_60":61,"_40":63,"_46":47},"Bold","starts",[59],0,"ends",[62],79,{},"A practical guide to building better interfaces with XState, React & TypeScript",{"_30":66,"_32":67},[],{"_34":51,"_36":68,"_38":39,"_40":69,"_42":70,"_44":78,"_46":47},"RH2vgIqw",{},[71],{"_34":72,"_57":73,"_60":75,"_40":77,"_46":47},"Code",[74],132,[76],141,{},"Modern UI development is full of invisible complexity: async flows, conflicting states, edge cases, and fragile logic spread across useEffects and booleans.",{"_30":80,"_32":81},[],{"_34":51,"_36":82,"_38":39,"_40":83,"_42":84,"_44":85,"_46":47},"1i3NXohu",{},[],"This series is about doing it differently.",{"_30":87,"_32":123},[88,95,102,109,116],{"_30":89,"_32":90},[],{"_34":51,"_36":91,"_38":39,"_40":92,"_42":93,"_44":94,"_46":47},"cP0mEJaa",{},[],"Easier to understand",{"_30":96,"_32":97},[],{"_34":51,"_36":98,"_38":39,"_40":99,"_42":100,"_44":101,"_46":47},"mUUMMN68",{},[],"Safer to extend",{"_30":103,"_32":104},[],{"_34":51,"_36":105,"_38":39,"_40":106,"_42":107,"_44":108,"_46":47},"xkA4h4Fv",{},[],"Visually predictable",{"_30":110,"_32":111},[],{"_34":51,"_36":112,"_38":39,"_40":113,"_42":114,"_44":115,"_46":47},"1AW5Zc7P",{},[],"Naturally testable",{"_30":117,"_32":118},[],{"_34":51,"_36":119,"_38":39,"_40":120,"_42":121,"_44":122,"_46":47},"mISZl3dK",{},[],"Easy to Maintain and Refactor",{"_34":51,"_36":124,"_38":39,"_40":125,"_42":128,"_44":135,"_46":47},"mZU_BNzy",{"_126":127},"childrenType","Unordered",[129],{"_34":56,"_57":130,"_60":132,"_40":134,"_46":47},[131],34,[133],64,{},"By modeling your UI behavior with state machines and statecharts, you can write code that’s:",{"_30":137,"_32":138},[],{"_34":51,"_36":139,"_38":39,"_40":140,"_42":141,"_44":156,"_46":47},"dT3b7j6V",{},[142],{"_34":56,"_57":143,"_60":149,"_40":155,"_46":47},[144,145,146,147,148],100,134,142,149,168,[150,151,152,153,154],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.",{"_30":158,"_32":159},[],{"_34":51,"_36":160,"_38":161,"_40":162,"_42":163,"_44":164,"_46":47},"-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.",{"_30":166,"_32":195},[167],{"_30":168,"_32":169},[],{"_34":170,"_36":171,"_38":39,"_40":172,"_42":194,"_44":47,"_46":47},"Query","XMasrKG1",{"_173":174,"_175":176,"_177":178,"_193":23},"columnCount",3,"style","List","query",{"_179":180,"_187":188},"includes",[181],{"_182":183,"_184":27,"_185":186},"space","z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp","path","mode","Children","sort",[189],{"_190":23,"_191":192},"reverse","term","UpdateTime","banner",[],{"_34":35,"_36":196,"_38":39,"_40":197,"_42":199,"_44":200,"_46":47},"JuhiSEfW",{"_126":198},"Group",[],"Posts","version","bafy2bzacecwxx5llylg2hzhhcsf4r3dzvtr22wwk6wnw4qklwcvdp6jxln2ni","account","authors",[183],"createTime","1970-01-01T00:00:00Z","updateTime","2025-04-24T21:23:24.377Z","metadata",{"_212":213,"_214":215},"name","UI with State Machines","siteUrl","https://ui-with-state-machines.hyper.media","detachedBlocks",{},"genesis","bafy2bzacecztctsdsles75mugrpzhgspjvfnf7atqvn5cmqqbccz4grooldak","generationInfo",{"_218":219,"_222":223},"generation","0","visibility","PUBLIC","isLatest",{"_184":228,"_201":202,"_229":23,"_230":183,"_36":231,"_232":-5,"_233":-5,"_234":-5,"_235":-5},[],"latest","uid","hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp","blockRef","blockRange","hostname","scheme","siteHomeIcon","dehydratedState",{"_239":240,"_241":242},"mutations",[],"queries",[243,367,472,536,561,674],{"_244":245,"_362":363,"_365":366},"state",{"_246":247,"_347":348,"_349":350,"_351":-5,"_352":59,"_353":59,"_354":59,"_355":-5,"_356":-5,"_357":23,"_358":359,"_360":361},"data",{"_34":25,"_25":248,"_36":345},{"_27":249,"_201":202,"_203":183,"_204":341,"_184":47,"_206":207,"_208":209,"_210":342,"_216":343,"_218":219,"_220":344,"_224":225},[250,255,264,273,278,312,321,326],{"_30":251,"_32":252},[],{"_34":35,"_36":37,"_38":39,"_40":253,"_42":254,"_44":45,"_46":47},{},[],{"_30":256,"_32":257},[],{"_34":51,"_36":52,"_38":39,"_40":258,"_42":259,"_44":64,"_46":47},{},[260],{"_34":56,"_57":261,"_60":262,"_40":263,"_46":47},[59],[62],{},{"_30":265,"_32":266},[],{"_34":51,"_36":68,"_38":39,"_40":267,"_42":268,"_44":78,"_46":47},{},[269],{"_34":72,"_57":270,"_60":271,"_40":272,"_46":47},[74],[76],{},{"_30":274,"_32":275},[],{"_34":51,"_36":82,"_38":39,"_40":276,"_42":277,"_44":85,"_46":47},{},[],{"_30":279,"_32":305},[280,285,290,295,300],{"_30":281,"_32":282},[],{"_34":51,"_36":91,"_38":39,"_40":283,"_42":284,"_44":94,"_46":47},{},[],{"_30":286,"_32":287},[],{"_34":51,"_36":98,"_38":39,"_40":288,"_42":289,"_44":101,"_46":47},{},[],{"_30":291,"_32":292},[],{"_34":51,"_36":105,"_38":39,"_40":293,"_42":294,"_44":108,"_46":47},{},[],{"_30":296,"_32":297},[],{"_34":51,"_36":112,"_38":39,"_40":298,"_42":299,"_44":115,"_46":47},{},[],{"_30":301,"_32":302},[],{"_34":51,"_36":119,"_38":39,"_40":303,"_42":304,"_44":122,"_46":47},{},[],{"_34":51,"_36":124,"_38":39,"_40":306,"_42":307,"_44":135,"_46":47},{"_126":127},[308],{"_34":56,"_57":309,"_60":310,"_40":311,"_46":47},[131],[133],{},{"_30":313,"_32":314},[],{"_34":51,"_36":139,"_38":39,"_40":315,"_42":316,"_44":156,"_46":47},{},[317],{"_34":56,"_57":318,"_60":319,"_40":320,"_46":47},[144,145,146,147,148],[150,151,152,153,154],{},{"_30":322,"_32":323},[],{"_34":51,"_36":160,"_38":161,"_40":324,"_42":325,"_44":164,"_46":47},{},[],{"_30":327,"_32":338},[328],{"_30":329,"_32":330},[],{"_34":170,"_36":171,"_38":39,"_40":331,"_42":337,"_44":47,"_46":47},{"_173":174,"_175":176,"_177":332,"_193":23},{"_179":333,"_187":335},[334],{"_182":183,"_184":27,"_185":186},[336],{"_190":23,"_191":192},[],{"_34":35,"_36":196,"_38":39,"_40":339,"_42":340,"_44":200,"_46":47},{"_126":198},[],[183],{"_212":213,"_214":215},{},{"_218":219,"_222":223},{"_36":231,"_230":183,"_184":346,"_201":202,"_232":-5,"_233":-5,"_234":-5,"_235":-5,"_229":23},[],"dataUpdateCount",1,"dataUpdatedAt",1779258258894,"error","errorUpdateCount","errorUpdatedAt","fetchFailureCount","fetchFailureReason","fetchMeta","isInvalidated","status","success","fetchStatus","idle","queryKey",[364,231,202,23],"ENTITY","queryHash","[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",\"bafy2bzacecwxx5llylg2hzhhcsf4r3dzvtr22wwk6wnw4qklwcvdp6jxln2ni\",false]",{"_244":368,"_362":470,"_365":471},{"_246":369,"_347":348,"_349":469,"_351":-5,"_352":59,"_353":59,"_354":59,"_355":-5,"_356":-5,"_357":23,"_358":359,"_360":361},{"_34":25,"_25":370,"_36":467},{"_27":371,"_201":202,"_203":183,"_204":463,"_184":47,"_206":207,"_208":209,"_210":464,"_216":465,"_218":219,"_220":466,"_224":225},[372,377,386,395,400,434,443,448],{"_30":373,"_32":374},[],{"_34":35,"_36":37,"_38":39,"_40":375,"_42":376,"_44":45,"_46":47},{},[],{"_30":378,"_32":379},[],{"_34":51,"_36":52,"_38":39,"_40":380,"_42":381,"_44":64,"_46":47},{},[382],{"_34":56,"_57":383,"_60":384,"_40":385,"_46":47},[59],[62],{},{"_30":387,"_32":388},[],{"_34":51,"_36":68,"_38":39,"_40":389,"_42":390,"_44":78,"_46":47},{},[391],{"_34":72,"_57":392,"_60":393,"_40":394,"_46":47},[74],[76],{},{"_30":396,"_32":397},[],{"_34":51,"_36":82,"_38":39,"_40":398,"_42":399,"_44":85,"_46":47},{},[],{"_30":401,"_32":427},[402,407,412,417,422],{"_30":403,"_32":404},[],{"_34":51,"_36":91,"_38":39,"_40":405,"_42":406,"_44":94,"_46":47},{},[],{"_30":408,"_32":409},[],{"_34":51,"_36":98,"_38":39,"_40":410,"_42":411,"_44":101,"_46":47},{},[],{"_30":413,"_32":414},[],{"_34":51,"_36":105,"_38":39,"_40":415,"_42":416,"_44":108,"_46":47},{},[],{"_30":418,"_32":419},[],{"_34":51,"_36":112,"_38":39,"_40":420,"_42":421,"_44":115,"_46":47},{},[],{"_30":423,"_32":424},[],{"_34":51,"_36":119,"_38":39,"_40":425,"_42":426,"_44":122,"_46":47},{},[],{"_34":51,"_36":124,"_38":39,"_40":428,"_42":429,"_44":135,"_46":47},{"_126":127},[430],{"_34":56,"_57":431,"_60":432,"_40":433,"_46":47},[131],[133],{},{"_30":435,"_32":436},[],{"_34":51,"_36":139,"_38":39,"_40":437,"_42":438,"_44":156,"_46":47},{},[439],{"_34":56,"_57":440,"_60":441,"_40":442,"_46":47},[144,145,146,147,148],[150,151,152,153,154],{},{"_30":444,"_32":445},[],{"_34":51,"_36":160,"_38":161,"_40":446,"_42":447,"_44":164,"_46":47},{},[],{"_30":449,"_32":460},[450],{"_30":451,"_32":452},[],{"_34":170,"_36":171,"_38":39,"_40":453,"_42":459,"_44":47,"_46":47},{"_173":174,"_175":176,"_177":454,"_193":23},{"_179":455,"_187":457},[456],{"_182":183,"_184":27,"_185":186},[458],{"_190":23,"_191":192},[],{"_34":35,"_36":196,"_38":39,"_40":461,"_42":462,"_44":200,"_46":47},{"_126":198},[],[183],{"_212":213,"_214":215},{},{"_218":219,"_222":223},{"_36":231,"_230":183,"_184":468,"_201":-5,"_232":-5,"_233":-5,"_234":-5,"_235":-5,"_229":6},[],1779258258889,[364,231,-5,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",null,true]",{"_244":473,"_362":533,"_365":535},{"_246":474,"_347":348,"_349":532,"_351":-5,"_352":59,"_353":59,"_354":59,"_355":-5,"_356":-5,"_357":23,"_358":359,"_360":361},[475,510],{"_34":25,"_36":476,"_184":480,"_204":481,"_206":482,"_208":487,"_490":491,"_218":492,"_201":479,"_493":494,"_497":498,"_220":505,"_507":-5,"_210":508,"_224":225},{"_36":477,"_230":183,"_184":478,"_201":479,"_232":-5,"_233":-5,"_234":-5,"_235":-5,"_229":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content",[27],"bafy2bzacecso2o7bwea36sevjo45wf2phruj5jcoomebikt7btumd3xpcrax2",[27],[183],{"_483":484,"_485":486},"seconds","1743456714","nanos",453000000,{"_483":488,"_485":489},"1776378355",213000000,"sortTime","2025-03-31T21:31:54.453Z","bafy2bzacecefqjbssb4ej2oc4wbspy3cvuuadbabfzxrzls56zqiissf6inw4","breadcrumbs",[495],{"_212":213,"_184":47,"_496":23},"isMissing","activitySummary",{"_499":-5,"_500":47,"_501":59,"_502":503,"_504":6},"latestCommentTime","latestCommentId","commentCount","latestChangeTime",{"_483":488,"_485":489},"isUnread",{"_218":492,"_222":506},"1743456714453","redirectInfo",{"_212":509},"Content",{"_34":25,"_36":511,"_184":516,"_204":517,"_206":518,"_208":519,"_490":522,"_218":523,"_201":515,"_493":524,"_497":526,"_220":528,"_507":-5,"_210":530,"_224":225},{"_36":512,"_230":183,"_184":513,"_201":515,"_232":-5,"_233":-5,"_234":-5,"_235":-5,"_229":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/home",[514],"home","bafyreicyjsg763rk6qtlns2wkpxn7uhhqc4t7c5ytd7ll7cd4ev42rgq5u",[514],[183],{"_483":223,"_485":59},{"_483":520,"_485":521},"1776190620",425000000,"1970-01-01T00:00:00.000Z","bafyreihqedcuddy2wuyh6dm6cy7pc5yhkdmq4bto7dzbz2bu3v5jsqud2y",[525],{"_212":213,"_184":47,"_496":23},{"_499":-5,"_500":47,"_501":59,"_502":527,"_504":6},{"_483":520,"_485":521},{"_218":523,"_222":529},"1776190620425",{"_212":531},"Home",1779258258891,[534,231,186],"DOC_LIST_DIRECTORY","[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",\"Children\"]",{"_244":537,"_362":558,"_365":560},{"_246":538,"_347":348,"_349":557,"_351":-5,"_352":59,"_353":59,"_354":59,"_355":-5,"_356":-5,"_357":23,"_358":359,"_360":361},{"_539":174,"_540":541,"_542":543,"_30":544,"_545":546,"_551":552},"citations","comments",22,"changes",11,2,"authorUids",[547,548,549,550,183],"z6Mkvz9TgGtv9zsGsdrksfNk1ajbFancgHREJEz3Y2HsAVdk","z6Mkfm8befyW32tingJymhfqjX6nhLwoBkQxdSmqg9DnqmiH","z6Mkk4LFMaccittZNsRiE1VPuzaZYWu5QnpUtQHsMLnrr7tN","z6MkfJx9hdCATZ8GoZnwK9LhpPEzDMxmp6HWiCjyqikaQXQ5","blocks",{"_68":553,"_139":554,"_91":555,"_112":556},{"_539":544,"_540":59},{"_539":59,"_540":348},{"_539":59,"_540":174},{"_539":59,"_540":348},1779258259147,[559,231],"DOCUMENT_INTERACTION_SUMMARY","[\"DOCUMENT_INTERACTION_SUMMARY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"]",{"_244":562,"_362":672,"_365":673},{"_246":563,"_347":348,"_349":671,"_351":-5,"_352":59,"_353":59,"_354":59,"_355":-5,"_356":-5,"_357":23,"_358":359,"_360":361},[564,593,616,645],{"_34":25,"_36":565,"_184":570,"_204":571,"_206":572,"_208":574,"_490":577,"_218":578,"_201":569,"_493":579,"_497":583,"_220":585,"_507":-5,"_210":587,"_224":225},{"_36":566,"_230":183,"_184":567,"_201":569,"_232":-5,"_233":-5,"_234":-5,"_235":-5,"_229":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/why-state-machines-are-a-game-changer-for-ui-development",[27,568],"why-state-machines-are-a-game-changer-for-ui-development","bafy2bzacea5seqrzbgdxuthunjxv27bjaghy3mx4pte6vyu36fithgpiz7e7c",[27,568],[183],{"_483":488,"_485":573},108000000,{"_483":575,"_485":576},"1776378609",336000000,"2026-04-16T22:25:55.108Z","bafyreiejui73fg3kf6z4vsflc4ktnhhi2wh5inpt5m725keqduve52pcbm",[580,581],{"_212":213,"_184":47,"_496":23},{"_212":509,"_184":582,"_496":23},"/content",{"_499":-5,"_500":47,"_501":59,"_502":584,"_504":6},{"_483":575,"_485":576},{"_218":578,"_222":586},"1776378355139",{"_212":588,"_589":590,"_591":592},"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",{"_34":25,"_36":594,"_184":599,"_204":600,"_206":601,"_208":604,"_490":605,"_218":598,"_201":598,"_493":606,"_497":609,"_220":611,"_507":-5,"_210":613,"_224":225},{"_36":595,"_230":183,"_184":596,"_201":598,"_232":-5,"_233":-5,"_234":-5,"_235":-5,"_229":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/estados-eventos-y-transiciones-desmitificados",[27,597],"estados-eventos-y-transiciones-desmitificados","bafyreic4j7bvslgeusgqsr436vww4wfnkjnsmxplkzpmnmxq5egw3vqogy",[27,597],[183],{"_483":602,"_485":603},"1774432586",729000000,{"_483":602,"_485":603},"2026-03-25T09:56:26.729Z",[607,608],{"_212":213,"_184":47,"_496":23},{"_212":509,"_184":582,"_496":23},{"_499":-5,"_500":47,"_501":59,"_502":610,"_504":23},{"_483":602,"_485":603},{"_218":598,"_222":612},"1774432586761",{"_212":614,"_591":615},"Estados, eventos y transiciones, desmitificados","ipfs://bafybeibu6gd4vij4zi7rpjhgp7au3bhjqf6yumgb35gof4wjusq3sfm2nu",{"_34":25,"_36":617,"_184":622,"_204":623,"_206":624,"_208":627,"_490":630,"_218":631,"_201":621,"_493":632,"_497":635,"_220":641,"_507":-5,"_210":643,"_224":225},{"_36":618,"_230":183,"_184":619,"_201":621,"_232":-5,"_233":-5,"_234":-5,"_235":-5,"_229":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified",[27,620],"states-events-and-transitions-demystified","bafy2bzacedazyemw5mvbfvvecvh7xlbfqvioyvxtwo6kmgvwapznbbxcycd56",[27,620],[183],{"_483":625,"_485":626},"1743980387",219000000,{"_483":628,"_485":629},"1774432581",353000000,"2025-04-06T22:59:47.219Z","bafy2bzacebkqzb64fcvmh5ovzsectjkvnjnz5zplcytarmy2gcuwsu3w7yba2",[633,634],{"_212":213,"_184":47,"_496":23},{"_212":509,"_184":582,"_496":23},{"_499":636,"_500":639,"_501":348,"_502":640,"_504":6},{"_483":637,"_485":638},"1772053248",730000000,"z6Mkfm8befyW32tingJymhfqjX6nhLwoBkQxdSmqg9DnqmiH/z6Fbka847o2Nk3",{"_483":628,"_485":629},{"_218":631,"_222":642},"1743980387218",{"_212":644,"_591":615},"States, Events, and Transitions, Demystified",{"_34":25,"_36":646,"_184":651,"_204":652,"_206":653,"_208":656,"_490":659,"_218":660,"_201":650,"_493":661,"_497":664,"_220":666,"_507":-5,"_210":668,"_224":225},{"_36":647,"_230":183,"_184":648,"_201":650,"_232":-5,"_233":-5,"_234":-5,"_235":-5,"_229":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong",[27,649],"you-are-writing-ui-state-wrong","bafy2bzacecxbssfu6tsgckkty6krdldbq232rib3mvbbxhfhi745pqg4m7zsg",[27,649],[183],{"_483":654,"_485":655},"1743457873",698000000,{"_483":657,"_485":658},"1743482671",918000000,"2025-03-31T21:51:13.698Z","bafy2bzaceblbz4bq35scgunjmywxitadj53jlujzzqmderu2enx65g4iibg4w",[662,663],{"_212":213,"_184":47,"_496":23},{"_212":509,"_184":582,"_496":23},{"_499":-5,"_500":47,"_501":59,"_502":665,"_504":6},{"_483":657,"_485":658},{"_218":660,"_222":667},"1743457873698",{"_212":669,"_591":670},"You are Writing UI State Wrong","ipfs://bafkreidydkqzjcztbuxuzxdc5i3ctfbtzzv6zl3nlvawtnxpo7opl6u2vu",1779258259308,[534,477,186],"[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content\",\"Children\"]",{"_244":675,"_362":682,"_365":684},{"_246":676,"_347":348,"_349":681,"_351":-5,"_352":59,"_353":59,"_354":59,"_355":-5,"_356":-5,"_357":23,"_358":359,"_360":361},{"_34":203,"_36":677,"_210":679},{"_201":202,"_230":183,"_36":231,"_184":678,"_232":-5,"_233":-5,"_234":-5,"_235":-5},[],{"_212":213,"_214":215,"_680":-5,"_589":-5},"icon",1779258259256,[683,183],"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","https://lunaticoin.blog","origin","homeMetadata",{"_212":692,"_680":693,"_214":688,"_694":47,"_695":47,"_696":23,"_697":23,"_698":699,"_700":701},"Lunaticoin","ipfs://bafkreicbleoxq7kuohibnqo67ukpj6pwhnddzzzvwijztydnoaj4zzspy4","layout","seedExperimentalLogo","showOutline","showActivity","contentWidth","L","theme",{"_702":703},"headerLayout","Center","originHomeId",{"_230":706,"_36":707,"_184":708,"_201":-5,"_232":-5,"_233":-5,"_234":-5,"_235":-5},"z6MkpHiG87oJnyMajxKyJcEwNRTbrHWjKSnmVxuuxq7bP3nb","hm://z6MkpHiG87oJnyMajxKyJcEwNRTbrHWjKSnmVxuuxq7bP3nb",[],"meta",{"_711":712,"_812":813},"values",{"_713":714,"_716":717,"_718":719,"_720":721,"_723":724,"_725":726,"_727":728,"_730":731,"_732":733,"_734":735,"_736":737,"_738":739,"_740":741,"_742":743,"_744":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},"document.generationInfo.generation",[715],"bigint","dehydratedState.queries.0.state.data.document.generationInfo.generation",[715],"dehydratedState.queries.1.state.data.document.generationInfo.generation",[715],"dehydratedState.queries.1.queryKey.2",[722],"undefined","dehydratedState.queries.2.state.data.0.createTime.seconds",[715],"dehydratedState.queries.2.state.data.0.updateTime.seconds",[715],"dehydratedState.queries.2.state.data.0.sortTime",[729],"Date","dehydratedState.queries.2.state.data.0.activitySummary.latestCommentTime",[722],"dehydratedState.queries.2.state.data.0.activitySummary.latestChangeTime.seconds",[715],"dehydratedState.queries.2.state.data.0.generationInfo.generation",[715],"dehydratedState.queries.2.state.data.0.redirectInfo",[722],"dehydratedState.queries.2.state.data.1.createTime.seconds",[715],"dehydratedState.queries.2.state.data.1.updateTime.seconds",[715],"dehydratedState.queries.2.state.data.1.sortTime",[729],"dehydratedState.queries.2.state.data.1.activitySummary.latestCommentTime",[722],"dehydratedState.queries.2.state.data.1.activitySummary.latestChangeTime.seconds",[715],"dehydratedState.queries.2.state.data.1.generationInfo.generation",[715],"dehydratedState.queries.2.state.data.1.redirectInfo",[722],"dehydratedState.queries.4.state.data.0.createTime.seconds",[715],"dehydratedState.queries.4.state.data.0.updateTime.seconds",[715],"dehydratedState.queries.4.state.data.0.sortTime",[729],"dehydratedState.queries.4.state.data.0.activitySummary.latestCommentTime",[722],"dehydratedState.queries.4.state.data.0.activitySummary.latestChangeTime.seconds",[715],"dehydratedState.queries.4.state.data.0.generationInfo.generation",[715],"dehydratedState.queries.4.state.data.0.redirectInfo",[722],"dehydratedState.queries.4.state.data.1.createTime.seconds",[715],"dehydratedState.queries.4.state.data.1.updateTime.seconds",[715],"dehydratedState.queries.4.state.data.1.sortTime",[729],"dehydratedState.queries.4.state.data.1.activitySummary.latestCommentTime",[722],"dehydratedState.queries.4.state.data.1.activitySummary.latestChangeTime.seconds",[715],"dehydratedState.queries.4.state.data.1.generationInfo.generation",[715],"dehydratedState.queries.4.state.data.1.redirectInfo",[722],"dehydratedState.queries.4.state.data.2.createTime.seconds",[715],"dehydratedState.queries.4.state.data.2.updateTime.seconds",[715],"dehydratedState.queries.4.state.data.2.sortTime",[729],"dehydratedState.queries.4.state.data.2.activitySummary.latestCommentTime.seconds",[715],"dehydratedState.queries.4.state.data.2.activitySummary.latestChangeTime.seconds",[715],"dehydratedState.queries.4.state.data.2.generationInfo.generation",[715],"dehydratedState.queries.4.state.data.2.redirectInfo",[722],"dehydratedState.queries.4.state.data.3.createTime.seconds",[715],"dehydratedState.queries.4.state.data.3.updateTime.seconds",[715],"dehydratedState.queries.4.state.data.3.sortTime",[729],"dehydratedState.queries.4.state.data.3.activitySummary.latestCommentTime",[722],"dehydratedState.queries.4.state.data.3.activitySummary.latestChangeTime.seconds",[715],"dehydratedState.queries.4.state.data.3.generationInfo.generation",[715],"dehydratedState.queries.4.state.data.3.redirectInfo",[722],"dehydratedState.queries.5.state.data.metadata.icon",[722],"dehydratedState.queries.5.state.data.metadata.summary",[722],"referentialEqualities",{"_713":814,"_725":815,"_740":816,"_754":817,"_766":818,"_782":819,"_796":820},[716,718,738],[752,732],[746],[760],[768,774],[788],[802],"actionData","errors"]