[{"_1":2,"_2959":-5,"_2960":-5},"loaderData",{"_3":4,"_18":19},"root",{"_5":6,"_7":6,"_8":9,"_10":11,"_12":13,"_14":15,"_16":17},"isProd",true,"enableStats","domain","hyper.media","siteHost","ui-with-state-machines.hyper.media","sentryTrace","60f78f16e7a3459b92d52941ea5b4fac--0","sentryBaggage","sentry-environment=production,sentry-trace_id=60f78f16e7a3459b92d52941ea5b4fac,sentry-sampled=false","remixVersion",2,"routes/$",{"_20":21,"_2844":2845},"json",{"_22":23,"_24":-5,"_25":-5,"_26":-5,"_27":-5,"_28":29,"_30":-5,"_31":32,"_131":6,"_44":132,"_141":-5,"_142":143,"_2837":29,"_10":385,"_2838":385,"_2839":2840,"_2841":2842},"prefersLanguages",[],"viewTerm","panelParam","openComment","accountUid","isInspect",false,"inspectTab","document",{"_33":34,"_106":102,"_107":108,"_109":110,"_111":112,"_113":114,"_115":116,"_117":118,"_121":122,"_123":124,"_125":126,"_129":130},"content",[35,75,82,90,98],{"_36":37,"_40":66},"children",[38,58],{"_36":39,"_40":41},[],"block",{"_42":43,"_44":45,"_46":47,"_48":49,"_52":53,"_54":55,"_56":57},"type","Embed","id","I01RCHLp","revision","bafy2bzacedffkd4rdzzkikyjdm23zb2evqbqhnwklr5nxlcaod7pynmzj75um","attributes",{"_50":51},"view","Card","annotations",[],"text","","link","hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong?v=bafy2bzacecxbssfu6tsgckkty6krdldbq232rib3mvbbxhfhi745pqg4m7zsg&l",{"_36":59,"_40":60},[],{"_42":43,"_44":61,"_46":62,"_48":63,"_52":64,"_54":55,"_56":65},"TbDjWW-e","bafy2bzaced2hqcefph7tgklninzu5dcebzjmxq67dmjn7puloiksgwttj6gig",{"_50":51},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified?v=bafy2bzaceasflmgw6yafc3mygkufwzsrzcjoh5vbpczy532qvitkfsli3icns&l",{"_42":67,"_44":68,"_46":69,"_48":70,"_52":73,"_54":74,"_56":55},"Heading","SpGu0tBK","bafy2bzaceblppdcojdh2aj4zbh6aax7c6a6ynzvetc2elfxbi44o2mxwvc5go",{"_71":72},"childrenType","Group",[],"English",{"_36":76,"_40":77},[],{"_42":67,"_44":78,"_46":69,"_48":79,"_52":80,"_54":81,"_56":55},"nvxL-VgX",{},[],"Spanish",{"_36":83,"_40":84},[],{"_42":43,"_44":85,"_46":86,"_48":87,"_52":88,"_54":55,"_56":89},"XG17WIWR","bafy2bzacebsxm4y2fsik3g3ovk5kx4kri56g32o6r7dszvekaqugfrqbmhmx6",{"_50":51},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal?v=bafy2bzacedeehy4mmf4hniuuxqoww54eacrhpypjtzu5qotzkgrq2bm6lfmqm&l",{"_36":91,"_40":92},[],{"_42":43,"_44":93,"_46":94,"_48":95,"_52":96,"_54":55,"_56":97},"LsgymWG9uV","bafy2bzacedonvbcc5bzwy2j5r7wnwgaco4rcrpyo5g6zqdugpfbdejp5oodeg",{"_50":51},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/estados-eventos-y-transiciones-desmitificados",{"_36":99,"_40":100},[],{"_42":43,"_44":101,"_46":102,"_48":103,"_52":104,"_54":55,"_56":105},"dyEQC00biY","bafy2bzacecso2o7bwea36sevjo45wf2phruj5jcoomebikt7btumd3xpcrax2",{"_50":51},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/why-state-machines-are-a-game-changer-for-ui-development","version","account","z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp","authors",[108],"path","/content","createTime","2025-03-31T21:31:54.453Z","updateTime","2026-04-16T22:25:55.213Z","metadata",{"_119":120},"name","Content","detachedBlocks",{},"genesis","bafy2bzacecefqjbssb4ej2oc4wbspy3cvuuadbabfzxrzls56zqiissf6inw4","generationInfo",{"_123":124,"_127":128},"generation","1743456714453","visibility","PUBLIC","isLatest",{"_111":133,"_106":102,"_134":6,"_135":108,"_44":136,"_137":-5,"_138":-5,"_139":-5,"_140":-5},[33],"latest","uid","hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content","blockRef","blockRange","hostname","scheme","siteHomeIcon","dehydratedState",{"_144":145,"_146":147},"mutations",[],"queries",[148,217,396,432,542,558,1060,1448,1915,2335,2826],{"_149":150,"_212":213,"_215":216},"state",{"_151":152,"_196":197,"_198":199,"_200":-5,"_201":202,"_203":202,"_204":202,"_205":-5,"_206":-5,"_207":29,"_208":209,"_210":211},"data",{"_42":31,"_31":153,"_44":194},{"_33":154,"_106":102,"_107":108,"_109":190,"_111":112,"_113":114,"_115":116,"_117":191,"_121":192,"_123":124,"_125":193,"_129":130},[155,170,175,180,185],{"_36":156,"_40":167},[157,162],{"_36":158,"_40":159},[],{"_42":43,"_44":45,"_46":47,"_48":160,"_52":161,"_54":55,"_56":57},{"_50":51},[],{"_36":163,"_40":164},[],{"_42":43,"_44":61,"_46":62,"_48":165,"_52":166,"_54":55,"_56":65},{"_50":51},[],{"_42":67,"_44":68,"_46":69,"_48":168,"_52":169,"_54":74,"_56":55},{"_71":72},[],{"_36":171,"_40":172},[],{"_42":67,"_44":78,"_46":69,"_48":173,"_52":174,"_54":81,"_56":55},{},[],{"_36":176,"_40":177},[],{"_42":43,"_44":85,"_46":86,"_48":178,"_52":179,"_54":55,"_56":89},{"_50":51},[],{"_36":181,"_40":182},[],{"_42":43,"_44":93,"_46":94,"_48":183,"_52":184,"_54":55,"_56":97},{"_50":51},[],{"_36":186,"_40":187},[],{"_42":43,"_44":101,"_46":102,"_48":188,"_52":189,"_54":55,"_56":105},{"_50":51},[],[108],{"_119":120},{},{"_123":124,"_127":128},{"_44":136,"_135":108,"_111":195,"_106":102,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_134":6},[33],"dataUpdateCount",1,"dataUpdatedAt",1776797043638,"error","errorUpdateCount",0,"errorUpdatedAt","fetchFailureCount","fetchFailureReason","fetchMeta","isInvalidated","status","success","fetchStatus","idle","queryKey",[214,136,102,6],"ENTITY","queryHash","[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content\",\"bafy2bzacecso2o7bwea36sevjo45wf2phruj5jcoomebikt7btumd3xpcrax2\",true]",{"_149":218,"_212":394,"_215":395},{"_151":219,"_196":197,"_198":393,"_200":-5,"_201":202,"_203":202,"_204":202,"_205":-5,"_206":-5,"_207":29,"_208":209,"_210":211},{"_42":31,"_31":220,"_44":390},{"_33":221,"_106":378,"_107":108,"_109":379,"_111":55,"_113":380,"_115":381,"_117":382,"_121":386,"_123":387,"_125":388,"_129":130},[222,230,246,260,267,316,337,345],{"_36":223,"_40":224},[],{"_42":67,"_44":225,"_46":226,"_48":227,"_52":228,"_54":229,"_56":55},"YS5-lwb-","bafy2bzacedo2fapga62cenj2wqdo7fnnbwssy3ohyonmse3l74fds24nqx4r6",{},[],"Modeling UI with State Machines should be the norm.",{"_36":231,"_40":232},[],{"_42":233,"_44":234,"_46":226,"_48":235,"_52":236,"_54":245,"_56":55},"Paragraph","HIUNgDv3",{},[237],{"_42":238,"_239":240,"_241":242,"_48":244,"_56":55},"Bold","starts",[202],"ends",[243],79,{},"A practical guide to building better interfaces with XState, React & TypeScript",{"_36":247,"_40":248},[],{"_42":233,"_44":249,"_46":226,"_48":250,"_52":251,"_54":259,"_56":55},"RH2vgIqw",{},[252],{"_42":253,"_239":254,"_241":256,"_48":258,"_56":55},"Code",[255],132,[257],141,{},"Modern UI development is full of invisible complexity: async flows, conflicting states, edge cases, and fragile logic spread across useEffects and booleans.",{"_36":261,"_40":262},[],{"_42":233,"_44":263,"_46":226,"_48":264,"_52":265,"_54":266,"_56":55},"1i3NXohu",{},[],"This series is about doing it differently.",{"_36":268,"_40":304},[269,276,283,290,297],{"_36":270,"_40":271},[],{"_42":233,"_44":272,"_46":226,"_48":273,"_52":274,"_54":275,"_56":55},"cP0mEJaa",{},[],"Easier to understand",{"_36":277,"_40":278},[],{"_42":233,"_44":279,"_46":226,"_48":280,"_52":281,"_54":282,"_56":55},"mUUMMN68",{},[],"Safer to extend",{"_36":284,"_40":285},[],{"_42":233,"_44":286,"_46":226,"_48":287,"_52":288,"_54":289,"_56":55},"xkA4h4Fv",{},[],"Visually predictable",{"_36":291,"_40":292},[],{"_42":233,"_44":293,"_46":226,"_48":294,"_52":295,"_54":296,"_56":55},"1AW5Zc7P",{},[],"Naturally testable",{"_36":298,"_40":299},[],{"_42":233,"_44":300,"_46":226,"_48":301,"_52":302,"_54":303,"_56":55},"mISZl3dK",{},[],"Easy to Maintain and Refactor",{"_42":233,"_44":305,"_46":226,"_48":306,"_52":308,"_54":315,"_56":55},"mZU_BNzy",{"_71":307},"Unordered",[309],{"_42":238,"_239":310,"_241":312,"_48":314,"_56":55},[311],34,[313],64,{},"By modeling your UI behavior with state machines and statecharts, you can write code that’s:",{"_36":317,"_40":318},[],{"_42":233,"_44":319,"_46":226,"_48":320,"_52":321,"_54":336,"_56":55},"dT3b7j6V",{},[322],{"_42":238,"_239":323,"_241":329,"_48":335,"_56":55},[324,325,326,327,328],100,134,142,149,168,[330,331,332,333,334],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":338,"_40":339},[],{"_42":233,"_44":340,"_46":341,"_48":342,"_52":343,"_54":344,"_56":55},"-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":346,"_40":373},[347],{"_36":348,"_40":349},[],{"_42":350,"_44":351,"_46":226,"_48":352,"_52":372,"_54":55,"_56":55},"Query","XMasrKG1",{"_353":354,"_355":356,"_357":358,"_371":29},"columnCount",3,"style","List","query",{"_359":360,"_365":366},"includes",[361],{"_362":108,"_111":33,"_363":364},"space","mode","Children","sort",[367],{"_368":29,"_369":370},"reverse","term","UpdateTime","banner",[],{"_42":67,"_44":374,"_46":226,"_48":375,"_52":376,"_54":377,"_56":55},"JuhiSEfW",{"_71":72},[],"Posts","bafy2bzacecwxx5llylg2hzhhcsf4r3dzvtr22wwk6wnw4qklwcvdp6jxln2ni",[108],"1970-01-01T00:00:00Z","2025-04-24T21:23:24.377Z",{"_119":383,"_384":385},"UI with State Machines","siteUrl","https://ui-with-state-machines.hyper.media",{},"bafy2bzacecztctsdsles75mugrpzhgspjvfnf7atqvn5cmqqbccz4grooldak",{"_123":387,"_127":389},"0",{"_44":391,"_135":108,"_111":392,"_106":-5,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_134":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp",[],1776797043637,[214,391,-5,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",null,true]",{"_149":397,"_212":429,"_215":431},{"_151":398,"_196":197,"_198":428,"_200":-5,"_201":202,"_203":202,"_204":202,"_205":-5,"_206":-5,"_207":29,"_208":209,"_210":211},[399],{"_42":31,"_44":400,"_111":402,"_109":403,"_113":404,"_115":409,"_412":114,"_123":124,"_106":102,"_413":414,"_417":418,"_125":425,"_426":-5,"_117":427,"_129":130},{"_44":136,"_135":108,"_111":401,"_106":102,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_134":6},[33],[33],[108],{"_405":406,"_407":408},"seconds","1743456714","nanos",453000000,{"_405":410,"_407":411},"1776378355",213000000,"sortTime","breadcrumbs",[415],{"_119":383,"_111":55,"_416":29},"isMissing","activitySummary",{"_419":-5,"_420":55,"_421":202,"_422":423,"_424":6},"latestCommentTime","latestCommentId","commentCount","latestChangeTime",{"_405":410,"_407":411},"isUnread",{"_123":124,"_127":128},"redirectInfo",{"_119":120},1776797043632,[430,391,364],"DOC_LIST_DIRECTORY","[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",\"Children\"]",{"_149":433,"_212":540,"_215":541},{"_151":434,"_196":197,"_198":539,"_200":-5,"_201":202,"_203":202,"_204":202,"_205":-5,"_206":-5,"_207":29,"_208":209,"_210":211},[435,462,484,513],{"_42":31,"_44":436,"_111":440,"_109":441,"_113":442,"_115":444,"_412":447,"_123":448,"_106":439,"_413":449,"_417":452,"_125":454,"_426":-5,"_117":456,"_129":130},{"_44":105,"_135":108,"_111":437,"_106":439,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_134":6},[33,438],"why-state-machines-are-a-game-changer-for-ui-development","bafy2bzacea5seqrzbgdxuthunjxv27bjaghy3mx4pte6vyu36fithgpiz7e7c",[33,438],[108],{"_405":410,"_407":443},108000000,{"_405":445,"_407":446},"1776378609",336000000,"2026-04-16T22:25:55.108Z","bafyreiejui73fg3kf6z4vsflc4ktnhhi2wh5inpt5m725keqduve52pcbm",[450,451],{"_119":383,"_111":55,"_416":29},{"_119":120,"_111":112,"_416":29},{"_419":-5,"_420":55,"_421":202,"_422":453,"_424":6},{"_405":445,"_407":446},{"_123":448,"_127":455},"1776378355139",{"_119":457,"_458":459,"_460":461},"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",{"_42":31,"_44":463,"_111":467,"_109":468,"_113":469,"_115":472,"_412":473,"_123":466,"_106":466,"_413":474,"_417":477,"_125":479,"_426":-5,"_117":481,"_129":130},{"_44":97,"_135":108,"_111":464,"_106":466,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_134":6},[33,465],"estados-eventos-y-transiciones-desmitificados","bafyreic4j7bvslgeusgqsr436vww4wfnkjnsmxplkzpmnmxq5egw3vqogy",[33,465],[108],{"_405":470,"_407":471},"1774432586",729000000,{"_405":470,"_407":471},"2026-03-25T09:56:26.729Z",[475,476],{"_119":383,"_111":55,"_416":29},{"_119":120,"_111":112,"_416":29},{"_419":-5,"_420":55,"_421":202,"_422":478,"_424":29},{"_405":470,"_407":471},{"_123":466,"_127":480},"1774432586761",{"_119":482,"_460":483},"Estados, eventos y transiciones, desmitificados","ipfs://bafybeibu6gd4vij4zi7rpjhgp7au3bhjqf6yumgb35gof4wjusq3sfm2nu",{"_42":31,"_44":485,"_111":490,"_109":491,"_113":492,"_115":495,"_412":498,"_123":499,"_106":489,"_413":500,"_417":503,"_125":509,"_426":-5,"_117":511,"_129":130},{"_44":486,"_135":108,"_111":487,"_106":489,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_134":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified",[33,488],"states-events-and-transitions-demystified","bafy2bzacedazyemw5mvbfvvecvh7xlbfqvioyvxtwo6kmgvwapznbbxcycd56",[33,488],[108],{"_405":493,"_407":494},"1743980387",219000000,{"_405":496,"_407":497},"1774432581",353000000,"2025-04-06T22:59:47.219Z","bafy2bzacebkqzb64fcvmh5ovzsectjkvnjnz5zplcytarmy2gcuwsu3w7yba2",[501,502],{"_119":383,"_111":55,"_416":29},{"_119":120,"_111":112,"_416":29},{"_419":504,"_420":507,"_421":197,"_422":508,"_424":6},{"_405":505,"_407":506},"1772053248",730000000,"z6Mkfm8befyW32tingJymhfqjX6nhLwoBkQxdSmqg9DnqmiH/z6Fbka847o2Nk3",{"_405":496,"_407":497},{"_123":499,"_127":510},"1743980387218",{"_119":512,"_460":483},"States, Events, and Transitions, Demystified",{"_42":31,"_44":514,"_111":519,"_109":520,"_113":521,"_115":524,"_412":527,"_123":528,"_106":518,"_413":529,"_417":532,"_125":534,"_426":-5,"_117":536,"_129":130},{"_44":515,"_135":108,"_111":516,"_106":518,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_134":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong",[33,517],"you-are-writing-ui-state-wrong","bafy2bzacecxbssfu6tsgckkty6krdldbq232rib3mvbbxhfhi745pqg4m7zsg",[33,517],[108],{"_405":522,"_407":523},"1743457873",698000000,{"_405":525,"_407":526},"1743482671",918000000,"2025-03-31T21:51:13.698Z","bafy2bzaceblbz4bq35scgunjmywxitadj53jlujzzqmderu2enx65g4iibg4w",[530,531],{"_119":383,"_111":55,"_416":29},{"_119":120,"_111":112,"_416":29},{"_419":-5,"_420":55,"_421":202,"_422":533,"_424":6},{"_405":525,"_407":526},{"_123":528,"_127":535},"1743457873698",{"_119":537,"_460":538},"You are Writing UI State Wrong","ipfs://bafkreidydkqzjcztbuxuzxdc5i3ctfbtzzv6zl3nlvawtnxpo7opl6u2vu",1776797043631,[430,136,364],"[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content\",\"Children\"]",{"_149":543,"_212":555,"_215":557},{"_151":544,"_196":197,"_198":554,"_200":-5,"_201":202,"_203":202,"_204":202,"_205":-5,"_206":-5,"_207":29,"_208":209,"_210":211},{"_545":202,"_546":202,"_547":548,"_36":549,"_550":551,"_552":553},"citations","comments","changes",10,4,"authorUids",[],"blocks",{},1776797043651,[556,136],"DOCUMENT_INTERACTION_SUMMARY","[\"DOCUMENT_INTERACTION_SUMMARY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content\"]",{"_149":559,"_212":1058,"_215":1059},{"_151":560,"_196":197,"_198":1057,"_200":-5,"_201":202,"_203":202,"_204":202,"_205":-5,"_206":-5,"_207":29,"_208":209,"_210":211},{"_42":31,"_31":561,"_44":1054},{"_33":562,"_106":518,"_107":108,"_109":1048,"_111":1049,"_113":527,"_115":1050,"_117":1051,"_121":1052,"_123":528,"_125":1053,"_129":130},[563,577,589,688,734,802,845,903,963,989,1035,1041],{"_36":564,"_40":565},[],{"_42":233,"_44":566,"_46":518,"_48":567,"_52":568,"_54":576,"_56":55},"bwFwn1C4",{},[569],{"_42":570,"_239":571,"_241":573,"_48":575,"_56":89},"Link",[572],29,[574],33,{},"Tienes la version en español Aqui!",{"_36":578,"_40":579},[],{"_42":233,"_44":580,"_46":528,"_48":581,"_52":582,"_54":588,"_56":55},"fdPPwqyK",{},[583],{"_42":238,"_239":584,"_241":585,"_48":587,"_56":55},[202],[586],75,{},"Why state machines make UI logic simpler, safer, and way more maintainable.",{"_36":590,"_40":683},[591,598,611,653,671],{"_36":592,"_40":593},[],{"_42":233,"_44":594,"_46":528,"_48":595,"_52":596,"_54":597,"_56":55},"7WuP5M98",{},[],"Let’s be honest: your React component’s state logic probably started simple.",{"_36":599,"_40":600},[],{"_42":233,"_44":601,"_46":528,"_48":602,"_52":603,"_54":610,"_56":55},"gQee2tae",{},[604],{"_42":253,"_239":605,"_241":607,"_48":609,"_56":55},[606],30,[608],39,{},"A couple of booleans. Maybe a useEffect. Just enough to get things working.",{"_36":612,"_40":648},[613,620,627,634],{"_36":614,"_40":615},[],{"_42":233,"_44":616,"_46":528,"_48":617,"_52":618,"_54":619,"_56":55},"ohqeaaWA",{},[],"You added a loading state.",{"_36":621,"_40":622},[],{"_42":233,"_44":623,"_46":528,"_48":624,"_52":625,"_54":626,"_56":55},"TV7FSi-P",{},[],"Then an error state.",{"_36":628,"_40":629},[],{"_42":233,"_44":630,"_46":528,"_48":631,"_52":632,"_54":633,"_56":55},"GpWZB7rj",{},[],"Then a retry flow.",{"_36":635,"_40":636},[],{"_42":233,"_44":637,"_46":528,"_48":638,"_52":639,"_54":647,"_56":55},"N3YjtS-P",{},[640],{"_42":641,"_239":642,"_241":644,"_48":646,"_56":55},"Italic",[643],32,[645],35,{},"Then an edge case where loading and error coexist.",{"_42":233,"_44":649,"_46":528,"_48":650,"_52":651,"_54":652,"_56":55},"roF3Zphe",{"_71":307},[],"But then things changed:",{"_36":654,"_40":655},[],{"_42":233,"_44":656,"_46":528,"_48":657,"_52":658,"_54":670,"_56":55},"9e8b4C7p",{},[659],{"_42":253,"_239":660,"_241":666,"_48":669,"_56":55},[661,662,663,664,665],20,31,41,55,80,[572,608,667,313,668],53,87,{},"Now you’re juggling isLoading, hasError, isSubmitting, showModal, and a nest of if/else blocks — and you’re still not sure you’ve covered all the cases.",{"_36":672,"_40":673},[],{"_42":233,"_44":674,"_46":528,"_48":675,"_52":676,"_54":682,"_56":55},"0Z3n0acd",{},[677],{"_42":238,"_239":678,"_241":679,"_48":681,"_56":55},[202],[680],15,{},"Sound familiar?",{"_42":67,"_44":684,"_46":528,"_48":685,"_52":686,"_54":687,"_56":55},"D1-y4X6q",{"_71":72},[],"🤯 The UI Logic Spiral",{"_36":689,"_40":729},[690,697,709],{"_36":691,"_40":692},[],{"_42":233,"_44":693,"_46":528,"_48":694,"_52":695,"_54":696,"_56":55},"9gC20yWH",{},[],"We often treat UI state as a flat structure of booleans or enums.",{"_36":698,"_40":699},[],{"_42":233,"_44":700,"_46":528,"_48":701,"_52":702,"_54":708,"_56":55},"Fc3Auckl",{},[703],{"_42":238,"_239":704,"_241":705,"_48":707,"_56":55},[572],[706],36,{},"But in reality, your UI is a process. A sequence. A user clicks a button, something happens, and the UI responds.",{"_36":710,"_40":711},[],{"_42":233,"_44":712,"_46":528,"_48":713,"_52":714,"_54":728,"_56":55},"zXKxxqPK",{},[715,722],{"_42":641,"_239":716,"_241":718,"_48":721,"_56":55},[717,606],16,[719,720],21,45,{},{"_42":238,"_239":723,"_241":725,"_48":727,"_56":55},[724],72,[726],86,{},"That’s not just state. That’s state over time — and that’s exactly what state machines are made for.",{"_42":67,"_44":730,"_46":528,"_48":731,"_52":732,"_54":733,"_56":55},"zD16k_dd",{"_71":72},[],"🧠 UIs Aren’t Just State — They’re Behavior",{"_36":735,"_40":797},[736,749,790],{"_36":737,"_40":738},[],{"_42":233,"_44":739,"_46":528,"_48":740,"_52":741,"_54":748,"_56":55},"nwnXcy5u",{},[742],{"_42":238,"_239":743,"_241":745,"_48":747,"_56":55},[744],82,[746],95,{},"What if, instead of wiring together a dozen flags, you modeled your UI logic as a state machine?",{"_36":750,"_40":785},[751,758,771,778],{"_36":752,"_40":753},[],{"_42":233,"_44":754,"_46":528,"_48":755,"_52":756,"_54":757,"_56":55},"YHZ60aGm",{},[],"Define all possible states up front",{"_36":759,"_40":760},[],{"_42":233,"_44":761,"_46":528,"_48":762,"_52":763,"_54":770,"_56":55},"BG844_u6",{},[764],{"_42":641,"_239":765,"_241":767,"_48":769,"_56":55},[766],9,[768],13,{},"Describe only valid transitions",{"_36":772,"_40":773},[],{"_42":233,"_44":774,"_46":528,"_48":775,"_52":776,"_54":777,"_56":55},"8AfLrOx4",{},[],"Eliminate contradictory or impossible states",{"_36":779,"_40":780},[],{"_42":233,"_44":781,"_46":528,"_48":782,"_52":783,"_54":784,"_56":55},"DCP-xbPi",{},[],"Get a visual map of your logic — for free",{"_42":233,"_44":786,"_46":528,"_48":787,"_52":788,"_54":789,"_56":55},"GEVqKMh_",{"_71":307},[],"With a state machine, you:",{"_36":791,"_40":792},[],{"_42":233,"_44":793,"_46":528,"_48":794,"_52":795,"_54":796,"_56":55},"Bj1BdyX5",{},[],"Let’s look at a simple example.",{"_42":67,"_44":798,"_46":528,"_48":799,"_52":800,"_54":801,"_56":55},"cWnwRtNl",{"_71":72},[],"✅ The Solution: Model Behavior, Not Just State",{"_36":803,"_40":840},[804,813,820,833],{"_36":805,"_40":806},[],{"_42":253,"_44":807,"_46":528,"_48":808,"_52":811,"_54":812,"_56":55},"tthO-Xq7",{"_809":810},"language","typescript",[],"import { createMachine } from 'xstate';\n\nconst toggleMachine = createMachine({\n id: 'toggle',\n initial: 'inactive',\n states: {\n inactive: {\n on: { TOGGLE: 'active' },\n },\n active: {\n on: { TOGGLE: 'inactive' },\n },\n },\n});",{"_36":814,"_40":815},[],{"_42":233,"_44":816,"_46":528,"_48":817,"_52":818,"_54":819,"_56":55},"5mDaHPOh",{},[],"That’s it.",{"_36":821,"_40":822},[],{"_42":233,"_44":823,"_46":528,"_48":824,"_52":825,"_54":832,"_56":55},"Tf0C6FVr",{},[826],{"_42":253,"_239":827,"_241":829,"_48":831,"_56":55},[828],69,[830],77,{},"One machine. Two states. One event. No booleans. No conditionals. No useState.",{"_36":834,"_40":835},[],{"_42":233,"_44":836,"_46":528,"_48":837,"_52":838,"_54":839,"_56":55},"vET9knzB",{},[],"Simple, expressive, and type-safe.",{"_42":67,"_44":841,"_46":528,"_48":842,"_52":843,"_54":844,"_56":55},"oSfzQouN",{"_71":72},[],"🧪 Example: Toggle with XState",{"_36":846,"_40":898},[847,859,873],{"_36":848,"_40":849},[],{"_42":233,"_44":850,"_46":528,"_48":851,"_52":852,"_54":858,"_56":55},"PFEubsuK",{},[853],{"_42":641,"_239":854,"_241":856,"_48":857,"_56":55},[855],25,[574],{},"Here’s what that machine actually looks like:",{"_36":860,"_40":861},[],{"_42":862,"_44":863,"_46":528,"_48":864,"_52":865,"_54":872,"_56":538},"Image","69qPwKx1",{},[866],{"_42":570,"_239":867,"_241":868,"_48":870,"_56":871},[606],[869],40,{},"https://stately.ai","State machine visualizer from stately.ai",{"_36":874,"_40":891},[875],{"_36":876,"_40":877},[],{"_42":233,"_44":878,"_46":528,"_48":879,"_52":880,"_54":890,"_56":55},"raeO-tIt",{},[881,886],{"_42":570,"_239":882,"_241":884,"_48":885,"_56":871},[883],11,[719],{},{"_42":238,"_239":887,"_241":888,"_48":889,"_56":55},[606],[574],{},"Tools like Stately.ai let you see your machines as flow diagrams — so you and your team instantly understand what’s going on.",{"_42":892,"_44":893,"_46":528,"_48":894,"_52":896,"_54":55,"_56":897},"Button","RfomATRA",{"_119":895},"👉 Open in Stately Visualizer",[],"https://stately.ai/registry/editor/a3732429-1a6a-4304-81dc-7344199eb5c2?machineId=7ac2ca3d-a479-4e37-82c8-5feddf52cc12&mode=Simulate",{"_42":67,"_44":899,"_46":528,"_48":900,"_52":901,"_54":902,"_56":55},"QdybwklD",{"_71":72},[],"🔍 Visualizing It",{"_36":904,"_40":958},[905,946],{"_36":906,"_40":941},[907,914,921,928],{"_36":908,"_40":909},[],{"_42":233,"_44":910,"_46":528,"_48":911,"_52":912,"_54":913,"_56":55},"_5pp5GCa",{},[],"Simplify multi-step forms and wizards",{"_36":915,"_40":916},[],{"_42":233,"_44":917,"_46":528,"_48":918,"_52":919,"_54":920,"_56":55},"ycWsxYoc",{},[],"Model modals, dropdowns, or onboarding flows",{"_36":922,"_40":923},[],{"_42":233,"_44":924,"_46":528,"_48":925,"_52":926,"_54":927,"_56":55},"-E8hexmN",{},[],"Eliminate inconsistent UI states",{"_36":929,"_40":930},[],{"_42":233,"_44":931,"_46":528,"_48":932,"_52":933,"_54":940,"_56":55},"5Hduh--0",{},[934],{"_42":253,"_239":935,"_241":937,"_48":939,"_56":55},[936],14,[938],23,{},"Replace messy useEffect logic with declarative transitions",{"_42":233,"_44":942,"_46":528,"_48":943,"_52":944,"_54":945,"_56":55},"Jo8lef--",{"_71":307},[],"This isn’t just for toggles. You can use state machines to:",{"_36":947,"_40":948},[],{"_42":233,"_44":949,"_46":528,"_48":950,"_52":951,"_54":957,"_56":55},"eR1fhV5r",{},[952],{"_42":238,"_239":953,"_241":955,"_48":956,"_56":55},[954],18,[720],{},"And when you pair XState + React + TypeScript, you unlock type-safe, testable UI logic that scales.",{"_42":67,"_44":959,"_46":528,"_48":960,"_52":961,"_54":962,"_56":55},"vph2YBdF",{"_71":72},[],"🛠️ Why This Matters",{"_36":964,"_40":984},[965,977],{"_36":966,"_40":967},[],{"_42":233,"_44":968,"_46":528,"_48":969,"_52":970,"_54":976,"_56":55},"xZimMM5q",{},[971],{"_42":238,"_239":972,"_241":973,"_48":975,"_56":55},[869],[974],61,{},"In the next issue, we’ll break down the three building blocks of any state machine — and how to spot them in your own components.",{"_36":978,"_40":979},[],{"_42":233,"_44":980,"_46":528,"_48":981,"_52":982,"_54":983,"_56":55},"bVgpTHna",{},[],"You’ll learn how to go from messy state to modeled behavior in minutes.",{"_42":67,"_44":985,"_46":528,"_48":986,"_52":987,"_54":988,"_56":55},"bxuzThYA",{"_71":72},[],"⏭️ Coming Up Next: States, Events, and Transitions",{"_36":990,"_40":1030},[991,998,1005,1018],{"_36":992,"_40":993},[],{"_42":233,"_44":994,"_46":528,"_48":995,"_52":996,"_54":997,"_56":55},"JH-6Rryd",{},[],"Pick a small UI interaction in your app — a toggle, modal, or dropdown — and try modeling it as a state machine.",{"_36":999,"_40":1000},[],{"_42":233,"_44":1001,"_46":528,"_48":1002,"_52":1003,"_54":1004,"_56":55},"scvfIDjN",{},[],"Just one.",{"_36":1006,"_40":1007},[],{"_42":233,"_44":1008,"_46":528,"_48":1009,"_52":1010,"_54":1017,"_56":55},"p48_gOts",{},[1011],{"_42":641,"_239":1012,"_241":1014,"_48":1016,"_56":55},[1013],19,[1015],51,{},"Then ask yourself: was this easier to reason about?",{"_36":1019,"_40":1020},[],{"_42":233,"_44":1021,"_46":528,"_48":1022,"_52":1023,"_54":1029,"_56":55},"3JDOfXV5",{},[1024],{"_42":238,"_239":1025,"_241":1026,"_48":1028,"_56":55},[202],[1027],37,{},"Hit reply and let me know how it went — or tag me on Twitter/X. I’ll feature a few community examples in future issues.",{"_42":67,"_44":1031,"_46":528,"_48":1032,"_52":1033,"_54":1034,"_56":55},"gWgHnWOx",{"_71":72},[],"💡 Try This",{"_36":1036,"_40":1037},[],{"_42":233,"_44":1038,"_46":528,"_48":1039,"_52":1040,"_54":55,"_56":55},"AffwMmaJ",{},[],{"_36":1042,"_40":1043},[],{"_42":233,"_44":1044,"_46":528,"_48":1045,"_52":1046,"_54":1047,"_56":55},"V5cHfg-a",{},[],"Thanks for reading,\nHoracio",[108],"/content/you-are-writing-ui-state-wrong","2025-04-01T04:44:31.918Z",{"_119":537,"_460":538},{},{"_123":528,"_127":535},{"_44":515,"_135":108,"_111":1055,"_106":518,"_137":-5,"_138":-5,"_139":-5,"_140":1056,"_134":6},[33,517],"hm",1776797043661,[214,515,518,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong\",\"bafy2bzacecxbssfu6tsgckkty6krdldbq232rib3mvbbxhfhi745pqg4m7zsg\",true]",{"_149":1061,"_212":1446,"_215":1447},{"_151":1062,"_196":197,"_198":1445,"_200":-5,"_201":202,"_203":202,"_204":202,"_205":-5,"_206":-5,"_207":29,"_208":209,"_210":211},{"_42":31,"_31":1063,"_44":1443},{"_33":1064,"_106":489,"_107":108,"_109":1437,"_111":1438,"_113":498,"_115":1439,"_117":1440,"_121":1441,"_123":499,"_125":1442,"_129":130},[1065,1087,1129,1157,1206,1247,1295,1326,1354,1375],{"_36":1066,"_40":1067},[],{"_42":233,"_44":1068,"_46":499,"_48":1069,"_52":1070,"_54":1086,"_56":55},"Yl2K_LSQ",{},[1071,1080],{"_42":238,"_239":1072,"_241":1076,"_48":1079,"_56":55},[1073,1074,1075],162,170,182,[328,1077,1078],176,193,{},{"_42":641,"_239":1081,"_241":1083,"_48":1085,"_56":55},[1082],417,[1084],428,{},"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":1088,"_40":1124},[1089,1096,1103,1110,1117],{"_36":1090,"_40":1091},[],{"_42":233,"_44":1092,"_46":499,"_48":1093,"_52":1094,"_54":1095,"_56":55},"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":1097,"_40":1098},[],{"_42":233,"_44":1099,"_46":499,"_48":1100,"_52":1101,"_54":1102,"_56":55},"Iu1orm1x",{},[],"States – the different modes your UI can be in",{"_36":1104,"_40":1105},[],{"_42":233,"_44":1106,"_46":499,"_48":1107,"_52":1108,"_54":1109,"_56":55},"xQUYl6x3",{},[],"Events – the things that happen to trigger change",{"_36":1111,"_40":1112},[],{"_42":233,"_44":1113,"_46":499,"_48":1114,"_52":1115,"_54":1116,"_56":55},"UiCxB73G",{},[],"Transitions – how you move from one state to another",{"_36":1118,"_40":1119},[],{"_42":233,"_44":1120,"_46":499,"_48":1121,"_52":1122,"_54":1123,"_56":55},"vl4dgcB0",{},[],"Once you understand these, even the most complex flows start to feel… obvious.",{"_42":67,"_44":1125,"_46":499,"_48":1126,"_52":1127,"_54":1128,"_56":55},"ovQKELVh",{"_71":72},[],"✨ Intro: The Foundation of Every State Machine",{"_36":1130,"_40":1152},[1131,1138,1145],{"_36":1132,"_40":1133},[],{"_42":233,"_44":1134,"_46":499,"_48":1135,"_52":1136,"_54":1137,"_56":55},"U1dHAH7O",{},[],"A state is just a label for a condition your UI is in.",{"_36":1139,"_40":1140},[],{"_42":233,"_44":1141,"_46":499,"_48":1142,"_52":1143,"_54":1144,"_56":55},"0SKJ-5Bd",{},[],"🔁 Example: A toggle switch has two states: active and inactive. A form might have: idle, validating, submitting, success, error.",{"_36":1146,"_40":1147},[],{"_42":233,"_44":1148,"_46":499,"_48":1149,"_52":1150,"_54":1151,"_56":55},"rHbGcoNi",{},[],"You define them up front — and your component can only be in one of them at a time.",{"_42":67,"_44":1153,"_46":499,"_48":1154,"_52":1155,"_54":1156,"_56":55},"QDNDq9wF",{"_71":72},[],"🧠 What Is a State?",{"_36":1158,"_40":1201},[1159,1166,1173,1180,1187,1194],{"_36":1160,"_40":1161},[],{"_42":233,"_44":1162,"_46":499,"_48":1163,"_52":1164,"_54":1165,"_56":55},"idyPSZrg",{},[],"An event is something that happens — usually triggered by the user or the system.",{"_36":1167,"_40":1168},[],{"_42":233,"_44":1169,"_46":499,"_48":1170,"_52":1171,"_54":1172,"_56":55},"BUv71qfw",{},[],"👇 Examples:",{"_36":1174,"_40":1175},[],{"_42":233,"_44":1176,"_46":499,"_48":1177,"_52":1178,"_54":1179,"_56":55},"Cc6_Mkj0",{},[],"A click → TOGGLE",{"_36":1181,"_40":1182},[],{"_42":233,"_44":1183,"_46":499,"_48":1184,"_52":1185,"_54":1186,"_56":55},"fSrsl3Fs",{},[],"A form submission → SUBMIT",{"_36":1188,"_40":1189},[],{"_42":233,"_44":1190,"_46":499,"_48":1191,"_52":1192,"_54":1193,"_56":55},"Wno7ieql",{},[],"An API call fails → FAILURE",{"_36":1195,"_40":1196},[],{"_42":233,"_44":1197,"_46":499,"_48":1198,"_52":1199,"_54":1200,"_56":55},"rb8tuU7y",{},[],"Events don’t do anything on their own — they ask the machine to change.",{"_42":67,"_44":1202,"_46":499,"_48":1203,"_52":1204,"_54":1205,"_56":55},"DAaz8SPf",{"_71":72},[],"⚡ What Is an Event?",{"_36":1207,"_40":1242},[1208,1215,1222],{"_36":1209,"_40":1210},[],{"_42":233,"_44":1211,"_46":499,"_48":1212,"_52":1213,"_54":1214,"_56":55},"IR301vuL",{},[],"A transition is how the machine changes from one state to another in response to an event.",{"_36":1216,"_40":1217},[],{"_42":233,"_44":1218,"_46":499,"_48":1219,"_52":1220,"_54":1221,"_56":55},"uatRUWoJ",{},[],"Think of it as: \"When I'm in [this state] and [this event] happens, move to [that state].\"",{"_36":1223,"_40":1237},[1224,1231],{"_36":1225,"_40":1226},[],{"_42":253,"_44":1227,"_46":499,"_48":1228,"_52":1229,"_54":1230,"_56":55},"hTH4qlLt",{"_809":810},[],"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":1232,"_40":1233},[],{"_42":233,"_44":1234,"_46":499,"_48":1235,"_52":1236,"_54":55,"_56":55},"gGVdQRWe",{},[],{"_42":233,"_44":1238,"_46":499,"_48":1239,"_52":1240,"_54":1241,"_56":55},"loO-Xd4j",{"_71":72},[],"In XState, it looks like this:",{"_42":67,"_44":1243,"_46":499,"_48":1244,"_52":1245,"_54":1246,"_56":55},"rCYytQHq",{"_71":72},[],"🔄 What Is a Transition?",{"_36":1248,"_40":1290},[1249,1256,1263,1276,1283],{"_36":1250,"_40":1251},[],{"_42":233,"_44":1252,"_46":499,"_48":1253,"_52":1254,"_54":1255,"_56":55},"BozreRL2",{},[],"Because you define states and transitions explicitly, you avoid:",{"_36":1257,"_40":1258},[],{"_42":233,"_44":1259,"_46":499,"_48":1260,"_52":1261,"_54":1262,"_56":55},"qUQLFu2K",{},[],"Ambiguous conditions",{"_36":1264,"_40":1265},[],{"_42":233,"_44":1266,"_46":499,"_48":1267,"_52":1268,"_54":1275,"_56":55},"CzebmtN5",{},[1269],{"_42":253,"_239":1270,"_241":1272,"_48":1274,"_56":55},[1271,869],27,[706,1273],47,{},"Invalid combinations (e.g. isLoading && isError)",{"_36":1277,"_40":1278},[],{"_42":233,"_44":1279,"_46":499,"_48":1280,"_52":1281,"_54":1282,"_56":55},"Tx1DpbI7",{},[],"“Where am I in the flow?” type bugs",{"_36":1284,"_40":1285},[],{"_42":233,"_44":1286,"_46":499,"_48":1287,"_52":1288,"_54":1289,"_56":55},"9r7snjTE",{},[],"The machine won’t allow transitions that aren’t defined. That’s safety by design.",{"_42":67,"_44":1291,"_46":499,"_48":1292,"_52":1293,"_54":1294,"_56":55},"wVj4RLs9",{"_71":72},[],"🧪 Why This Structure Is Powerful",{"_36":1296,"_40":1321},[1297,1304,1314],{"_36":1298,"_40":1299},[],{"_42":233,"_44":1300,"_46":499,"_48":1301,"_52":1302,"_54":1303,"_56":55},"RFFrDPZ_",{},[],"Here’s that form state machine as a diagram:",{"_36":1305,"_40":1306},[],{"_42":892,"_44":1307,"_46":489,"_48":1308,"_52":1312,"_54":55,"_56":1313},"zGkNsRNw",{"_71":72,"_119":1309,"_1310":1311},"👉 Open in Stately.ai","alignment","center",[],"https://stately.ai/registry/editor/a3732429-1a6a-4304-81dc-7344199eb5c2?mode=Simulate&machineId=36c1ed61-65d0-40a0-a8a9-aac1bcc79275",{"_36":1315,"_40":1316},[],{"_42":233,"_44":1317,"_46":499,"_48":1318,"_52":1319,"_54":1320,"_56":55},"mhjwuw_5",{},[],"Diagrams like this aren’t just pretty — they’re living documentation of how your app behaves.",{"_42":67,"_44":1322,"_46":499,"_48":1323,"_52":1324,"_54":1325,"_56":55},"JqHCmjLs",{"_71":72},[],"Visualize It",{"_36":1327,"_40":1349},[1328,1335,1342],{"_36":1329,"_40":1330},[],{"_42":233,"_44":1331,"_46":499,"_48":1332,"_52":1333,"_54":1334,"_56":55},"A5V14JbG",{},[],"Instead of exposing a bunch of props or handlers, you can think of your UI machine as exposing one clean interface:",{"_36":1336,"_40":1337},[],{"_42":253,"_44":1338,"_46":499,"_48":1339,"_52":1340,"_54":1341,"_56":55},"-gD34P1J",{"_809":810},[],"send({ type: 'SUBMIT' });",{"_36":1343,"_40":1344},[],{"_42":233,"_44":1345,"_46":499,"_48":1346,"_52":1347,"_54":1348,"_56":55},"G5zl8WVl",{},[],"That’s it. Consumers of your component don’t care about your internal logic — they just send events and get predictable behavior.",{"_42":67,"_44":1350,"_46":499,"_48":1351,"_52":1352,"_54":1353,"_56":55},"nTqWAYZK",{"_71":72},[],"🧠 Pro Tip: Events Are the API of Your Component",{"_36":1355,"_40":1370},[1356,1363],{"_36":1357,"_40":1358},[],{"_42":233,"_44":1359,"_46":499,"_48":1360,"_52":1361,"_54":1362,"_56":55},"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":1364,"_40":1365},[],{"_42":233,"_44":1366,"_46":499,"_48":1367,"_52":1368,"_54":1369,"_56":55},"daDU7UWi",{},[],"We’ll build a real machine and hook it into a real component.",{"_42":67,"_44":1371,"_46":499,"_48":1372,"_52":1373,"_54":1374,"_56":55},"IXvDGYZn",{"_71":72},[],"Coming Up Next: Modeling UI with XState",{"_36":1376,"_40":1433},[1377,1405,1418,1425],{"_36":1378,"_40":1400},[1379,1386,1393],{"_36":1380,"_40":1381},[],{"_42":233,"_44":1382,"_46":499,"_48":1383,"_52":1384,"_54":1385,"_56":55},"FOjdob1O",{},[],"What are the possible states?",{"_36":1387,"_40":1388},[],{"_42":233,"_44":1389,"_46":499,"_48":1390,"_52":1391,"_54":1392,"_56":55},"xugADqhu",{},[],"What events can happen?",{"_36":1394,"_40":1395},[],{"_42":233,"_44":1396,"_46":499,"_48":1397,"_52":1398,"_54":1399,"_56":55},"D0O2B5Dg",{},[],"How do you transition from one to another?",{"_42":233,"_44":1401,"_46":499,"_48":1402,"_52":1403,"_54":1404,"_56":55},"MOh7AMCQ",{"_71":307},[],"Pick a small UI in your app (a toggle, button, form, etc) and answer:",{"_36":1406,"_40":1407},[],{"_42":233,"_44":1408,"_46":499,"_48":1409,"_52":1410,"_54":1417,"_56":55},"IlbNtUNc",{},[1411],{"_42":570,"_239":1412,"_241":1413,"_48":1415,"_56":1416},[574],[1414],43,{},"https://stately.ai/","Try modeling it on paper — or in Stately.ai",{"_36":1419,"_40":1420},[],{"_42":233,"_44":1421,"_46":499,"_48":1422,"_52":1423,"_54":1424,"_56":55},"EzmaXgis",{},[],"Reply to this with your flow — I’d love to feature a few in future issues!",{"_36":1426,"_40":1427},[],{"_42":233,"_44":1428,"_46":1429,"_48":1430,"_52":1431,"_54":1432,"_56":55},"rqDQ3P-0","bafy2bzaceasflmgw6yafc3mygkufwzsrzcjoh5vbpczy532qvitkfsli3icns",{},[],"Until next time,\nHoracio",{"_42":67,"_44":1434,"_46":499,"_48":1435,"_52":1436,"_54":1034,"_56":55},"FKkiCW0n",{"_71":72},[],[108],"/content/states-events-and-transitions-demystified","2026-03-25T09:56:21.353Z",{"_119":512,"_460":483},{},{"_123":499,"_127":510},{"_44":486,"_135":108,"_111":1444,"_106":1429,"_137":-5,"_138":-5,"_139":-5,"_140":1056,"_134":6},[33,488],1776797043657,[214,486,1429,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified\",\"bafy2bzaceasflmgw6yafc3mygkufwzsrzcjoh5vbpczy532qvitkfsli3icns\",true]",{"_149":1449,"_212":1913,"_215":1914},{"_151":1450,"_196":197,"_198":1912,"_200":-5,"_201":202,"_203":202,"_204":202,"_205":-5,"_206":-5,"_207":29,"_208":209,"_210":211},{"_42":31,"_31":1451,"_44":1908},{"_33":1452,"_106":1898,"_107":108,"_109":1899,"_111":1900,"_113":1901,"_115":1902,"_117":1903,"_121":1905,"_123":1457,"_125":1906,"_129":130},[1453,1466,1558,1601,1667,1710,1742,1765,1822,1847,1891],{"_36":1454,"_40":1455},[],{"_42":233,"_44":1456,"_46":1457,"_48":1458,"_52":1459,"_54":1465,"_56":55},"fjRaBfkl","bafy2bzacedeehy4mmf4hniuuxqoww54eacrhpypjtzu5qotzkgrq2bm6lfmqm",{},[1460],{"_42":238,"_239":1461,"_241":1462,"_48":1464,"_56":55},[202],[1463],94,{},"Por qué las máquinas de estados hacen que la lógica de UI sea más simple, segura y mantenible.",{"_36":1467,"_40":1553},[1468,1475,1486,1526,1542],{"_36":1469,"_40":1470},[],{"_42":233,"_44":1471,"_46":1457,"_48":1472,"_52":1473,"_54":1474,"_56":55},"OHyPpOph",{},[],"Seamos sinceros: probablemente la lógica de estado en tu componente de React empezó siendo simple.",{"_36":1476,"_40":1477},[],{"_42":233,"_44":1478,"_46":1457,"_48":1479,"_52":1480,"_54":1485,"_56":55},"b8z1MO6F",{},[1481],{"_42":253,"_239":1482,"_241":1483,"_48":1484,"_56":55},[643],[663],{},"Un par de booleanos. Tal vez un useEffect. Lo justo para que funcione.",{"_36":1487,"_40":1521},[1488,1495,1502,1509],{"_36":1489,"_40":1490},[],{"_42":233,"_44":1491,"_46":1457,"_48":1492,"_52":1493,"_54":1494,"_56":55},"M1s44QrV",{},[],"Agregaste un estado de carga.",{"_36":1496,"_40":1497},[],{"_42":233,"_44":1498,"_46":1457,"_48":1499,"_52":1500,"_54":1501,"_56":55},"D02qRdvK",{},[],"Después, un estado de error.",{"_36":1503,"_40":1504},[],{"_42":233,"_44":1505,"_46":1457,"_48":1506,"_52":1507,"_54":1508,"_56":55},"0ERoPIhU",{},[],"Luego, un flujo de reintento.",{"_36":1510,"_40":1511},[],{"_42":233,"_44":1512,"_46":1457,"_48":1513,"_52":1514,"_54":1520,"_56":55},"gkpNcmsh",{},[1515],{"_42":641,"_239":1516,"_241":1517,"_48":1519,"_56":55},[1414],[1518],44,{},"Y finalmente, un caso raro donde hay carga y error al mismo tiempo.",{"_42":233,"_44":1522,"_46":1457,"_48":1523,"_52":1524,"_54":1525,"_56":55},"rUSJ2AzL",{"_71":307},[],"Pero luego las cosas se complicaron:",{"_36":1527,"_40":1528},[],{"_42":233,"_44":1529,"_46":1457,"_48":1530,"_52":1531,"_54":1541,"_56":55},"p5QNq2SM",{},[1532],{"_42":253,"_239":1533,"_241":1537,"_48":1540,"_56":55},[1534,574,1414,1535,1536],22,57,84,[662,663,664,1538,1539],66,91,{},"Ahora estás manejando isLoading, hasError, isSubmitting, showModal, y una maraña de if/else, y aún así no estás seguro si cubriste todos los casos.",{"_36":1543,"_40":1544},[],{"_42":233,"_44":1545,"_46":1457,"_48":1546,"_52":1547,"_54":1552,"_56":55},"eyCB9JVU",{},[1548],{"_42":238,"_239":1549,"_241":1550,"_48":1551,"_56":55},[202],[1013],{},"¿Te suena familiar?",{"_42":67,"_44":1554,"_46":1457,"_48":1555,"_52":1556,"_54":1557,"_56":55},"tFApqOux",{"_71":72},[],"🤯 El espiral de la lógica en la UI",{"_36":1559,"_40":1596},[1560,1567,1578],{"_36":1561,"_40":1562},[],{"_42":233,"_44":1563,"_46":1457,"_48":1564,"_52":1565,"_54":1566,"_56":55},"AEKT91ke",{},[],"A menudo tratamos el estado de UI como una estructura plana de booleanos o enums.",{"_36":1568,"_40":1569},[],{"_42":233,"_44":1570,"_46":1457,"_48":1571,"_52":1572,"_54":1577,"_56":55},"Lak6uEbr",{},[1573],{"_42":238,"_239":1574,"_241":1575,"_48":1576,"_56":55},[606],[1027],{},"Pero en realidad, tu UI es un proceso. Una secuencia. Un usuario hace clic, algo sucede, y la UI responde.",{"_36":1579,"_40":1580},[],{"_42":233,"_44":1581,"_46":1457,"_48":1582,"_52":1583,"_54":1595,"_56":55},"vJyFJwNW",{},[1584,1590],{"_42":641,"_239":1585,"_241":1587,"_48":1589,"_56":55},[680,1586],26,[719,1588],52,{},{"_42":238,"_239":1591,"_241":1592,"_48":1594,"_56":55},[668],[1593],105,{},"Eso no es solo estado. Es estado a través del tiempo — y eso es exactamente lo que una máquina de estados modela.",{"_42":67,"_44":1597,"_46":1457,"_48":1598,"_52":1599,"_54":1600,"_56":55},"Mu8Siuih",{"_71":72},[],"🧠 Las UIs no son solo estados — son comportamientos",{"_36":1602,"_40":1662},[1603,1616,1655],{"_36":1604,"_40":1605},[],{"_42":233,"_44":1606,"_46":1457,"_48":1607,"_52":1608,"_54":1615,"_56":55},"QEvxitoI",{},[1609],{"_42":238,"_239":1610,"_241":1612,"_48":1614,"_56":55},[1611],111,[1613],129,{},"¿Qué pasaría si, en vez de conectar un montón de banderas y condiciones, modelaras la lógica de tu UI como una máquina de estados?",{"_36":1617,"_40":1650},[1618,1625,1636,1643],{"_36":1619,"_40":1620},[],{"_42":233,"_44":1621,"_46":1457,"_48":1622,"_52":1623,"_54":1624,"_56":55},"6wCxqQkT",{},[],"Definir todos los estados posibles desde el principio",{"_36":1626,"_40":1627},[],{"_42":233,"_44":1628,"_46":1457,"_48":1629,"_52":1630,"_54":1635,"_56":55},"fj1w1QM4",{},[1631],{"_42":641,"_239":1632,"_241":1633,"_48":1634,"_56":55},[548],[936],{},"Describir solo las transiciones válidas",{"_36":1637,"_40":1638},[],{"_42":233,"_44":1639,"_46":1457,"_48":1640,"_52":1641,"_54":1642,"_56":55},"Vf_O02H0",{},[],"Eliminar estados imposibles o contradictorios",{"_36":1644,"_40":1645},[],{"_42":233,"_44":1646,"_46":1457,"_48":1647,"_52":1648,"_54":1649,"_56":55},"rKjHzj9e",{},[],"Tener un mapa visual de tu lógica — gratis",{"_42":233,"_44":1651,"_46":1457,"_48":1652,"_52":1653,"_54":1654,"_56":55},"6UX-NmGt",{"_71":307},[],"Con una máquina de estados, puedes:",{"_36":1656,"_40":1657},[],{"_42":233,"_44":1658,"_46":1457,"_48":1659,"_52":1660,"_54":1661,"_56":55},"v1NhXtWT",{},[],"Veamos un ejemplo simple.",{"_42":67,"_44":1663,"_46":1457,"_48":1664,"_52":1665,"_54":1666,"_56":55},"DUC1mm9d",{"_71":72},[],"✅ La solución: modela comportamientos, no solo estados",{"_36":1668,"_40":1705},[1669,1675,1686,1698],{"_36":1670,"_40":1671},[],{"_42":253,"_44":1672,"_46":1457,"_48":1673,"_52":1674,"_54":812,"_56":55},"XiF4W_bT",{"_809":810},[],{"_36":1676,"_40":1677},[],{"_42":233,"_44":1678,"_46":1457,"_48":1679,"_52":1680,"_54":1685,"_56":55},"QldUzAqM",{},[1681],{"_42":253,"_239":1682,"_241":1683,"_48":1684,"_56":55},[202],[197],{}," Eso es todo.",{"_36":1687,"_40":1688},[],{"_42":233,"_44":1689,"_46":1457,"_48":1690,"_52":1691,"_54":1697,"_56":55},"n22p0HrV",{},[1692],{"_42":253,"_239":1693,"_241":1694,"_48":1696,"_56":55},[586],[1695],83,{},"Una máquina. Dos estados. Un evento. Sin booleanos. Sin condicionales. Sin useState.",{"_36":1699,"_40":1700},[],{"_42":233,"_44":1701,"_46":1457,"_48":1702,"_52":1703,"_54":1704,"_56":55},"U0vXZzOq",{},[],"Simple, expresivo y con tipado fuerte.",{"_42":67,"_44":1706,"_46":1457,"_48":1707,"_52":1708,"_54":1709,"_56":55},"pNhvoVuJ",{"_71":72},[],"🧪 Ejemplo: Toggle con XState",{"_36":1711,"_40":1737},[1712,1725],{"_36":1713,"_40":1714},[],{"_42":862,"_44":1715,"_46":1457,"_48":1716,"_52":1717,"_54":1724,"_56":538},"P8u8tBvr",{},[1718],{"_42":570,"_239":1719,"_241":1720,"_48":1722,"_56":1723},[706],[1721],46,{},"https://Stately.ai","Diagrama de La Maquina de estado en Stately.ai",{"_36":1726,"_40":1727},[],{"_42":233,"_44":1728,"_46":1457,"_48":1729,"_52":1730,"_54":1736,"_56":55},"Db0EP4it",{},[1731],{"_42":641,"_239":1732,"_241":1734,"_48":1735,"_56":55},[1733],12,[719],{},"Así es como realmente luce esa máquina:",{"_42":67,"_44":1738,"_46":1457,"_48":1739,"_52":1740,"_54":1741,"_56":55},"eSQeAvmt",{"_71":72},[],"🔍 Visualízalo",{"_36":1743,"_40":1760},[1744],{"_36":1745,"_40":1746},[],{"_42":233,"_44":1747,"_46":1457,"_48":1748,"_52":1749,"_54":1759,"_56":55},"URd-V-EG",{},[1750,1755],{"_42":570,"_239":1751,"_241":1752,"_48":1754,"_56":871},[954],[1753],28,{},{"_42":238,"_239":1756,"_241":1757,"_48":1758,"_56":55},[663],[1518],{},"Herramientas como Stately.ai te permiten ver tus máquinas como diagramas de flujo — para que tú y tu equipo entiendan instantáneamente lo que está pasando.",{"_42":892,"_44":1761,"_46":1457,"_48":1762,"_52":1764,"_54":55,"_56":897},"Acg3cRTw",{"_119":1763},"👉 Abrir en Stately Visualizer",[],{"_36":1766,"_40":1817},[1767,1806],{"_36":1768,"_40":1801},[1769,1776,1783,1790],{"_36":1770,"_40":1771},[],{"_42":233,"_44":1772,"_46":1457,"_48":1773,"_52":1774,"_54":1775,"_56":55},"VZVUUele",{},[],"Simplificar formularios multistep y asistentes",{"_36":1777,"_40":1778},[],{"_42":233,"_44":1779,"_46":1457,"_48":1780,"_52":1781,"_54":1782,"_56":55},"I2qrVZ6M",{},[],"Modelar modales, menús desplegables o flujos de onboarding",{"_36":1784,"_40":1785},[],{"_42":233,"_44":1786,"_46":1457,"_48":1787,"_52":1788,"_54":1789,"_56":55},"YdIj7JFO",{},[],"Eliminar estados inconsistentes en la UI",{"_36":1791,"_40":1792},[],{"_42":233,"_44":1793,"_46":1457,"_48":1794,"_52":1795,"_54":1800,"_56":55},"VN3SHpHQ",{},[1796],{"_42":253,"_239":1797,"_241":1798,"_48":1799,"_56":55},[954],[1271],{},"Reemplazar lógica useEffect con transiciones declarativas",{"_42":233,"_44":1802,"_46":1457,"_48":1803,"_52":1804,"_54":1805,"_56":55},"WvXW5C6-",{"_71":307},[],"Esto no es solo para toggles. Puedes usar máquinas de estados para:",{"_36":1807,"_40":1808},[],{"_42":233,"_44":1809,"_46":1457,"_48":1810,"_52":1811,"_54":1816,"_56":55},"Pcso9TAS",{},[1812],{"_42":238,"_239":1813,"_241":1814,"_48":1815,"_56":55},[954],[720],{},"Y cuando combinas XState + React + TypeScript, desbloqueas una arquitectura de UI segura, testeable y escalable.",{"_42":67,"_44":1818,"_46":1457,"_48":1819,"_52":1820,"_54":1821,"_56":55},"pSw85GRo",{"_71":72},[],"🛠️ ¿Por qué importa esto?",{"_36":1823,"_40":1842},[1824,1835],{"_36":1825,"_40":1826},[],{"_42":233,"_44":1827,"_46":1457,"_48":1828,"_52":1829,"_54":1834,"_56":55},"387A6mYA",{},[1830],{"_42":238,"_239":1831,"_241":1832,"_48":1833,"_56":55},[1721],[724],{},"En el siguiente número, vamos a desglosar los tres bloques fundamentales de cualquier máquina de estados — y cómo identificarlos en tus propios componentes.",{"_36":1836,"_40":1837},[],{"_42":233,"_44":1838,"_46":1457,"_48":1839,"_52":1840,"_54":1841,"_56":55},"2B9ly-EA",{},[],"Vas a aprender cómo pasar de un estado caótico a un comportamiento modelado en minutos.",{"_42":67,"_44":1843,"_46":1457,"_48":1844,"_52":1845,"_54":1846,"_56":55},"PI80lQhc",{"_71":72},[],"⏭️ Próximo tema: Estados, Eventos y Transiciones",{"_36":1848,"_40":1886},[1849,1856,1863,1875],{"_36":1850,"_40":1851},[],{"_42":233,"_44":1852,"_46":1457,"_48":1853,"_52":1854,"_54":1855,"_56":55},"CdqYAAky",{},[],"Elige una interacción pequeña en tu UI — un toggle, modal o dropdown — e intenta modelarla como una máquina de estados.",{"_36":1857,"_40":1858},[],{"_42":233,"_44":1859,"_46":1457,"_48":1860,"_52":1861,"_54":1862,"_56":55},"A9Ew_ewx",{},[],"Solo una.",{"_36":1864,"_40":1865},[],{"_42":233,"_44":1866,"_46":1457,"_48":1867,"_52":1868,"_54":1874,"_56":55},"UaImp5od",{},[1869],{"_42":641,"_239":1870,"_241":1871,"_48":1873,"_56":55},[661],[1872],54,{},"Y luego pregúntate: ¿fue más fácil razonar sobre esto?",{"_36":1876,"_40":1877},[],{"_42":233,"_44":1878,"_46":1457,"_48":1879,"_52":1880,"_54":1885,"_56":55},"OoLM-B_l",{},[1881],{"_42":238,"_239":1882,"_241":1883,"_48":1884,"_56":55},[202],[1414],{},"Responde este correo y cuéntame cómo te fue — o etiquéteme en Twitter/X. Voy a destacar algunos ejemplos interesantes en futuros envíos.",{"_42":67,"_44":1887,"_46":1457,"_48":1888,"_52":1889,"_54":1890,"_56":55},"FtH7CU7e",{"_71":72},[],"💡 Intenta esto",{"_36":1892,"_40":1893},[],{"_42":233,"_44":1894,"_46":1457,"_48":1895,"_52":1896,"_54":1897,"_56":55},"Xssa7w9u",{},[],"Gracias por leer,\nHoracio","bafy2bzacebqndi6iq4jd2ystx3ihuosd4pcsujctvhem273ps3kdp3nadlfie",[108],"/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal","2025-04-01T04:43:40.787Z","2025-04-01T08:21:06.427Z",{"_119":1904,"_460":538},"Estas gestionando el estado de tus Interfaces mal",{},{"_123":1457,"_127":1907},"1743482620787",{"_44":1909,"_135":108,"_111":1910,"_106":1457,"_137":-5,"_138":-5,"_139":-5,"_140":1056,"_134":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal",[33,517,1911],"estas-gestionando-el-estado-de-tus-interfaces-mal",1776797043666,[214,1909,1457,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal\",\"bafy2bzacedeehy4mmf4hniuuxqoww54eacrhpypjtzu5qotzkgrq2bm6lfmqm\",true]",{"_149":1916,"_212":2333,"_215":2334},{"_151":1917,"_196":197,"_198":2332,"_200":-5,"_201":202,"_203":202,"_204":202,"_205":-5,"_206":-5,"_207":29,"_208":209,"_210":211},{"_42":31,"_31":1918,"_44":2330},{"_33":1919,"_106":466,"_107":108,"_109":2325,"_111":2326,"_113":473,"_115":473,"_117":2327,"_121":2328,"_123":466,"_125":2329,"_129":130},[1920,1927,1982,2014,2079,2114,2162,2176,2182,2189,2216,2263,2318],{"_36":1921,"_40":1922},[],{"_42":233,"_44":1923,"_46":466,"_48":1924,"_52":1925,"_54":1926,"_56":55},"nPlgMUSi",{},[],"Las máquinas de estado pueden sonar intimidantes al principio: tantos diagramas, cajas y flechas. Pero, en esencia, están construidas sobre tres ideas increíblemente simples: estados, eventos y transiciones. Si alguna vez has manejado el clic de un botón o mostrado un indicador de carga, ya has trabajado con ellas. Esta semana vamos a desmitificar cómo encajan estas piezas y por qué pueden hacer que la lógica de tu UI por fin tenga sentido.",{"_36":1928,"_40":1977},[1929,1936,1948,1959,1970],{"_36":1930,"_40":1931},[],{"_42":233,"_44":1932,"_46":466,"_48":1933,"_52":1934,"_54":1935,"_56":55},"deGVIuXJ",{},[],"En la edición anterior, vimos por qué las máquinas de estado son una mejor forma de modelar la lógica de la UI. Esta semana vamos a desglosar los tres conceptos que impulsan toda máquina de estado:",{"_36":1937,"_40":1938},[],{"_42":233,"_44":1939,"_46":466,"_48":1940,"_52":1941,"_54":1947,"_56":55},"jIP2FpLs",{},[1942],{"_42":238,"_239":1943,"_241":1944,"_48":1946,"_56":55},[202],[1945],7,{},"Estados – los diferentes modos en los que puede estar tu UI",{"_36":1949,"_40":1950},[],{"_42":233,"_44":1951,"_46":466,"_48":1952,"_52":1953,"_54":1958,"_56":55},"qfC42utM",{},[1954],{"_42":238,"_239":1955,"_241":1956,"_48":1957,"_56":55},[202],[1945],{},"Eventos – las cosas que ocurren y desencadenan cambios",{"_36":1960,"_40":1961},[],{"_42":233,"_44":1962,"_46":466,"_48":1963,"_52":1964,"_54":1969,"_56":55},"nWwchquP",{},[1965],{"_42":238,"_239":1966,"_241":1967,"_48":1968,"_56":55},[202],[1733],{},"Transiciones – cómo pasas de un estado a otro",{"_36":1971,"_40":1972},[],{"_42":233,"_44":1973,"_46":466,"_48":1974,"_52":1975,"_54":1976,"_56":55},"MiMfv3gk",{},[],"Una vez que entiendes esto, incluso los flujos más complejos empiezan a parecer… obvios.",{"_42":67,"_44":1978,"_46":466,"_48":1979,"_52":1980,"_54":1981,"_56":55},"aT6zvM2V",{"_71":72},[],"✨ Introducción: La base de toda máquina de estado",{"_36":1983,"_40":2009},[1984,1991,2002],{"_36":1985,"_40":1986},[],{"_42":233,"_44":1987,"_46":466,"_48":1988,"_52":1989,"_54":1990,"_56":55},"ThfTO4um",{},[],"Un estado es simplemente una etiqueta para una condición en la que se encuentra tu UI.",{"_36":1992,"_40":1993},[],{"_42":233,"_44":1994,"_46":466,"_48":1995,"_52":1996,"_54":2001,"_56":55},"5iUfOLIx",{},[1997],{"_42":238,"_239":1998,"_241":1999,"_48":2000,"_56":55},[17],[548],{},"🔁 Ejemplo: Un interruptor tiene dos estados: activo e inactivo. Un formulario podría tener: inactivo, validando, enviando, éxito, error.",{"_36":2003,"_40":2004},[],{"_42":233,"_44":2005,"_46":466,"_48":2006,"_52":2007,"_54":2008,"_56":55},"1lHMzgcp",{},[],"Los defines de antemano, y tu componente solo puede estar en uno de ellos a la vez.",{"_42":67,"_44":2010,"_46":466,"_48":2011,"_52":2012,"_54":2013,"_56":55},"sj8G5sJS",{"_71":72},[],"🧠 ¿Qué es un estado?",{"_36":2015,"_40":2074},[2016,2023,2067],{"_36":2017,"_40":2018},[],{"_42":233,"_44":2019,"_46":466,"_48":2020,"_52":2021,"_54":2022,"_56":55},"Zk4APSV3",{},[],"Un evento es algo que sucede, normalmente desencadenado por el usuario o por el sistema.",{"_36":2024,"_40":2058},[2025,2036,2047],{"_36":2026,"_40":2027},[],{"_42":233,"_44":2028,"_46":466,"_48":2029,"_52":2030,"_54":2035,"_56":55},"rhZCFfDM",{},[2031],{"_42":253,"_239":2032,"_241":2033,"_48":2034,"_56":55},[548],[717],{},"Un clic → TOGGLE",{"_36":2037,"_40":2038},[],{"_42":233,"_44":2039,"_46":466,"_48":2040,"_52":2041,"_54":2046,"_56":55},"WNl0XeAZ",{},[2042],{"_42":253,"_239":2043,"_241":2044,"_48":2045,"_56":55},[1753],[311],{},"El envío de un formulario → SUBMIT",{"_36":2048,"_40":2049},[],{"_42":233,"_44":2050,"_46":466,"_48":2051,"_52":2052,"_54":2057,"_56":55},"FtvXRHm9",{},[2053],{"_42":253,"_239":2054,"_241":2055,"_48":2056,"_56":55},[572],[706],{},"Una llamada a la API falla → FAILURE",{"_42":67,"_44":2059,"_46":466,"_48":2060,"_52":2061,"_54":2066,"_56":55},"UN3_FArK",{"_71":72},[2062],{"_42":238,"_239":2063,"_241":2064,"_48":2065,"_56":55},[17],[883],{},"👇 Ejemplos:",{"_36":2068,"_40":2069},[],{"_42":233,"_44":2070,"_46":466,"_48":2071,"_52":2072,"_54":2073,"_56":55},"KnLkBNRE",{},[],"Los eventos no hacen nada por sí solos: le piden a la máquina que cambie.",{"_42":67,"_44":2075,"_46":466,"_48":2076,"_52":2077,"_54":2078,"_56":55},"KI5RMkff",{"_71":72},[],"⚡ ¿Qué es un evento?",{"_36":2080,"_40":2109},[2081,2088,2095,2102],{"_36":2082,"_40":2083},[],{"_42":233,"_44":2084,"_46":466,"_48":2085,"_52":2086,"_54":2087,"_56":55},"eRiC3HbH",{},[],"Una transición es la forma en que la máquina cambia de un estado a otro en respuesta a un evento.",{"_36":2089,"_40":2090},[],{"_42":233,"_44":2091,"_46":466,"_48":2092,"_52":2093,"_54":2094,"_56":55},"sTUllFZO",{},[],"Piensa en ello así: “Cuando estoy en [este estado] y ocurre [este evento], paso a [aquel estado]”.",{"_36":2096,"_40":2097},[],{"_42":233,"_44":2098,"_46":466,"_48":2099,"_52":2100,"_54":2101,"_56":55},"nRy05Def",{},[],"En XState, se ve así:",{"_36":2103,"_40":2104},[],{"_42":253,"_44":2105,"_46":466,"_48":2106,"_52":2107,"_54":2108,"_56":55},"jw01korP",{"_809":810},[],"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});\n",{"_42":67,"_44":2110,"_46":466,"_48":2111,"_52":2112,"_54":2113,"_56":55},"b9yA3T2X",{"_71":72},[],"🔄 ¿Qué es una transición?",{"_36":2115,"_40":2157},[2116,2123,2130,2143,2150],{"_36":2117,"_40":2118},[],{"_42":233,"_44":2119,"_46":466,"_48":2120,"_52":2121,"_54":2122,"_56":55},"w5f_KLu9",{},[],"Porque defines explícitamente los estados y las transiciones, evitas:",{"_36":2124,"_40":2125},[],{"_42":233,"_44":2126,"_46":466,"_48":2127,"_52":2128,"_54":2129,"_56":55},"_FQcH6ym",{},[],"Condiciones ambiguas",{"_36":2131,"_40":2132},[],{"_42":233,"_44":2133,"_46":466,"_48":2134,"_52":2135,"_54":2142,"_56":55},"fLuK_gFX",{},[2136],{"_42":253,"_239":2137,"_241":2139,"_48":2141,"_56":55},[2138],38,[2140],58,{},"Combinaciones inválidas (por ejemplo, isLoading && isError)",{"_36":2144,"_40":2145},[],{"_42":233,"_44":2146,"_46":466,"_48":2147,"_52":2148,"_54":2149,"_56":55},"Y3rnnK72",{},[],"Errores del tipo “¿en qué parte del flujo estoy?”",{"_36":2151,"_40":2152},[],{"_42":233,"_44":2153,"_46":466,"_48":2154,"_52":2155,"_54":2156,"_56":55},"gnu6Ubhe",{},[],"La máquina no permitirá transiciones que no estén definidas. Eso es seguridad por diseño.",{"_42":67,"_44":2158,"_46":466,"_48":2159,"_52":2160,"_54":2161,"_56":55},"Sxtoy9jJ",{"_71":72},[],"🧪 Por qué esta estructura es poderosa",{"_36":2163,"_40":2171},[2164],{"_36":2165,"_40":2166},[],{"_42":233,"_44":2167,"_46":466,"_48":2168,"_52":2169,"_54":2170,"_56":55},"Hdh00UbF",{},[],"Aquí está ese formulario como un diagrama de máquina de estados:",{"_42":67,"_44":2172,"_46":466,"_48":2173,"_52":2174,"_54":2175,"_56":55},"SiAWtzba",{"_71":72},[],"Visualízalo",{"_36":2177,"_40":2178},[],{"_42":892,"_44":2179,"_46":466,"_48":2180,"_52":2181,"_54":55,"_56":1313},"Qztq6NIW",{"_71":72,"_119":1309,"_1310":1311},[],{"_36":2183,"_40":2184},[],{"_42":233,"_44":2185,"_46":466,"_48":2186,"_52":2187,"_54":2188,"_56":55},"BHys06pF",{},[],"Este tipo de diagramas no solo se ven bien: son documentación viva de cómo se comporta tu aplicación.",{"_36":2190,"_40":2211},[2191,2198,2204],{"_36":2192,"_40":2193},[],{"_42":233,"_44":2194,"_46":466,"_48":2195,"_52":2196,"_54":2197,"_56":55},"Ecbl-fot",{},[],"En lugar de exponer un montón de props o handlers, puedes pensar en la máquina de tu UI como una interfaz limpia que expone una sola cosa:",{"_36":2199,"_40":2200},[],{"_42":253,"_44":2201,"_46":466,"_48":2202,"_52":2203,"_54":1341,"_56":55},"IcApY0_E",{"_809":810},[],{"_36":2205,"_40":2206},[],{"_42":233,"_44":2207,"_46":466,"_48":2208,"_52":2209,"_54":2210,"_56":55},"WcROZRxW",{},[],"Eso es todo. A quienes consumen tu componente no les importa tu lógica interna: solo envían eventos y obtienen un comportamiento predecible.",{"_42":67,"_44":2212,"_46":466,"_48":2213,"_52":2214,"_54":2215,"_56":55},"GJOCK72q",{"_71":72},[],"🧠 Consejo profesional: Los eventos son la API de tu componente",{"_36":2217,"_40":2258},[2218,2251],{"_36":2219,"_40":2246},[2220,2227,2239],{"_36":2221,"_40":2222},[],{"_42":233,"_44":2223,"_46":466,"_48":2224,"_52":2225,"_54":2226,"_56":55},"e5NO78XQ",{},[],"✅ Configurar XState en un proyecto de React",{"_36":2228,"_40":2229},[],{"_42":233,"_44":2230,"_46":466,"_48":2231,"_52":2232,"_54":2238,"_56":55},"gOcbRQST",{},[2233],{"_42":253,"_239":2234,"_241":2235,"_48":2237,"_56":55},[1945],[2236],17,{},"✅ Usar useMachine",{"_36":2240,"_40":2241},[],{"_42":233,"_44":2242,"_46":466,"_48":2243,"_52":2244,"_54":2245,"_56":55},"xbswMrMQ",{},[],"✅ Conectar el estado a tu UI",{"_42":233,"_44":2247,"_46":466,"_48":2248,"_52":2249,"_54":2250,"_56":55},"auzgGp-e",{"_71":307},[],"En la próxima edición, pasaremos a la práctica:",{"_36":2252,"_40":2253},[],{"_42":233,"_44":2254,"_46":466,"_48":2255,"_52":2256,"_54":2257,"_56":55},"m5S71DiW",{},[],"Vamos a construir una máquina real y conectarla a un componente real.",{"_42":67,"_44":2259,"_46":466,"_48":2260,"_52":2261,"_54":2262,"_56":55},"LtzvR5Za",{"_71":72},[],"Próximamente: Modelando UI con XState",{"_36":2264,"_40":2313},[2265,2293,2306],{"_36":2266,"_40":2288},[2267,2274,2281],{"_36":2268,"_40":2269},[],{"_42":233,"_44":2270,"_46":466,"_48":2271,"_52":2272,"_54":2273,"_56":55},"8x-QcrCV",{},[],"¿Cuáles son los estados posibles?",{"_36":2275,"_40":2276},[],{"_42":233,"_44":2277,"_46":466,"_48":2278,"_52":2279,"_54":2280,"_56":55},"YpkGf8Lx",{},[],"¿Qué eventos pueden ocurrir?",{"_36":2282,"_40":2283},[],{"_42":233,"_44":2284,"_46":466,"_48":2285,"_52":2286,"_54":2287,"_56":55},"7kTenZrb",{},[],"¿Cómo pasas de uno a otro?",{"_42":233,"_44":2289,"_46":466,"_48":2290,"_52":2291,"_54":2292,"_56":55},"aOqG-4mD",{"_71":307},[],"Elige una UI pequeña en tu aplicación (un interruptor, botón, formulario, etc.) y responde:",{"_36":2294,"_40":2295},[],{"_42":233,"_44":2296,"_46":466,"_48":2297,"_52":2298,"_54":2305,"_56":55},"XbDu_Lgl",{},[2299],{"_42":570,"_239":2300,"_241":2301,"_48":2303,"_56":2304},[643],[2302],42,{},"http://Stately.ai","Intenta modelarlo en papel o en Stately.ai.",{"_36":2307,"_40":2308},[],{"_42":233,"_44":2309,"_46":466,"_48":2310,"_52":2311,"_54":2312,"_56":55},"j37xrF0t",{},[],"Responde con tu flujo; me encantaría destacar algunos en futuras ediciones.",{"_42":67,"_44":2314,"_46":466,"_48":2315,"_52":2316,"_54":2317,"_56":55},"uBy3t0xH",{"_71":72},[],"💡 Prueba esto",{"_36":2319,"_40":2320},[],{"_42":233,"_44":2321,"_46":466,"_48":2322,"_52":2323,"_54":2324,"_56":55},"kMauQsw-",{},[],"Hasta la próxima,\nHoracio",[108],"/content/estados-eventos-y-transiciones-desmitificados",{"_119":482,"_460":483},{},{"_123":466,"_127":480},{"_44":97,"_135":108,"_111":2331,"_106":-5,"_137":-5,"_138":-5,"_139":-5,"_140":1056,"_134":6},[33,465],1776797043665,[214,97,-5,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/estados-eventos-y-transiciones-desmitificados\",null,true]",{"_149":2336,"_212":2824,"_215":2825},{"_151":2337,"_196":197,"_198":2823,"_200":-5,"_201":202,"_203":202,"_204":202,"_205":-5,"_206":-5,"_207":29,"_208":209,"_210":211},{"_42":31,"_31":2338,"_44":2821},{"_33":2339,"_106":439,"_107":108,"_109":2815,"_111":2816,"_113":447,"_115":2817,"_117":2818,"_121":2819,"_123":448,"_125":2820,"_129":130},[2340,2409,2458,2487,2537,2565,2586,2619,2647,2760,2803],{"_36":2341,"_40":2404},[2342,2349,2388],{"_36":2343,"_40":2344},[],{"_42":233,"_44":2345,"_46":448,"_48":2346,"_52":2347,"_54":2348,"_56":55},"X_-1QPAY",{},[],"You're building a document editor. Users can navigate to older versions of a document. If they start editing an old version, it silently creates a branch in the document history — often unintentional. You need to warn them first.",{"_36":2350,"_40":2379},[2351,2358,2365,2372],{"_36":2352,"_40":2353},[],{"_42":233,"_44":2354,"_46":448,"_48":2355,"_52":2356,"_54":2357,"_56":55},"WzLNuzxz",{},[],"Clicking the document title",{"_36":2359,"_40":2360},[],{"_42":233,"_44":2361,"_46":448,"_48":2362,"_52":2363,"_54":2364,"_56":55},"f2ghHskQ",{},[],"Clicking the editor area",{"_36":2366,"_40":2367},[],{"_42":233,"_44":2368,"_46":448,"_48":2369,"_52":2370,"_54":2371,"_56":55},"4-R85I9w",{},[],"Auto-entering edit mode when a draft exists",{"_36":2373,"_40":2374},[],{"_42":233,"_44":2375,"_46":448,"_48":2376,"_52":2377,"_54":2378,"_56":55},"LDOeF2nI",{},[],"Keyboard shortcuts",{"_42":233,"_44":2380,"_46":448,"_48":2381,"_52":2382,"_54":2387,"_56":55},"0-nHopbB",{"_71":307},[2383],{"_42":238,"_239":2384,"_241":2385,"_48":2386,"_56":55},[608],[1588],{},"Sounds simple, right? But your app has multiple ways to enter edit mode:",{"_36":2389,"_40":2390},[],{"_42":233,"_44":2391,"_46":448,"_48":2392,"_52":2393,"_54":2403,"_56":55},"7pJYB7hV",{},[2394,2398],{"_42":253,"_239":2395,"_241":2396,"_48":2397,"_56":55},[2236],[855],{},{"_42":238,"_239":2399,"_241":2401,"_48":2402,"_56":55},[2400],63,[1695],{},"With traditional useState-based approaches, you'd need to find every single trigger and add a guard. Miss one? Bug. Add a new entry point later? Probably another bug.",{"_42":67,"_44":2405,"_46":448,"_48":2406,"_52":2407,"_54":2408,"_56":55},"OwXDKqnA",{"_71":72},[],"The Problem",{"_36":2410,"_40":2453},[2411,2422,2429,2437],{"_36":2412,"_40":2413},[],{"_42":233,"_44":2414,"_46":448,"_48":2415,"_52":2416,"_54":2421,"_56":55},"q6WmQx2F",{},[2417],{"_42":238,"_239":2418,"_241":2419,"_48":2420,"_56":55},[645],[869],{},"With a state machine, editing is a state — not a boolean. Every path into that state goes through the machine. Add a guard in one place, and it applies everywhere.",{"_36":2423,"_40":2424},[],{"_42":233,"_44":2425,"_46":448,"_48":2426,"_52":2427,"_54":2428,"_56":55},"-w2AY92q",{},[],"Here's the mental model:",{"_36":2430,"_40":2431},[],{"_42":253,"_44":2432,"_46":448,"_48":2433,"_52":2435,"_54":2436,"_56":55},"4jnVHkuo",{"_809":2434},"mermaid",[],"stateDiagram-v2\n [*] --> loading\n loading --> loaded: document.loaded + draft.resolved\n\n loaded --> editing: edit.start [latest version]\n loaded --> confirmingOldVersionEdit: edit.start [old version]\n\n confirmingOldVersionEdit --> editing: edit.confirm\n confirmingOldVersionEdit --> loaded: edit.cancel\n\n editing --> loaded: edit.cancel\n editing --> publishing: publish.start\n publishing --> loaded: publish.done\n",{"_36":2438,"_40":2439},[],{"_42":233,"_44":2440,"_46":448,"_48":2441,"_52":2442,"_54":2452,"_56":55},"bqZY_Vl8",{},[2443,2448],{"_42":238,"_239":2444,"_241":2445,"_48":2447,"_56":55},[2236],[2446],59,{},{"_42":253,"_239":2449,"_241":2450,"_48":2451,"_56":55},[2446],[828],{},"The key insight: we didn't touch any UI code that triggers edit.start. The machine routes the transition based on context.",{"_42":67,"_44":2454,"_46":448,"_48":2455,"_52":2456,"_54":2457,"_56":55},"pb4Y2Olv",{"_71":72},[],"The State Machine Approach",{"_36":2459,"_40":2482},[2460,2467,2475],{"_36":2461,"_40":2462},[],{"_42":233,"_44":2463,"_46":448,"_48":2464,"_52":2465,"_54":2466,"_56":55},"iwfbRBr-",{},[],"Without a state machine, you'd end up with something like this scattered across your components:",{"_36":2468,"_40":2469},[],{"_42":253,"_44":2470,"_46":448,"_48":2471,"_52":2473,"_54":2474,"_56":55},"B5VSyRq3",{"_809":2472},"tsx",[],"// ❌ Every edit trigger needs the guard\nfunction onTitleClick() {\n if (!isLatest) {\n setShowConfirmDialog(true)\n return\n }\n setIsEditing(true)\n}\n\nfunction onEditorClick() {\n if (!isLatest) {\n setShowConfirmDialog(true) // duplicated!\n return\n }\n setIsEditing(true)\n}\n\n// And what about auto-edit when a draft exists?\nuseEffect(() => {\n if (hasDraft && !isLatest) {\n // Wait, do we show the dialog here too?\n // What if the user navigates to latest while the dialog is open?\n }\n}, [hasDraft, isLatest])\n",{"_36":2476,"_40":2477},[],{"_42":233,"_44":2478,"_46":448,"_48":2479,"_52":2480,"_54":2481,"_56":55},"jv2CVOGQ",{},[],"Every new entry point means another place to remember the guard. Every edge case (draft exists + old version + account switch) multiplies the conditionals.",{"_42":67,"_44":2483,"_46":448,"_48":2484,"_52":2485,"_54":2486,"_56":55},"nyXuJAHK",{"_71":72},[],"Before: Boolean Spaghetti",{"_36":2488,"_40":2532},[2489,2496,2504,2511,2518,2525],{"_36":2490,"_40":2491},[],{"_42":233,"_44":2492,"_46":448,"_48":2493,"_52":2494,"_54":2495,"_56":55},"N73Uq9x5",{},[],"With XState, the guard lives in the machine definition:",{"_36":2497,"_40":2498},[],{"_42":253,"_44":2499,"_46":448,"_48":2500,"_52":2502,"_54":2503,"_56":55},"UPQWgtew",{"_809":2501},"ts",[],"// ✅ One place, all entry points covered\n'edit.start': [\n {\n target: 'confirmingOldVersionEdit',\n guard: 'canEditOldVersion', // old version → confirm first\n },\n {\n target: 'editing',\n guard: 'canTransitionToEditing', // latest version → go ahead\n },\n],\n",{"_36":2505,"_40":2506},[],{"_42":233,"_44":2507,"_46":448,"_48":2508,"_52":2509,"_54":2510,"_56":55},"zS2XXv11",{},[],"The auto-edit transition for existing drafts gets the same treatment:",{"_36":2512,"_40":2513},[],{"_42":253,"_44":2514,"_46":448,"_48":2515,"_52":2516,"_54":2517,"_56":55},"g3Y7flDO",{"_809":2501},[],"// Auto-edit guard: only on latest version\nalways: {\n target: 'editing',\n guard: ({context}) => context.shouldAutoEdit && context.isLatestVersion,\n actions: ['clearShouldAutoEdit', 'setDepsFromPublished'],\n},\n",{"_36":2519,"_40":2520},[],{"_42":233,"_44":2521,"_46":448,"_48":2522,"_52":2523,"_54":2524,"_56":55},"w7D3ju8h",{},[],"The confirmation state handles only its own concern:",{"_36":2526,"_40":2527},[],{"_42":253,"_44":2528,"_46":448,"_48":2529,"_52":2530,"_54":2531,"_56":55},"eIhUXn3-",{"_809":2501},[],"confirmingOldVersionEdit: {\n on: {\n 'edit.confirm': {\n target: 'editing',\n actions: ['setDepsFromPublished'],\n },\n 'edit.cancel': {\n target: 'loaded',\n },\n },\n},\n",{"_42":67,"_44":2533,"_46":448,"_48":2534,"_52":2535,"_54":2536,"_56":55},"uiGFw2IY",{"_71":72},[],"After: One Machine, One Guard",{"_36":2538,"_40":2560},[2539,2546,2553],{"_36":2540,"_40":2541},[],{"_42":233,"_44":2542,"_46":448,"_48":2543,"_52":2544,"_54":2545,"_56":55},"y1_prkIu",{},[],"The dialog component is purely declarative — it reads state and sends events:",{"_36":2547,"_40":2548},[],{"_42":253,"_44":2549,"_46":448,"_48":2550,"_52":2551,"_54":2552,"_56":55},"lysr5VRF",{"_809":2472},[],"function OldVersionEditDialog() {\n const isConfirming = useDocumentSelector(selectIsConfirmingOldVersionEdit)\n const send = useDocumentSend()\n\n return (\n \n \n Edit older version?\n \n Editing this version will create a new branch in the document history.\n \n send({type: 'edit.cancel'})}>\n Cancel\n \n send({type: 'edit.confirm'})}>\n Edit Anyway\n \n \n \n )\n}\n",{"_36":2554,"_40":2555},[],{"_42":233,"_44":2556,"_46":448,"_48":2557,"_52":2558,"_54":2559,"_56":55},"HNSQzmrj",{},[],"Drop this component anywhere in the tree. It works because it talks to the machine, not to local state.",{"_42":67,"_44":2561,"_46":448,"_48":2562,"_52":2563,"_54":2564,"_56":55},"rzWErhQt",{"_71":72},[],"The UI: Dead Simple",{"_36":2566,"_40":2581},[2567,2574],{"_36":2568,"_40":2569},[],{"_42":233,"_44":2570,"_46":448,"_48":2571,"_52":2572,"_54":2573,"_56":55},"c3izfZOv",{},[],"Here's the complete document lifecycle with the new confirmation guard:",{"_36":2575,"_40":2576},[],{"_42":253,"_44":2577,"_46":448,"_48":2578,"_52":2579,"_54":2580,"_56":55},"i3xN9kZW",{"_809":2434},[],"stateDiagram-v2\n [*] --> loading\n\n state loading {\n [*] --> waitingForDocument\n waitingForDocument --> documentReady: document.loaded\n waitingForDocument --> draftReady: draft.resolved\n documentReady --> allReady: draft.resolved\n draftReady --> allReady: document.loaded\n }\n\n loading --> loaded: both resolved\n loading --> error: document.error\n\n loaded --> editing: edit.start [latest + canEdit]\n loaded --> confirmingOldVersionEdit: edit.start [old version + canEdit]\n loaded --> editing: auto-edit [draft + latest]\n\n state confirmingOldVersionEdit {\n [*] --> awaitingUserChoice\n }\n confirmingOldVersionEdit --> editing: edit.confirm\n confirmingOldVersionEdit --> loaded: edit.cancel\n\n state editing {\n [*] --> idle\n idle --> changed: content.changed\n changed --> saving: debounce timeout\n saving --> idle: save.done\n }\n\n editing --> publishing: publish.start\n editing --> loaded: edit.cancel\n\n publishing --> loaded: publish.done\n publishing --> editing: publish.error\n\n error --> loading: retry\n",{"_42":67,"_44":2582,"_46":448,"_48":2583,"_52":2584,"_54":2585,"_56":55},"2NFWJyvH",{"_71":72},[],"The Full Picture",{"_36":2587,"_40":2614},[2588,2603],{"_36":2589,"_40":2590},[],{"_42":233,"_44":2591,"_46":448,"_48":2592,"_52":2593,"_54":2602,"_56":55},"KnxzdsOq",{},[2594],{"_42":253,"_239":2595,"_241":2598,"_48":2601,"_56":55},[2596,2597],150,171,[2599,2600],152,177,{},"ConcernBoolean approachState machineNew edit entry pointMust add guard manuallyAutomatic — goes through machineEdge case (draft + old version)Another if somewhereGuard on always transitionTestingMock click handlers, check booleansSend events, assert statesVisualizing behaviorRead code, build mental modelGenerate diagram from definitionAdding new states (e.g. \"merging\")Refactor everythingAdd a state node",{"_36":2604,"_40":2605},[],{"_42":233,"_44":2606,"_46":448,"_48":2607,"_52":2608,"_54":2613,"_56":55},"Sy6s229z",{},[2609],{"_42":238,"_239":2610,"_241":2611,"_48":2612,"_56":55},[1721],[1536],{},"The real win isn't fewer lines of code — it's fewer places where things can go wrong. When behavior lives in the machine, you can reason about it in one place, test it in isolation, and visualize it as a diagram.",{"_42":67,"_44":2615,"_46":448,"_48":2616,"_52":2617,"_54":2618,"_56":55},"J30rZmR3",{"_71":72},[],"Why This Matters",{"_36":2620,"_40":2642},[2621,2628,2635],{"_36":2622,"_40":2623},[],{"_42":233,"_44":2624,"_46":448,"_48":2625,"_52":2626,"_54":2627,"_56":55},"W8uwdfuB",{},[],"State machine tests are clean because they're just input → output:",{"_36":2629,"_40":2630},[],{"_42":253,"_44":2631,"_46":448,"_48":2632,"_52":2633,"_54":2634,"_56":55},"LklZ0T0r",{"_809":2501},[],"test('edit.start on old version → confirmation state', () => {\n const actor = createActor(documentMachine, {\n input: { isLatest: false, canEdit: true, /* ... */ }\n })\n actor.start()\n\n // Simulate document load\n actor.send({type: 'document.loaded', document: mockDoc})\n actor.send({type: 'draft.resolved', draftId: null, content: null})\n\n // Try to edit\n actor.send({type: 'edit.start'})\n\n // Machine routes to confirmation, not editing\n expect(actor.getSnapshot().matches('confirmingOldVersionEdit')).toBe(true)\n})\n\ntest('edit.confirm → enters editing', () => {\n // ... setup in confirmingOldVersionEdit state ...\n actor.send({type: 'edit.confirm'})\n expect(actor.getSnapshot().matches('editing')).toBe(true)\n})\n",{"_36":2636,"_40":2637},[],{"_42":233,"_44":2638,"_46":448,"_48":2639,"_52":2640,"_54":2641,"_56":55},"MEwPi7yg",{},[],"No DOM, no mocking click handlers, no rendering components. Pure logic.",{"_42":67,"_44":2643,"_46":448,"_48":2644,"_52":2645,"_54":2646,"_56":55},"bSE19LBw",{"_71":72},[],"Testing: Events In, States Out",{"_36":2648,"_40":2755},[2649,2703],{"_36":2650,"_40":2697},[2651,2662,2678],{"_36":2652,"_40":2653},[],{"_42":233,"_44":2654,"_46":448,"_48":2655,"_52":2656,"_54":2661,"_56":55},"8yn_DTRI",{},[2657],{"_42":238,"_239":2658,"_241":2659,"_48":2660,"_56":55},[202],[883],{},"Start small — model one complex interaction (a multi-step form, a data loading flow)",{"_36":2663,"_40":2664},[],{"_42":233,"_44":2665,"_46":448,"_48":2666,"_52":2667,"_54":2677,"_56":55},"bFG6HG-Z",{},[2668,2672],{"_42":238,"_239":2669,"_241":2670,"_48":2671,"_56":55},[202],[954],{},{"_42":570,"_239":2673,"_241":2674,"_48":2675,"_56":2676},[719],[645],{},"http://stately.ai/viz","Use the visualizer — stately.ai/viz turns your machine definition into an interactive diagram",{"_36":2679,"_40":2680},[],{"_42":233,"_44":2681,"_46":448,"_48":2682,"_52":2683,"_54":2696,"_56":55},"bHnMU77U",{},[2684,2688],{"_42":238,"_239":2685,"_241":2686,"_48":2687,"_56":55},[202],[572],{},{"_42":253,"_239":2689,"_241":2692,"_48":2695,"_56":55},[1414,1695,2690,2691],92,99,[586,2693,2694,1593],90,97,{},"Think in states, not booleans — instead of isLoading && !isError && hasData, model loading, error, loaded as distinct states",{"_42":233,"_44":2698,"_46":448,"_48":2699,"_52":2701,"_54":2702,"_56":55},"9u0p35gA",{"_71":2700},"Ordered",[],"If you're new to state machines in UI:",{"_36":2704,"_40":2739},[2705,2717,2728],{"_36":2706,"_40":2707},[],{"_42":233,"_44":2708,"_46":448,"_48":2709,"_52":2710,"_54":2716,"_56":55},"Wq2RNbtS",{},[2711],{"_42":253,"_239":2712,"_241":2714,"_48":2715,"_56":55},[661,2713],48,[608,1535],{},"Machine definition: document-machine.ts (commit 73c6efee7)",{"_36":2718,"_40":2719},[],{"_42":233,"_44":2720,"_46":448,"_48":2721,"_52":2722,"_54":2727,"_56":55},"bEl_IptI",{},[2723],{"_42":253,"_239":2724,"_241":2725,"_48":2726,"_56":55},[855],[2713],{},"React hooks & selectors: use-document-machine.ts",{"_36":2729,"_40":2730},[],{"_42":233,"_44":2731,"_46":448,"_48":2732,"_52":2733,"_54":2738,"_56":55},"jk3cD4Ps",{},[2734],{"_42":253,"_239":2735,"_241":2736,"_48":2737,"_56":55},[883],[645],{},"UI dialog: resource-page-common.tsx",{"_42":233,"_44":2740,"_46":448,"_48":2741,"_52":2742,"_54":2754,"_56":55},"fWh_KRd9",{"_71":307},[2743,2748],{"_42":570,"_239":2744,"_241":2745,"_48":2746,"_56":2747},[311],[667],{},"hm://z6Mko5npVz4Bx9Rf4vkRUf2swvb568SDbhLwStaha3HzgrLS",{"_42":570,"_239":2749,"_241":2750,"_48":2752,"_56":2753},[1463],[2751],101,{},"https://github.com/seed-hypermedia/seed/pull/459","The code from this post is from a real production app. You can see the full implementation in PR #459, specifically:",{"_42":67,"_44":2756,"_46":448,"_48":2757,"_52":2758,"_54":2759,"_56":55},"Tyt7ztVq",{"_71":72},[],"Getting Started",{"_36":2761,"_40":2798},[2762,2774,2786],{"_36":2763,"_40":2764},[],{"_42":233,"_44":2765,"_46":448,"_48":2766,"_52":2767,"_54":2773,"_56":55},"Z4Af4Ig3",{},[2768],{"_42":570,"_239":2769,"_241":2770,"_48":2771,"_56":2772},[202],[936],{},"https://stately.ai/docs/xstate-v5","XState v5 docs",{"_36":2775,"_40":2776},[],{"_42":233,"_44":2777,"_46":448,"_48":2778,"_52":2779,"_54":2785,"_56":55},"YrMzUImI",{},[2780],{"_42":570,"_239":2781,"_241":2782,"_48":2783,"_56":2784},[202],[719],{},"https://stately.ai/editor","Stately visual editor",{"_36":2787,"_40":2788},[],{"_42":233,"_44":2789,"_46":448,"_48":2790,"_52":2791,"_54":2797,"_56":55},"y9qtEiOg",{},[2792],{"_42":570,"_239":2793,"_241":2794,"_48":2795,"_56":2796},[202],[869],{},"https://www.youtube.com/watch?v=VU1NKX6Qkxc","David Khourshid — \"State Machines in UI\"",{"_42":67,"_44":2799,"_46":448,"_48":2800,"_52":2801,"_54":2802,"_56":55},"PcxE4SGR",{"_71":307},[],"Resources",{"_36":2804,"_40":2805},[],{"_42":233,"_44":2806,"_46":439,"_48":2807,"_52":2808,"_54":2814,"_56":55},"PoO5J60k",{},[2809],{"_42":570,"_239":2810,"_241":2811,"_48":2812,"_56":2813},[766],[1534],{},"https://unsplash.com/@imjash?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText","Photo by Joshua Ferrer on Unsplash",[108],"/content/why-state-machines-are-a-game-changer-for-ui-development","2026-04-16T22:30:09.336Z",{"_119":457,"_458":459,"_460":461},{},{"_123":448,"_127":455},{"_44":105,"_135":108,"_111":2822,"_106":-5,"_137":-5,"_138":-5,"_139":-5,"_140":1056,"_134":6},[33,438],1776797043663,[214,105,-5,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/why-state-machines-are-a-game-changer-for-ui-development\",null,true]",{"_149":2827,"_212":2834,"_215":2836},{"_151":2828,"_196":197,"_198":2833,"_200":-5,"_201":202,"_203":202,"_204":202,"_205":-5,"_206":-5,"_207":29,"_208":209,"_210":211},{"_42":107,"_44":2829,"_117":2831},{"_106":378,"_135":108,"_44":391,"_111":2830,"_137":-5,"_138":-5,"_139":-5,"_140":-5},[],{"_119":383,"_384":385,"_2832":-5,"_458":-5},"icon",1776797043654,[2835,108],"ACCOUNT","[\"ACCOUNT\",\"z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"]","enableWebSigning","origin","homeMetadata",{"_119":383,"_384":385},"originHomeId",{"_135":108,"_44":391,"_111":2843,"_106":-5,"_137":-5,"_138":-5,"_139":-5,"_140":-5},[],"meta",{"_2846":2847,"_2947":2948},"values",{"_2848":2849,"_2851":2852,"_2853":2854,"_2855":2856,"_2858":2859,"_2860":2861,"_2862":2863,"_2865":2866,"_2867":2868,"_2869":2870,"_2871":2872,"_2873":2874,"_2875":2876,"_2877":2878,"_2879":2880,"_2881":2882,"_2883":2884,"_2885":2886,"_2887":2888,"_2889":2890,"_2891":2892,"_2893":2894,"_2895":2896,"_2897":2898,"_2899":2900,"_2901":2902,"_2903":2904,"_2905":2906,"_2907":2908,"_2909":2910,"_2911":2912,"_2913":2914,"_2915":2916,"_2917":2918,"_2919":2920,"_2921":2922,"_2923":2924,"_2925":2926,"_2927":2928,"_2929":2930,"_2931":2932,"_2933":2934,"_2935":2936,"_2937":2938,"_2939":2940,"_2941":2942,"_2943":2944,"_2945":2946},"document.generationInfo.generation",[2850],"bigint","dehydratedState.queries.0.state.data.document.generationInfo.generation",[2850],"dehydratedState.queries.1.state.data.document.generationInfo.generation",[2850],"dehydratedState.queries.1.queryKey.2",[2857],"undefined","dehydratedState.queries.2.state.data.0.createTime.seconds",[2850],"dehydratedState.queries.2.state.data.0.updateTime.seconds",[2850],"dehydratedState.queries.2.state.data.0.sortTime",[2864],"Date","dehydratedState.queries.2.state.data.0.activitySummary.latestCommentTime",[2857],"dehydratedState.queries.2.state.data.0.activitySummary.latestChangeTime.seconds",[2850],"dehydratedState.queries.2.state.data.0.generationInfo.generation",[2850],"dehydratedState.queries.2.state.data.0.redirectInfo",[2857],"dehydratedState.queries.3.state.data.0.createTime.seconds",[2850],"dehydratedState.queries.3.state.data.0.updateTime.seconds",[2850],"dehydratedState.queries.3.state.data.0.sortTime",[2864],"dehydratedState.queries.3.state.data.0.activitySummary.latestCommentTime",[2857],"dehydratedState.queries.3.state.data.0.activitySummary.latestChangeTime.seconds",[2850],"dehydratedState.queries.3.state.data.0.generationInfo.generation",[2850],"dehydratedState.queries.3.state.data.0.redirectInfo",[2857],"dehydratedState.queries.3.state.data.1.createTime.seconds",[2850],"dehydratedState.queries.3.state.data.1.updateTime.seconds",[2850],"dehydratedState.queries.3.state.data.1.sortTime",[2864],"dehydratedState.queries.3.state.data.1.activitySummary.latestCommentTime",[2857],"dehydratedState.queries.3.state.data.1.activitySummary.latestChangeTime.seconds",[2850],"dehydratedState.queries.3.state.data.1.generationInfo.generation",[2850],"dehydratedState.queries.3.state.data.1.redirectInfo",[2857],"dehydratedState.queries.3.state.data.2.createTime.seconds",[2850],"dehydratedState.queries.3.state.data.2.updateTime.seconds",[2850],"dehydratedState.queries.3.state.data.2.sortTime",[2864],"dehydratedState.queries.3.state.data.2.activitySummary.latestCommentTime.seconds",[2850],"dehydratedState.queries.3.state.data.2.activitySummary.latestChangeTime.seconds",[2850],"dehydratedState.queries.3.state.data.2.generationInfo.generation",[2850],"dehydratedState.queries.3.state.data.2.redirectInfo",[2857],"dehydratedState.queries.3.state.data.3.createTime.seconds",[2850],"dehydratedState.queries.3.state.data.3.updateTime.seconds",[2850],"dehydratedState.queries.3.state.data.3.sortTime",[2864],"dehydratedState.queries.3.state.data.3.activitySummary.latestCommentTime",[2857],"dehydratedState.queries.3.state.data.3.activitySummary.latestChangeTime.seconds",[2850],"dehydratedState.queries.3.state.data.3.generationInfo.generation",[2850],"dehydratedState.queries.3.state.data.3.redirectInfo",[2857],"dehydratedState.queries.5.state.data.document.generationInfo.generation",[2850],"dehydratedState.queries.6.state.data.document.generationInfo.generation",[2850],"dehydratedState.queries.7.state.data.document.generationInfo.generation",[2850],"dehydratedState.queries.8.state.data.document.generationInfo.generation",[2850],"dehydratedState.queries.8.queryKey.2",[2857],"dehydratedState.queries.9.state.data.document.generationInfo.generation",[2850],"dehydratedState.queries.9.queryKey.2",[2857],"dehydratedState.queries.10.state.data.metadata.icon",[2857],"dehydratedState.queries.10.state.data.metadata.summary",[2857],"referentialEqualities",{"_2848":2949,"_2860":2950,"_2875":2951,"_2883":2952,"_2887":2953,"_2897":2954,"_2903":2955,"_2911":2956,"_2917":2957,"_2925":2958},[2851,2869],[2873,2867],[2881],[2939],[2889,2895],[2935],[2909],[2931],[2923],[2929],"actionData","errors"]