[{"_1":2,"_1255":-5,"_1256":-5},"loaderData",{"_3":4,"_12":13},"root",{"_5":6,"_7":6,"_8":9,"_10":11},"isProd",true,"enableStats","domain","hyper.media","siteHost","ui-with-state-machines.hyper.media","routes/$",{"_14":15,"_1197":1198},"json",{"_16":17,"_18":19,"_20":-5,"_21":-5,"_22":-5,"_23":24,"_25":-5,"_26":27,"_500":6,"_37":501,"_511":-5,"_512":513,"_1188":1189,"_1190":24,"_10":1011,"_1191":1011,"_1192":1193,"_1194":1195},"prefersLanguages",[],"viewTerm","comments","panelParam","openComment","accountUid","isInspect",false,"inspectTab","document",{"_28":29,"_476":40,"_477":478,"_479":480,"_481":482,"_483":484,"_485":484,"_486":487,"_491":492,"_493":40,"_494":495,"_498":499},"content",[30,49,112,146,218,255,303,317,329,336,364,412,469],{"_31":32,"_33":34},"children",[],"block",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48},"type","Paragraph","id","nPlgMUSi","revision","bafyreic4j7bvslgeusgqsr436vww4wfnkjnsmxplkzpmnmxq5egw3vqogy","attributes",{},"annotations",[],"text","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.","link","",{"_31":50,"_33":104},[51,58,74,85,97],{"_31":52,"_33":53},[],{"_35":36,"_37":54,"_39":40,"_41":55,"_43":56,"_45":57,"_47":48},"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:",{"_31":59,"_33":60},[],{"_35":36,"_37":61,"_39":40,"_41":62,"_43":63,"_45":73,"_47":48},"jIP2FpLs",{},[64],{"_35":65,"_66":67,"_69":70,"_41":72,"_47":48},"Bold","starts",[68],0,"ends",[71],7,{},"Estados – los diferentes modos en los que puede estar tu UI",{"_31":75,"_33":76},[],{"_35":36,"_37":77,"_39":40,"_41":78,"_43":79,"_45":84,"_47":48},"qfC42utM",{},[80],{"_35":65,"_66":81,"_69":82,"_41":83,"_47":48},[68],[71],{},"Eventos – las cosas que ocurren y desencadenan cambios",{"_31":86,"_33":87},[],{"_35":36,"_37":88,"_39":40,"_41":89,"_43":90,"_45":96,"_47":48},"nWwchquP",{},[91],{"_35":65,"_66":92,"_69":93,"_41":95,"_47":48},[68],[94],12,{},"Transiciones – cómo pasas de un estado a otro",{"_31":98,"_33":99},[],{"_35":36,"_37":100,"_39":40,"_41":101,"_43":102,"_45":103,"_47":48},"MiMfv3gk",{},[],"Una vez que entiendes esto, incluso los flujos más complejos empiezan a parecer… obvios.",{"_35":105,"_37":106,"_39":40,"_41":107,"_43":110,"_45":111,"_47":48},"Heading","aT6zvM2V",{"_108":109},"childrenType","Group",[],"✨ Introducción: La base de toda máquina de estado",{"_31":113,"_33":141},[114,121,134],{"_31":115,"_33":116},[],{"_35":36,"_37":117,"_39":40,"_41":118,"_43":119,"_45":120,"_47":48},"ThfTO4um",{},[],"Un estado es simplemente una etiqueta para una condición en la que se encuentra tu UI.",{"_31":122,"_33":123},[],{"_35":36,"_37":124,"_39":40,"_41":125,"_43":126,"_45":133,"_47":48},"5iUfOLIx",{},[127],{"_35":65,"_66":128,"_69":130,"_41":132,"_47":48},[129],2,[131],10,{},"🔁 Ejemplo: Un interruptor tiene dos estados: activo e inactivo. Un formulario podría tener: inactivo, validando, enviando, éxito, error.",{"_31":135,"_33":136},[],{"_35":36,"_37":137,"_39":40,"_41":138,"_43":139,"_45":140,"_47":48},"1lHMzgcp",{},[],"Los defines de antemano, y tu componente solo puede estar en uno de ellos a la vez.",{"_35":105,"_37":142,"_39":40,"_41":143,"_43":144,"_45":145,"_47":48},"sj8G5sJS",{"_108":109},[],"🧠 ¿Qué es un estado?",{"_31":147,"_33":213},[148,155,206],{"_31":149,"_33":150},[],{"_35":36,"_37":151,"_39":40,"_41":152,"_43":153,"_45":154,"_47":48},"Zk4APSV3",{},[],"Un evento es algo que sucede, normalmente desencadenado por el usuario o por el sistema.",{"_31":156,"_33":196},[157,170,183],{"_31":158,"_33":159},[],{"_35":36,"_37":160,"_39":40,"_41":161,"_43":162,"_45":169,"_47":48},"rhZCFfDM",{},[163],{"_35":164,"_66":165,"_69":166,"_41":168,"_47":48},"Code",[131],[167],16,{},"Un clic → TOGGLE",{"_31":171,"_33":172},[],{"_35":36,"_37":173,"_39":40,"_41":174,"_43":175,"_45":182,"_47":48},"WNl0XeAZ",{},[176],{"_35":164,"_66":177,"_69":179,"_41":181,"_47":48},[178],28,[180],34,{},"El envío de un formulario → SUBMIT",{"_31":184,"_33":185},[],{"_35":36,"_37":186,"_39":40,"_41":187,"_43":188,"_45":195,"_47":48},"FtvXRHm9",{},[189],{"_35":164,"_66":190,"_69":192,"_41":194,"_47":48},[191],29,[193],36,{},"Una llamada a la API falla → FAILURE",{"_35":105,"_37":197,"_39":40,"_41":198,"_43":199,"_45":205,"_47":48},"UN3_FArK",{"_108":109},[200],{"_35":65,"_66":201,"_69":202,"_41":204,"_47":48},[129],[203],11,{},"👇 Ejemplos:",{"_31":207,"_33":208},[],{"_35":36,"_37":209,"_39":40,"_41":210,"_43":211,"_45":212,"_47":48},"KnLkBNRE",{},[],"Los eventos no hacen nada por sí solos: le piden a la máquina que cambie.",{"_35":105,"_37":214,"_39":40,"_41":215,"_43":216,"_45":217,"_47":48},"KI5RMkff",{"_108":109},[],"⚡ ¿Qué es un evento?",{"_31":219,"_33":250},[220,227,234,241],{"_31":221,"_33":222},[],{"_35":36,"_37":223,"_39":40,"_41":224,"_43":225,"_45":226,"_47":48},"eRiC3HbH",{},[],"Una transición es la forma en que la máquina cambia de un estado a otro en respuesta a un evento.",{"_31":228,"_33":229},[],{"_35":36,"_37":230,"_39":40,"_41":231,"_43":232,"_45":233,"_47":48},"sTUllFZO",{},[],"Piensa en ello así: “Cuando estoy en [este estado] y ocurre [este evento], paso a [aquel estado]”.",{"_31":235,"_33":236},[],{"_35":36,"_37":237,"_39":40,"_41":238,"_43":239,"_45":240,"_47":48},"nRy05Def",{},[],"En XState, se ve así:",{"_31":242,"_33":243},[],{"_35":164,"_37":244,"_39":40,"_41":245,"_43":248,"_45":249,"_47":48},"jw01korP",{"_246":247},"language","typescript",[],"createMachine({\n initial: 'idle',\n states: {\n idle: {\n on: { SUBMIT: 'submitting' }\n },\n submitting: {\n on: {\n SUCCESS: 'success',\n FAILURE: 'error'\n }\n },\n success: {},\n error: {}\n }\n});\n",{"_35":105,"_37":251,"_39":40,"_41":252,"_43":253,"_45":254,"_47":48},"b9yA3T2X",{"_108":109},[],"🔄 ¿Qué es una transición?",{"_31":256,"_33":298},[257,264,271,284,291],{"_31":258,"_33":259},[],{"_35":36,"_37":260,"_39":40,"_41":261,"_43":262,"_45":263,"_47":48},"w5f_KLu9",{},[],"Porque defines explícitamente los estados y las transiciones, evitas:",{"_31":265,"_33":266},[],{"_35":36,"_37":267,"_39":40,"_41":268,"_43":269,"_45":270,"_47":48},"_FQcH6ym",{},[],"Condiciones ambiguas",{"_31":272,"_33":273},[],{"_35":36,"_37":274,"_39":40,"_41":275,"_43":276,"_45":283,"_47":48},"fLuK_gFX",{},[277],{"_35":164,"_66":278,"_69":280,"_41":282,"_47":48},[279],38,[281],58,{},"Combinaciones inválidas (por ejemplo, isLoading && isError)",{"_31":285,"_33":286},[],{"_35":36,"_37":287,"_39":40,"_41":288,"_43":289,"_45":290,"_47":48},"Y3rnnK72",{},[],"Errores del tipo “¿en qué parte del flujo estoy?”",{"_31":292,"_33":293},[],{"_35":36,"_37":294,"_39":40,"_41":295,"_43":296,"_45":297,"_47":48},"gnu6Ubhe",{},[],"La máquina no permitirá transiciones que no estén definidas. Eso es seguridad por diseño.",{"_35":105,"_37":299,"_39":40,"_41":300,"_43":301,"_45":302,"_47":48},"Sxtoy9jJ",{"_108":109},[],"🧪 Por qué esta estructura es poderosa",{"_31":304,"_33":312},[305],{"_31":306,"_33":307},[],{"_35":36,"_37":308,"_39":40,"_41":309,"_43":310,"_45":311,"_47":48},"Hdh00UbF",{},[],"Aquí está ese formulario como un diagrama de máquina de estados:",{"_35":105,"_37":313,"_39":40,"_41":314,"_43":315,"_45":316,"_47":48},"SiAWtzba",{"_108":109},[],"Visualízalo",{"_31":318,"_33":319},[],{"_35":320,"_37":321,"_39":40,"_41":322,"_43":327,"_45":48,"_47":328},"Button","Qztq6NIW",{"_108":109,"_323":324,"_325":326},"name","👉 Open in Stately.ai","alignment","center",[],"https://stately.ai/registry/editor/a3732429-1a6a-4304-81dc-7344199eb5c2?mode=Simulate&machineId=36c1ed61-65d0-40a0-a8a9-aac1bcc79275",{"_31":330,"_33":331},[],{"_35":36,"_37":332,"_39":40,"_41":333,"_43":334,"_45":335,"_47":48},"BHys06pF",{},[],"Este tipo de diagramas no solo se ven bien: son documentación viva de cómo se comporta tu aplicación.",{"_31":337,"_33":359},[338,345,352],{"_31":339,"_33":340},[],{"_35":36,"_37":341,"_39":40,"_41":342,"_43":343,"_45":344,"_47":48},"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:",{"_31":346,"_33":347},[],{"_35":164,"_37":348,"_39":40,"_41":349,"_43":350,"_45":351,"_47":48},"IcApY0_E",{"_246":247},[],"send({ type: 'SUBMIT' });",{"_31":353,"_33":354},[],{"_35":36,"_37":355,"_39":40,"_41":356,"_43":357,"_45":358,"_47":48},"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.",{"_35":105,"_37":360,"_39":40,"_41":361,"_43":362,"_45":363,"_47":48},"GJOCK72q",{"_108":109},[],"🧠 Consejo profesional: Los eventos son la API de tu componente",{"_31":365,"_33":407},[366,400],{"_31":367,"_33":394},[368,375,387],{"_31":369,"_33":370},[],{"_35":36,"_37":371,"_39":40,"_41":372,"_43":373,"_45":374,"_47":48},"e5NO78XQ",{},[],"✅ Configurar XState en un proyecto de React",{"_31":376,"_33":377},[],{"_35":36,"_37":378,"_39":40,"_41":379,"_43":380,"_45":386,"_47":48},"gOcbRQST",{},[381],{"_35":164,"_66":382,"_69":383,"_41":385,"_47":48},[71],[384],17,{},"✅ Usar useMachine",{"_31":388,"_33":389},[],{"_35":36,"_37":390,"_39":40,"_41":391,"_43":392,"_45":393,"_47":48},"xbswMrMQ",{},[],"✅ Conectar el estado a tu UI",{"_35":36,"_37":395,"_39":40,"_41":396,"_43":398,"_45":399,"_47":48},"auzgGp-e",{"_108":397},"Unordered",[],"En la próxima edición, pasaremos a la práctica:",{"_31":401,"_33":402},[],{"_35":36,"_37":403,"_39":40,"_41":404,"_43":405,"_45":406,"_47":48},"m5S71DiW",{},[],"Vamos a construir una máquina real y conectarla a un componente real.",{"_35":105,"_37":408,"_39":40,"_41":409,"_43":410,"_45":411,"_47":48},"LtzvR5Za",{"_108":109},[],"Próximamente: Modelando UI con XState",{"_31":413,"_33":464},[414,442,457],{"_31":415,"_33":437},[416,423,430],{"_31":417,"_33":418},[],{"_35":36,"_37":419,"_39":40,"_41":420,"_43":421,"_45":422,"_47":48},"8x-QcrCV",{},[],"¿Cuáles son los estados posibles?",{"_31":424,"_33":425},[],{"_35":36,"_37":426,"_39":40,"_41":427,"_43":428,"_45":429,"_47":48},"YpkGf8Lx",{},[],"¿Qué eventos pueden ocurrir?",{"_31":431,"_33":432},[],{"_35":36,"_37":433,"_39":40,"_41":434,"_43":435,"_45":436,"_47":48},"7kTenZrb",{},[],"¿Cómo pasas de uno a otro?",{"_35":36,"_37":438,"_39":40,"_41":439,"_43":440,"_45":441,"_47":48},"aOqG-4mD",{"_108":397},[],"Elige una UI pequeña en tu aplicación (un interruptor, botón, formulario, etc.) y responde:",{"_31":443,"_33":444},[],{"_35":36,"_37":445,"_39":40,"_41":446,"_43":447,"_45":456,"_47":48},"XbDu_Lgl",{},[448],{"_35":449,"_66":450,"_69":452,"_41":454,"_47":455},"Link",[451],32,[453],42,{},"http://Stately.ai","Intenta modelarlo en papel o en Stately.ai.",{"_31":458,"_33":459},[],{"_35":36,"_37":460,"_39":40,"_41":461,"_43":462,"_45":463,"_47":48},"j37xrF0t",{},[],"Responde con tu flujo; me encantaría destacar algunos en futuras ediciones.",{"_35":105,"_37":465,"_39":40,"_41":466,"_43":467,"_45":468,"_47":48},"uBy3t0xH",{"_108":109},[],"💡 Prueba esto",{"_31":470,"_33":471},[],{"_35":36,"_37":472,"_39":40,"_41":473,"_43":474,"_45":475,"_47":48},"kMauQsw-",{},[],"Hasta la próxima,\nHoracio","version","account","z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp","authors",[478],"path","/content/estados-eventos-y-transiciones-desmitificados","createTime","2026-03-25T09:56:26.729Z","updateTime","metadata",{"_323":488,"_489":490},"Estados, eventos y transiciones, desmitificados","cover","ipfs://bafybeibu6gd4vij4zi7rpjhgp7au3bhjqf6yumgb35gof4wjusq3sfm2nu","detachedBlocks",{},"genesis","generationInfo",{"_493":40,"_496":497},"generation","1774432586761","visibility","PUBLIC","isLatest",{"_481":502,"_476":40,"_504":24,"_505":478,"_37":506,"_507":-5,"_508":-5,"_509":-5,"_510":-5},[28,503],"estados-eventos-y-transiciones-desmitificados","latest","uid","hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/estados-eventos-y-transiciones-desmitificados","blockRef","blockRange","hostname","scheme","siteHomeIcon","dehydratedState",{"_514":515,"_516":517},"mutations",[],"queries",[518,850,1022,1086,1092,1105,1176],{"_519":520,"_845":846,"_848":849},"state",{"_521":522,"_830":831,"_832":833,"_834":-5,"_835":68,"_836":68,"_837":68,"_838":-5,"_839":-5,"_840":24,"_841":842,"_843":844},"data",{"_35":26,"_26":523,"_37":828},{"_28":524,"_476":40,"_477":478,"_479":824,"_481":482,"_483":484,"_485":484,"_486":825,"_491":826,"_493":40,"_494":827,"_498":499},[525,530,572,596,647,672,706,716,721,726,746,780,819],{"_31":526,"_33":527},[],{"_35":36,"_37":38,"_39":40,"_41":528,"_43":529,"_45":46,"_47":48},{},[],{"_31":531,"_33":569},[532,537,546,555,564],{"_31":533,"_33":534},[],{"_35":36,"_37":54,"_39":40,"_41":535,"_43":536,"_45":57,"_47":48},{},[],{"_31":538,"_33":539},[],{"_35":36,"_37":61,"_39":40,"_41":540,"_43":541,"_45":73,"_47":48},{},[542],{"_35":65,"_66":543,"_69":544,"_41":545,"_47":48},[68],[71],{},{"_31":547,"_33":548},[],{"_35":36,"_37":77,"_39":40,"_41":549,"_43":550,"_45":84,"_47":48},{},[551],{"_35":65,"_66":552,"_69":553,"_41":554,"_47":48},[68],[71],{},{"_31":556,"_33":557},[],{"_35":36,"_37":88,"_39":40,"_41":558,"_43":559,"_45":96,"_47":48},{},[560],{"_35":65,"_66":561,"_69":562,"_41":563,"_47":48},[68],[94],{},{"_31":565,"_33":566},[],{"_35":36,"_37":100,"_39":40,"_41":567,"_43":568,"_45":103,"_47":48},{},[],{"_35":105,"_37":106,"_39":40,"_41":570,"_43":571,"_45":111,"_47":48},{"_108":109},[],{"_31":573,"_33":593},[574,579,588],{"_31":575,"_33":576},[],{"_35":36,"_37":117,"_39":40,"_41":577,"_43":578,"_45":120,"_47":48},{},[],{"_31":580,"_33":581},[],{"_35":36,"_37":124,"_39":40,"_41":582,"_43":583,"_45":133,"_47":48},{},[584],{"_35":65,"_66":585,"_69":586,"_41":587,"_47":48},[129],[131],{},{"_31":589,"_33":590},[],{"_35":36,"_37":137,"_39":40,"_41":591,"_43":592,"_45":140,"_47":48},{},[],{"_35":105,"_37":142,"_39":40,"_41":594,"_43":595,"_45":145,"_47":48},{"_108":109},[],{"_31":597,"_33":644},[598,603,639],{"_31":599,"_33":600},[],{"_35":36,"_37":151,"_39":40,"_41":601,"_43":602,"_45":154,"_47":48},{},[],{"_31":604,"_33":632},[605,614,623],{"_31":606,"_33":607},[],{"_35":36,"_37":160,"_39":40,"_41":608,"_43":609,"_45":169,"_47":48},{},[610],{"_35":164,"_66":611,"_69":612,"_41":613,"_47":48},[131],[167],{},{"_31":615,"_33":616},[],{"_35":36,"_37":173,"_39":40,"_41":617,"_43":618,"_45":182,"_47":48},{},[619],{"_35":164,"_66":620,"_69":621,"_41":622,"_47":48},[178],[180],{},{"_31":624,"_33":625},[],{"_35":36,"_37":186,"_39":40,"_41":626,"_43":627,"_45":195,"_47":48},{},[628],{"_35":164,"_66":629,"_69":630,"_41":631,"_47":48},[191],[193],{},{"_35":105,"_37":197,"_39":40,"_41":633,"_43":634,"_45":205,"_47":48},{"_108":109},[635],{"_35":65,"_66":636,"_69":637,"_41":638,"_47":48},[129],[203],{},{"_31":640,"_33":641},[],{"_35":36,"_37":209,"_39":40,"_41":642,"_43":643,"_45":212,"_47":48},{},[],{"_35":105,"_37":214,"_39":40,"_41":645,"_43":646,"_45":217,"_47":48},{"_108":109},[],{"_31":648,"_33":669},[649,654,659,664],{"_31":650,"_33":651},[],{"_35":36,"_37":223,"_39":40,"_41":652,"_43":653,"_45":226,"_47":48},{},[],{"_31":655,"_33":656},[],{"_35":36,"_37":230,"_39":40,"_41":657,"_43":658,"_45":233,"_47":48},{},[],{"_31":660,"_33":661},[],{"_35":36,"_37":237,"_39":40,"_41":662,"_43":663,"_45":240,"_47":48},{},[],{"_31":665,"_33":666},[],{"_35":164,"_37":244,"_39":40,"_41":667,"_43":668,"_45":249,"_47":48},{"_246":247},[],{"_35":105,"_37":251,"_39":40,"_41":670,"_43":671,"_45":254,"_47":48},{"_108":109},[],{"_31":673,"_33":703},[674,679,684,693,698],{"_31":675,"_33":676},[],{"_35":36,"_37":260,"_39":40,"_41":677,"_43":678,"_45":263,"_47":48},{},[],{"_31":680,"_33":681},[],{"_35":36,"_37":267,"_39":40,"_41":682,"_43":683,"_45":270,"_47":48},{},[],{"_31":685,"_33":686},[],{"_35":36,"_37":274,"_39":40,"_41":687,"_43":688,"_45":283,"_47":48},{},[689],{"_35":164,"_66":690,"_69":691,"_41":692,"_47":48},[279],[281],{},{"_31":694,"_33":695},[],{"_35":36,"_37":287,"_39":40,"_41":696,"_43":697,"_45":290,"_47":48},{},[],{"_31":699,"_33":700},[],{"_35":36,"_37":294,"_39":40,"_41":701,"_43":702,"_45":297,"_47":48},{},[],{"_35":105,"_37":299,"_39":40,"_41":704,"_43":705,"_45":302,"_47":48},{"_108":109},[],{"_31":707,"_33":713},[708],{"_31":709,"_33":710},[],{"_35":36,"_37":308,"_39":40,"_41":711,"_43":712,"_45":311,"_47":48},{},[],{"_35":105,"_37":313,"_39":40,"_41":714,"_43":715,"_45":316,"_47":48},{"_108":109},[],{"_31":717,"_33":718},[],{"_35":320,"_37":321,"_39":40,"_41":719,"_43":720,"_45":48,"_47":328},{"_108":109,"_323":324,"_325":326},[],{"_31":722,"_33":723},[],{"_35":36,"_37":332,"_39":40,"_41":724,"_43":725,"_45":335,"_47":48},{},[],{"_31":727,"_33":743},[728,733,738],{"_31":729,"_33":730},[],{"_35":36,"_37":341,"_39":40,"_41":731,"_43":732,"_45":344,"_47":48},{},[],{"_31":734,"_33":735},[],{"_35":164,"_37":348,"_39":40,"_41":736,"_43":737,"_45":351,"_47":48},{"_246":247},[],{"_31":739,"_33":740},[],{"_35":36,"_37":355,"_39":40,"_41":741,"_43":742,"_45":358,"_47":48},{},[],{"_35":105,"_37":360,"_39":40,"_41":744,"_43":745,"_45":363,"_47":48},{"_108":109},[],{"_31":747,"_33":777},[748,772],{"_31":749,"_33":769},[750,755,764],{"_31":751,"_33":752},[],{"_35":36,"_37":371,"_39":40,"_41":753,"_43":754,"_45":374,"_47":48},{},[],{"_31":756,"_33":757},[],{"_35":36,"_37":378,"_39":40,"_41":758,"_43":759,"_45":386,"_47":48},{},[760],{"_35":164,"_66":761,"_69":762,"_41":763,"_47":48},[71],[384],{},{"_31":765,"_33":766},[],{"_35":36,"_37":390,"_39":40,"_41":767,"_43":768,"_45":393,"_47":48},{},[],{"_35":36,"_37":395,"_39":40,"_41":770,"_43":771,"_45":399,"_47":48},{"_108":397},[],{"_31":773,"_33":774},[],{"_35":36,"_37":403,"_39":40,"_41":775,"_43":776,"_45":406,"_47":48},{},[],{"_35":105,"_37":408,"_39":40,"_41":778,"_43":779,"_45":411,"_47":48},{"_108":109},[],{"_31":781,"_33":816},[782,802,811],{"_31":783,"_33":799},[784,789,794],{"_31":785,"_33":786},[],{"_35":36,"_37":419,"_39":40,"_41":787,"_43":788,"_45":422,"_47":48},{},[],{"_31":790,"_33":791},[],{"_35":36,"_37":426,"_39":40,"_41":792,"_43":793,"_45":429,"_47":48},{},[],{"_31":795,"_33":796},[],{"_35":36,"_37":433,"_39":40,"_41":797,"_43":798,"_45":436,"_47":48},{},[],{"_35":36,"_37":438,"_39":40,"_41":800,"_43":801,"_45":441,"_47":48},{"_108":397},[],{"_31":803,"_33":804},[],{"_35":36,"_37":445,"_39":40,"_41":805,"_43":806,"_45":456,"_47":48},{},[807],{"_35":449,"_66":808,"_69":809,"_41":810,"_47":455},[451],[453],{},{"_31":812,"_33":813},[],{"_35":36,"_37":460,"_39":40,"_41":814,"_43":815,"_45":463,"_47":48},{},[],{"_35":105,"_37":465,"_39":40,"_41":817,"_43":818,"_45":468,"_47":48},{"_108":109},[],{"_31":820,"_33":821},[],{"_35":36,"_37":472,"_39":40,"_41":822,"_43":823,"_45":475,"_47":48},{},[],[478],{"_323":488,"_489":490},{},{"_493":40,"_496":497},{"_37":506,"_505":478,"_481":829,"_476":40,"_507":-5,"_508":-5,"_509":-5,"_510":-5,"_504":24},[28,503],"dataUpdateCount",1,"dataUpdatedAt",1780977431463,"error","errorUpdateCount","errorUpdatedAt","fetchFailureCount","fetchFailureReason","fetchMeta","isInvalidated","status","success","fetchStatus","idle","queryKey",[847,506,40,24],"ENTITY","queryHash","[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/estados-eventos-y-transiciones-desmitificados\",\"bafyreic4j7bvslgeusgqsr436vww4wfnkjnsmxplkzpmnmxq5egw3vqogy\",false]",{"_519":851,"_845":1020,"_848":1021},{"_521":852,"_830":831,"_832":1019,"_834":-5,"_835":68,"_836":68,"_837":68,"_838":-5,"_839":-5,"_840":24,"_841":842,"_843":844},{"_35":26,"_26":853,"_37":1016},{"_28":854,"_476":1004,"_477":478,"_479":1005,"_481":48,"_483":1006,"_485":1007,"_486":1008,"_491":1012,"_493":1013,"_494":1014,"_498":499},[855,863,875,888,895,942,963,971],{"_31":856,"_33":857},[],{"_35":105,"_37":858,"_39":859,"_41":860,"_43":861,"_45":862,"_47":48},"YS5-lwb-","bafy2bzacedo2fapga62cenj2wqdo7fnnbwssy3ohyonmse3l74fds24nqx4r6",{},[],"Modeling UI with State Machines should be the norm.",{"_31":864,"_33":865},[],{"_35":36,"_37":866,"_39":859,"_41":867,"_43":868,"_45":874,"_47":48},"HIUNgDv3",{},[869],{"_35":65,"_66":870,"_69":871,"_41":873,"_47":48},[68],[872],79,{},"A practical guide to building better interfaces with XState, React & TypeScript",{"_31":876,"_33":877},[],{"_35":36,"_37":878,"_39":859,"_41":879,"_43":880,"_45":887,"_47":48},"RH2vgIqw",{},[881],{"_35":164,"_66":882,"_69":884,"_41":886,"_47":48},[883],132,[885],141,{},"Modern UI development is full of invisible complexity: async flows, conflicting states, edge cases, and fragile logic spread across useEffects and booleans.",{"_31":889,"_33":890},[],{"_35":36,"_37":891,"_39":859,"_41":892,"_43":893,"_45":894,"_47":48},"1i3NXohu",{},[],"This series is about doing it differently.",{"_31":896,"_33":932},[897,904,911,918,925],{"_31":898,"_33":899},[],{"_35":36,"_37":900,"_39":859,"_41":901,"_43":902,"_45":903,"_47":48},"cP0mEJaa",{},[],"Easier to understand",{"_31":905,"_33":906},[],{"_35":36,"_37":907,"_39":859,"_41":908,"_43":909,"_45":910,"_47":48},"mUUMMN68",{},[],"Safer to extend",{"_31":912,"_33":913},[],{"_35":36,"_37":914,"_39":859,"_41":915,"_43":916,"_45":917,"_47":48},"xkA4h4Fv",{},[],"Visually predictable",{"_31":919,"_33":920},[],{"_35":36,"_37":921,"_39":859,"_41":922,"_43":923,"_45":924,"_47":48},"1AW5Zc7P",{},[],"Naturally testable",{"_31":926,"_33":927},[],{"_35":36,"_37":928,"_39":859,"_41":929,"_43":930,"_45":931,"_47":48},"mISZl3dK",{},[],"Easy to Maintain and Refactor",{"_35":36,"_37":933,"_39":859,"_41":934,"_43":935,"_45":941,"_47":48},"mZU_BNzy",{"_108":397},[936],{"_35":65,"_66":937,"_69":938,"_41":940,"_47":48},[180],[939],64,{},"By modeling your UI behavior with state machines and statecharts, you can write code that’s:",{"_31":943,"_33":944},[],{"_35":36,"_37":945,"_39":859,"_41":946,"_43":947,"_45":962,"_47":48},"dT3b7j6V",{},[948],{"_35":65,"_66":949,"_69":955,"_41":961,"_47":48},[950,951,952,953,954],100,134,142,149,168,[956,957,958,959,960],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.",{"_31":964,"_33":965},[],{"_35":36,"_37":966,"_39":967,"_41":968,"_43":969,"_45":970,"_47":48},"-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.",{"_31":972,"_33":999},[973],{"_31":974,"_33":975},[],{"_35":976,"_37":977,"_39":859,"_41":978,"_43":998,"_45":48,"_47":48},"Query","XMasrKG1",{"_979":980,"_981":982,"_983":984,"_997":24},"columnCount",3,"style","List","query",{"_985":986,"_991":992},"includes",[987],{"_988":478,"_481":28,"_989":990},"space","mode","Children","sort",[993],{"_994":24,"_995":996},"reverse","term","UpdateTime","banner",[],{"_35":105,"_37":1000,"_39":859,"_41":1001,"_43":1002,"_45":1003,"_47":48},"JuhiSEfW",{"_108":109},[],"Posts","bafy2bzacecwxx5llylg2hzhhcsf4r3dzvtr22wwk6wnw4qklwcvdp6jxln2ni",[478],"1970-01-01T00:00:00Z","2025-04-24T21:23:24.377Z",{"_323":1009,"_1010":1011},"UI with State Machines","siteUrl","https://ui-with-state-machines.hyper.media",{},"bafy2bzacecztctsdsles75mugrpzhgspjvfnf7atqvn5cmqqbccz4grooldak",{"_493":1013,"_496":1015},"0",{"_37":1017,"_505":478,"_481":1018,"_476":-5,"_507":-5,"_508":-5,"_509":-5,"_510":-5,"_504":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp",[],1780977431472,[847,1017,-5,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",null,true]",{"_519":1023,"_845":1083,"_848":1085},{"_521":1024,"_830":831,"_832":1082,"_834":-5,"_835":68,"_836":68,"_837":68,"_838":-5,"_839":-5,"_840":24,"_841":842,"_843":844},[1025,1060],{"_35":26,"_37":1026,"_481":1030,"_479":1031,"_483":1032,"_485":1037,"_1040":1041,"_493":1042,"_476":1029,"_1043":1044,"_1047":1048,"_494":1055,"_1057":-5,"_486":1058,"_498":499},{"_37":1027,"_505":478,"_481":1028,"_476":1029,"_507":-5,"_508":-5,"_509":-5,"_510":-5,"_504":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content",[28],"bafy2bzacecso2o7bwea36sevjo45wf2phruj5jcoomebikt7btumd3xpcrax2",[28],[478],{"_1033":1034,"_1035":1036},"seconds","1743456714","nanos",453000000,{"_1033":1038,"_1035":1039},"1776378355",213000000,"sortTime","2025-03-31T21:31:54.453Z","bafy2bzacecefqjbssb4ej2oc4wbspy3cvuuadbabfzxrzls56zqiissf6inw4","breadcrumbs",[1045],{"_323":1009,"_481":48,"_1046":24},"isMissing","activitySummary",{"_1049":-5,"_1050":48,"_1051":68,"_1052":1053,"_1054":6},"latestCommentTime","latestCommentId","commentCount","latestChangeTime",{"_1033":1038,"_1035":1039},"isUnread",{"_493":1042,"_496":1056},"1743456714453","redirectInfo",{"_323":1059},"Content",{"_35":26,"_37":1061,"_481":1066,"_479":1067,"_483":1068,"_485":1069,"_1040":1072,"_493":1073,"_476":1065,"_1043":1074,"_1047":1076,"_494":1078,"_1057":-5,"_486":1080,"_498":499},{"_37":1062,"_505":478,"_481":1063,"_476":1065,"_507":-5,"_508":-5,"_509":-5,"_510":-5,"_504":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/home",[1064],"home","bafyreicyjsg763rk6qtlns2wkpxn7uhhqc4t7c5ytd7ll7cd4ev42rgq5u",[1064],[478],{"_1033":1015,"_1035":68},{"_1033":1070,"_1035":1071},"1776190620",425000000,"1970-01-01T00:00:00.000Z","bafyreihqedcuddy2wuyh6dm6cy7pc5yhkdmq4bto7dzbz2bu3v5jsqud2y",[1075],{"_323":1009,"_481":48,"_1046":24},{"_1049":-5,"_1050":48,"_1051":68,"_1052":1077,"_1054":6},{"_1033":1070,"_1035":1071},{"_493":1073,"_496":1079},"1776190620425",{"_323":1081},"Home",1780977431461,[1084,1017,990],"DOC_LIST_DIRECTORY","[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",\"Children\"]",{"_519":1087,"_845":1090,"_848":1091},{"_521":1088,"_830":831,"_832":1089,"_834":-5,"_835":68,"_836":68,"_837":68,"_838":-5,"_839":-5,"_840":24,"_841":842,"_843":844},[],1780977431456,[1084,506,990],"[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/estados-eventos-y-transiciones-desmitificados\",\"Children\"]",{"_519":1093,"_845":1102,"_848":1104},{"_521":1094,"_830":831,"_832":1101,"_834":-5,"_835":68,"_836":68,"_837":68,"_838":-5,"_839":-5,"_840":24,"_841":842,"_843":844},{"_1095":831,"_19":68,"_1096":831,"_31":68,"_1097":1098,"_1099":1100},"citations","changes","authorUids",[478],"blocks",{},1780977431556,[1103,506],"DOCUMENT_INTERACTION_SUMMARY","[\"DOCUMENT_INTERACTION_SUMMARY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/estados-eventos-y-transiciones-desmitificados\"]",{"_519":1106,"_845":1174,"_848":1175},{"_521":1107,"_830":831,"_832":1082,"_834":-5,"_835":68,"_836":68,"_837":68,"_838":-5,"_839":-5,"_840":24,"_841":842,"_843":844},{"_35":26,"_26":1108,"_37":1172},{"_28":1109,"_476":1029,"_477":478,"_479":1166,"_481":1167,"_483":1041,"_485":1168,"_486":1169,"_491":1170,"_493":1042,"_494":1171,"_498":499},[1110,1137,1144,1152,1159],{"_31":1111,"_33":1131},[1112,1123],{"_31":1113,"_33":1114},[],{"_35":1115,"_37":1116,"_39":1117,"_41":1118,"_43":1121,"_45":48,"_47":1122},"Embed","I01RCHLp","bafy2bzacedffkd4rdzzkikyjdm23zb2evqbqhnwklr5nxlcaod7pynmzj75um",{"_1119":1120},"view","Card",[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong?v=bafy2bzacecxbssfu6tsgckkty6krdldbq232rib3mvbbxhfhi745pqg4m7zsg&l",{"_31":1124,"_33":1125},[],{"_35":1115,"_37":1126,"_39":1127,"_41":1128,"_43":1129,"_45":48,"_47":1130},"TbDjWW-e","bafy2bzaced2hqcefph7tgklninzu5dcebzjmxq67dmjn7puloiksgwttj6gig",{"_1119":1120},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified?v=bafy2bzaceasflmgw6yafc3mygkufwzsrzcjoh5vbpczy532qvitkfsli3icns&l",{"_35":105,"_37":1132,"_39":1133,"_41":1134,"_43":1135,"_45":1136,"_47":48},"SpGu0tBK","bafy2bzaceblppdcojdh2aj4zbh6aax7c6a6ynzvetc2elfxbi44o2mxwvc5go",{"_108":109},[],"English",{"_31":1138,"_33":1139},[],{"_35":105,"_37":1140,"_39":1133,"_41":1141,"_43":1142,"_45":1143,"_47":48},"nvxL-VgX",{},[],"Spanish",{"_31":1145,"_33":1146},[],{"_35":1115,"_37":1147,"_39":1148,"_41":1149,"_43":1150,"_45":48,"_47":1151},"XG17WIWR","bafy2bzacebsxm4y2fsik3g3ovk5kx4kri56g32o6r7dszvekaqugfrqbmhmx6",{"_1119":1120},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal?v=bafy2bzacedeehy4mmf4hniuuxqoww54eacrhpypjtzu5qotzkgrq2bm6lfmqm&l",{"_31":1153,"_33":1154},[],{"_35":1115,"_37":1155,"_39":1156,"_41":1157,"_43":1158,"_45":48,"_47":506},"LsgymWG9uV","bafy2bzacedonvbcc5bzwy2j5r7wnwgaco4rcrpyo5g6zqdugpfbdejp5oodeg",{"_1119":1120},[],{"_31":1160,"_33":1161},[],{"_35":1115,"_37":1162,"_39":1029,"_41":1163,"_43":1164,"_45":48,"_47":1165},"dyEQC00biY",{"_1119":1120},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/why-state-machines-are-a-game-changer-for-ui-development",[478],"/content","2026-04-16T22:25:55.213Z",{"_323":1059},{},{"_493":1042,"_496":1056},{"_37":1027,"_505":478,"_481":1173,"_476":-5,"_507":-5,"_508":-5,"_509":-5,"_510":-5},[28],[847,1027,-5,24],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content\",null,false]",{"_519":1177,"_845":1185,"_848":1187},{"_521":1178,"_830":831,"_832":1184,"_834":-5,"_835":68,"_836":68,"_837":68,"_838":-5,"_839":-5,"_840":24,"_841":842,"_843":844},{"_35":477,"_37":1179,"_486":1181},{"_476":1004,"_505":478,"_37":1017,"_481":1180,"_507":-5,"_508":-5,"_509":-5,"_510":-5},[],{"_323":1009,"_1010":1011,"_1182":-5,"_1183":-5},"icon","summary",1780977431558,[1186,478],"ACCOUNT","[\"ACCOUNT\",\"z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"]","ssrContentHTML","

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.

✨ Introducción: La base de toda máquina de estado

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:

Estados – los diferentes modos en los que puede estar tu UI

Eventos – las cosas que ocurren y desencadenan cambios

Transiciones – cómo pasas de un estado a otro

Una vez que entiendes esto, incluso los flujos más complejos empiezan a parecer… obvios.

🧠 ¿Qué es un estado?

Un estado es simplemente una etiqueta para una condición en la que se encuentra tu UI.

🔁 Ejemplo: Un interruptor tiene dos estados: activo e inactivo. Un formulario podría tener: inactivo, validando, enviando, éxito, error.

Los defines de antemano, y tu componente solo puede estar en uno de ellos a la vez.

⚡ ¿Qué es un evento?

Un evento es algo que sucede, normalmente desencadenado por el usuario o por el sistema.

👇 Ejemplos:

Un clic → TOGGLE

El envío de un formulario → SUBMIT

Una llamada a la API falla → FAILURE

Los eventos no hacen nada por sí solos: le piden a la máquina que cambie.

🔄 ¿Qué es una transición?

Una transición es la forma en que la máquina cambia de un estado a otro en respuesta a un evento.

Piensa en ello así: “Cuando estoy en [este estado] y ocurre [este evento], paso a [aquel estado]”.

En XState, se ve así:

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

🧪 Por qué esta estructura es poderosa

Porque defines explícitamente los estados y las transiciones, evitas:

Condiciones ambiguas

Combinaciones inválidas (por ejemplo, isLoading && isError)

Errores del tipo “¿en qué parte del flujo estoy?”

La máquina no permitirá transiciones que no estén definidas. Eso es seguridad por diseño.

Visualízalo

Aquí está ese formulario como un diagrama de máquina de estados:

Button

Este tipo de diagramas no solo se ven bien: son documentación viva de cómo se comporta tu aplicación.

🧠 Consejo profesional: Los eventos son la API de tu componente

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:

send({ type: 'SUBMIT' });

Eso es todo. A quienes consumen tu componente no les importa tu lógica interna: solo envían eventos y obtienen un comportamiento predecible.

Próximamente: Modelando UI con XState

En la próxima edición, pasaremos a la práctica:

✅ Configurar XState en un proyecto de React
✅ Usar useMachine
✅ Conectar el estado a tu UI

Vamos a construir una máquina real y conectarla a un componente real.

💡 Prueba esto

Elige una UI pequeña en tu aplicación (un interruptor, botón, formulario, etc.) y responde:

¿Cuáles son los estados posibles?
¿Qué eventos pueden ocurrir?
¿Cómo pasas de uno a otro?

Intenta modelarlo en papel o en Stately.ai.

Responde con tu flujo; me encantaría destacar algunos en futuras ediciones.

Hasta la próxima,\nHoracio

","enableWebSigning","origin","homeMetadata",{"_323":1009,"_1010":1011},"originHomeId",{"_505":478,"_37":1017,"_481":1196,"_476":-5,"_507":-5,"_508":-5,"_509":-5,"_510":-5},[],"meta",{"_1199":1200,"_1248":1249},"values",{"_1201":1202,"_1204":1205,"_1206":1207,"_1208":1209,"_1211":1212,"_1213":1214,"_1215":1216,"_1218":1219,"_1220":1221,"_1222":1223,"_1224":1225,"_1226":1227,"_1228":1229,"_1230":1231,"_1232":1233,"_1234":1235,"_1236":1237,"_1238":1239,"_1240":1241,"_1242":1243,"_1244":1245,"_1246":1247},"document.generationInfo.generation",[1203],"bigint","dehydratedState.queries.0.state.data.document.generationInfo.generation",[1203],"dehydratedState.queries.1.state.data.document.generationInfo.generation",[1203],"dehydratedState.queries.1.queryKey.2",[1210],"undefined","dehydratedState.queries.2.state.data.0.createTime.seconds",[1203],"dehydratedState.queries.2.state.data.0.updateTime.seconds",[1203],"dehydratedState.queries.2.state.data.0.sortTime",[1217],"Date","dehydratedState.queries.2.state.data.0.activitySummary.latestCommentTime",[1210],"dehydratedState.queries.2.state.data.0.activitySummary.latestChangeTime.seconds",[1203],"dehydratedState.queries.2.state.data.0.generationInfo.generation",[1203],"dehydratedState.queries.2.state.data.0.redirectInfo",[1210],"dehydratedState.queries.2.state.data.1.createTime.seconds",[1203],"dehydratedState.queries.2.state.data.1.updateTime.seconds",[1203],"dehydratedState.queries.2.state.data.1.sortTime",[1217],"dehydratedState.queries.2.state.data.1.activitySummary.latestCommentTime",[1210],"dehydratedState.queries.2.state.data.1.activitySummary.latestChangeTime.seconds",[1203],"dehydratedState.queries.2.state.data.1.generationInfo.generation",[1203],"dehydratedState.queries.2.state.data.1.redirectInfo",[1210],"dehydratedState.queries.5.state.data.document.generationInfo.generation",[1203],"dehydratedState.queries.5.queryKey.2",[1210],"dehydratedState.queries.6.state.data.metadata.icon",[1210],"dehydratedState.queries.6.state.data.metadata.summary",[1210],"referentialEqualities",{"_1201":1250,"_1206":1251,"_1213":1252,"_1222":1253,"_1228":1254},[1204],[1226],[1220],[1240],[1234],"actionData","errors"]