[{"_1":2,"_1827":-5,"_1828":-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,"_1765":1766},"json",{"_16":17,"_18":19,"_20":-5,"_21":-5,"_22":-5,"_23":24,"_25":-5,"_26":27,"_553":6,"_37":554,"_565":-5,"_566":567,"_1756":1757,"_1758":24,"_10":1095,"_1759":1095,"_1760":1761,"_1762":1763},"prefersLanguages",[],"viewTerm","collaborators","panelParam","openComment","accountUid","isInspect",false,"inspectTab","document",{"_28":29,"_528":529,"_530":531,"_532":533,"_534":535,"_536":537,"_538":539,"_540":541,"_544":545,"_546":40,"_547":548,"_551":552},"content",[30,58,163,211,279,327,363,391,450,476,521],{"_31":32,"_33":34},"children",[],"block",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_56":57,"_54":55},"type","Paragraph","id","fjRaBfkl","revision","bafy2bzacedeehy4mmf4hniuuxqoww54eacrhpypjtzu5qotzkgrq2bm6lfmqm","attributes",{},"annotations",[45],{"_35":46,"_47":48,"_50":51,"_41":53,"_54":55},"Bold","starts",[49],0,"ends",[52],94,{},"link","","text","Por qué las máquinas de estados hacen que la lógica de UI sea más simple, segura y mantenible.",{"_31":59,"_33":156},[60,67,81,125,144],{"_31":61,"_33":62},[],{"_35":36,"_37":63,"_39":40,"_41":64,"_43":65,"_56":66,"_54":55},"OHyPpOph",{},[],"Seamos sinceros: probablemente la lógica de estado en tu componente de React empezó siendo simple.",{"_31":68,"_33":69},[],{"_35":36,"_37":70,"_39":40,"_41":71,"_43":72,"_56":80,"_54":55},"b8z1MO6F",{},[73],{"_35":74,"_47":75,"_50":77,"_41":79,"_54":55},"Code",[76],32,[78],41,{},"Un par de booleanos. Tal vez un useEffect. Lo justo para que funcione.",{"_31":82,"_33":118},[83,90,97,104],{"_31":84,"_33":85},[],{"_35":36,"_37":86,"_39":40,"_41":87,"_43":88,"_56":89,"_54":55},"M1s44QrV",{},[],"Agregaste un estado de carga.",{"_31":91,"_33":92},[],{"_35":36,"_37":93,"_39":40,"_41":94,"_43":95,"_56":96,"_54":55},"D02qRdvK",{},[],"Después, un estado de error.",{"_31":98,"_33":99},[],{"_35":36,"_37":100,"_39":40,"_41":101,"_43":102,"_56":103,"_54":55},"0ERoPIhU",{},[],"Luego, un flujo de reintento.",{"_31":105,"_33":106},[],{"_35":36,"_37":107,"_39":40,"_41":108,"_43":109,"_56":117,"_54":55},"gkpNcmsh",{},[110],{"_35":111,"_47":112,"_50":114,"_41":116,"_54":55},"Italic",[113],43,[115],44,{},"Y finalmente, un caso raro donde hay carga y error al mismo tiempo.",{"_35":36,"_37":119,"_39":40,"_41":120,"_43":123,"_56":124,"_54":55},"rUSJ2AzL",{"_121":122},"childrenType","Unordered",[],"Pero luego las cosas se complicaron:",{"_31":126,"_33":127},[],{"_35":36,"_37":128,"_39":40,"_41":129,"_43":130,"_56":143,"_54":55},"p5QNq2SM",{},[131],{"_35":74,"_47":132,"_50":137,"_41":142,"_54":55},[133,134,113,135,136],22,33,57,84,[138,78,139,140,141],31,55,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.",{"_31":145,"_33":146},[],{"_35":36,"_37":147,"_39":40,"_41":148,"_43":149,"_56":155,"_54":55},"eyCB9JVU",{},[150],{"_35":46,"_47":151,"_50":152,"_41":154,"_54":55},[49],[153],19,{},"¿Te suena familiar?",{"_35":157,"_37":158,"_39":40,"_41":159,"_43":161,"_56":162,"_54":55},"Heading","tFApqOux",{"_121":160},"Group",[],"🤯 El espiral de la lógica en la UI",{"_31":164,"_33":206},[165,172,185],{"_31":166,"_33":167},[],{"_35":36,"_37":168,"_39":40,"_41":169,"_43":170,"_56":171,"_54":55},"AEKT91ke",{},[],"A menudo tratamos el estado de UI como una estructura plana de booleanos o enums.",{"_31":173,"_33":174},[],{"_35":36,"_37":175,"_39":40,"_41":176,"_43":177,"_56":184,"_54":55},"Lak6uEbr",{},[178],{"_35":46,"_47":179,"_50":181,"_41":183,"_54":55},[180],30,[182],37,{},"Pero en realidad, tu UI es un proceso. Una secuencia. Un usuario hace clic, algo sucede, y la UI responde.",{"_31":186,"_33":187},[],{"_35":36,"_37":188,"_39":40,"_41":189,"_43":190,"_56":205,"_54":55},"vJyFJwNW",{},[191,199],{"_35":111,"_47":192,"_50":195,"_41":198,"_54":55},[193,194],15,26,[196,197],21,52,{},{"_35":46,"_47":200,"_50":202,"_41":204,"_54":55},[201],87,[203],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.",{"_35":157,"_37":207,"_39":40,"_41":208,"_43":209,"_56":210,"_54":55},"Mu8Siuih",{"_121":160},[],"🧠 Las UIs no son solo estados — son comportamientos",{"_31":212,"_33":274},[213,226,267],{"_31":214,"_33":215},[],{"_35":36,"_37":216,"_39":40,"_41":217,"_43":218,"_56":225,"_54":55},"QEvxitoI",{},[219],{"_35":46,"_47":220,"_50":222,"_41":224,"_54":55},[221],111,[223],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?",{"_31":227,"_33":262},[228,235,248,255],{"_31":229,"_33":230},[],{"_35":36,"_37":231,"_39":40,"_41":232,"_43":233,"_56":234,"_54":55},"6wCxqQkT",{},[],"Definir todos los estados posibles desde el principio",{"_31":236,"_33":237},[],{"_35":36,"_37":238,"_39":40,"_41":239,"_43":240,"_56":247,"_54":55},"fj1w1QM4",{},[241],{"_35":111,"_47":242,"_50":244,"_41":246,"_54":55},[243],10,[245],14,{},"Describir solo las transiciones válidas",{"_31":249,"_33":250},[],{"_35":36,"_37":251,"_39":40,"_41":252,"_43":253,"_56":254,"_54":55},"Vf_O02H0",{},[],"Eliminar estados imposibles o contradictorios",{"_31":256,"_33":257},[],{"_35":36,"_37":258,"_39":40,"_41":259,"_43":260,"_56":261,"_54":55},"rKjHzj9e",{},[],"Tener un mapa visual de tu lógica — gratis",{"_35":36,"_37":263,"_39":40,"_41":264,"_43":265,"_56":266,"_54":55},"6UX-NmGt",{"_121":122},[],"Con una máquina de estados, puedes:",{"_31":268,"_33":269},[],{"_35":36,"_37":270,"_39":40,"_41":271,"_43":272,"_56":273,"_54":55},"v1NhXtWT",{},[],"Veamos un ejemplo simple.",{"_35":157,"_37":275,"_39":40,"_41":276,"_43":277,"_56":278,"_54":55},"DUC1mm9d",{"_121":160},[],"✅ La solución: modela comportamientos, no solo estados",{"_31":280,"_33":322},[281,290,302,315],{"_31":282,"_33":283},[],{"_35":74,"_37":284,"_39":40,"_41":285,"_43":288,"_56":289,"_54":55},"XiF4W_bT",{"_286":287},"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});",{"_31":291,"_33":292},[],{"_35":36,"_37":293,"_39":40,"_41":294,"_43":295,"_56":301,"_54":55},"QldUzAqM",{},[296],{"_35":74,"_47":297,"_50":298,"_41":300,"_54":55},[49],[299],1,{}," Eso es todo.",{"_31":303,"_33":304},[],{"_35":36,"_37":305,"_39":40,"_41":306,"_43":307,"_56":314,"_54":55},"n22p0HrV",{},[308],{"_35":74,"_47":309,"_50":311,"_41":313,"_54":55},[310],75,[312],83,{},"Una máquina. Dos estados. Un evento. Sin booleanos. Sin condicionales. Sin useState.",{"_31":316,"_33":317},[],{"_35":36,"_37":318,"_39":40,"_41":319,"_43":320,"_56":321,"_54":55},"U0vXZzOq",{},[],"Simple, expresivo y con tipado fuerte.",{"_35":157,"_37":323,"_39":40,"_41":324,"_43":325,"_56":326,"_54":55},"pNhvoVuJ",{"_121":160},[],"🧪 Ejemplo: Toggle con XState",{"_31":328,"_33":358},[329,346],{"_31":330,"_33":331},[],{"_35":332,"_37":333,"_39":40,"_41":334,"_43":335,"_56":344,"_54":345},"Image","P8u8tBvr",{},[336],{"_35":337,"_47":338,"_50":340,"_41":342,"_54":343},"Link",[339],36,[341],46,{},"https://Stately.ai","Diagrama de La Maquina de estado en Stately.ai","ipfs://bafkreidydkqzjcztbuxuzxdc5i3ctfbtzzv6zl3nlvawtnxpo7opl6u2vu",{"_31":347,"_33":348},[],{"_35":36,"_37":349,"_39":40,"_41":350,"_43":351,"_56":357,"_54":55},"Db0EP4it",{},[352],{"_35":111,"_47":353,"_50":355,"_41":356,"_54":55},[354],12,[196],{},"Así es como realmente luce esa máquina:",{"_35":157,"_37":359,"_39":40,"_41":360,"_43":361,"_56":362,"_54":55},"eSQeAvmt",{"_121":160},[],"🔍 Visualízalo",{"_31":364,"_33":383},[365],{"_31":366,"_33":367},[],{"_35":36,"_37":368,"_39":40,"_41":369,"_43":370,"_56":382,"_54":55},"URd-V-EG",{},[371,378],{"_35":337,"_47":372,"_50":374,"_41":376,"_54":377},[373],18,[375],28,{},"https://stately.ai",{"_35":46,"_47":379,"_50":380,"_41":381,"_54":55},[78],[115],{},"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.",{"_35":384,"_37":385,"_39":40,"_41":386,"_43":389,"_56":55,"_54":390},"Button","Acg3cRTw",{"_387":388},"name","👉 Abrir en Stately Visualizer",[],"https://stately.ai/registry/editor/a3732429-1a6a-4304-81dc-7344199eb5c2?machineId=7ac2ca3d-a479-4e37-82c8-5feddf52cc12&mode=Simulate",{"_31":392,"_33":445},[393,433],{"_31":394,"_33":428},[395,402,409,416],{"_31":396,"_33":397},[],{"_35":36,"_37":398,"_39":40,"_41":399,"_43":400,"_56":401,"_54":55},"VZVUUele",{},[],"Simplificar formularios multistep y asistentes",{"_31":403,"_33":404},[],{"_35":36,"_37":405,"_39":40,"_41":406,"_43":407,"_56":408,"_54":55},"I2qrVZ6M",{},[],"Modelar modales, menús desplegables o flujos de onboarding",{"_31":410,"_33":411},[],{"_35":36,"_37":412,"_39":40,"_41":413,"_43":414,"_56":415,"_54":55},"YdIj7JFO",{},[],"Eliminar estados inconsistentes en la UI",{"_31":417,"_33":418},[],{"_35":36,"_37":419,"_39":40,"_41":420,"_43":421,"_56":427,"_54":55},"VN3SHpHQ",{},[422],{"_35":74,"_47":423,"_50":424,"_41":426,"_54":55},[373],[425],27,{},"Reemplazar lógica useEffect con transiciones declarativas",{"_35":36,"_37":429,"_39":40,"_41":430,"_43":431,"_56":432,"_54":55},"WvXW5C6-",{"_121":122},[],"Esto no es solo para toggles. Puedes usar máquinas de estados para:",{"_31":434,"_33":435},[],{"_35":36,"_37":436,"_39":40,"_41":437,"_43":438,"_56":444,"_54":55},"Pcso9TAS",{},[439],{"_35":46,"_47":440,"_50":441,"_41":443,"_54":55},[373],[442],45,{},"Y cuando combinas XState + React + TypeScript, desbloqueas una arquitectura de UI segura, testeable y escalable.",{"_35":157,"_37":446,"_39":40,"_41":447,"_43":448,"_56":449,"_54":55},"pSw85GRo",{"_121":160},[],"🛠️ ¿Por qué importa esto?",{"_31":451,"_33":471},[452,464],{"_31":453,"_33":454},[],{"_35":36,"_37":455,"_39":40,"_41":456,"_43":457,"_56":463,"_54":55},"387A6mYA",{},[458],{"_35":46,"_47":459,"_50":460,"_41":462,"_54":55},[341],[461],72,{},"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.",{"_31":465,"_33":466},[],{"_35":36,"_37":467,"_39":40,"_41":468,"_43":469,"_56":470,"_54":55},"2B9ly-EA",{},[],"Vas a aprender cómo pasar de un estado caótico a un comportamiento modelado en minutos.",{"_35":157,"_37":472,"_39":40,"_41":473,"_43":474,"_56":475,"_54":55},"PI80lQhc",{"_121":160},[],"⏭️ Próximo tema: Estados, Eventos y Transiciones",{"_31":477,"_33":516},[478,485,492,505],{"_31":479,"_33":480},[],{"_35":36,"_37":481,"_39":40,"_41":482,"_43":483,"_56":484,"_54":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.",{"_31":486,"_33":487},[],{"_35":36,"_37":488,"_39":40,"_41":489,"_43":490,"_56":491,"_54":55},"A9Ew_ewx",{},[],"Solo una.",{"_31":493,"_33":494},[],{"_35":36,"_37":495,"_39":40,"_41":496,"_43":497,"_56":504,"_54":55},"UaImp5od",{},[498],{"_35":111,"_47":499,"_50":501,"_41":503,"_54":55},[500],20,[502],54,{},"Y luego pregúntate: ¿fue más fácil razonar sobre esto?",{"_31":506,"_33":507},[],{"_35":36,"_37":508,"_39":40,"_41":509,"_43":510,"_56":515,"_54":55},"OoLM-B_l",{},[511],{"_35":46,"_47":512,"_50":513,"_41":514,"_54":55},[49],[113],{},"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.",{"_35":157,"_37":517,"_39":40,"_41":518,"_43":519,"_56":520,"_54":55},"FtH7CU7e",{"_121":160},[],"💡 Intenta esto",{"_31":522,"_33":523},[],{"_35":36,"_37":524,"_39":40,"_41":525,"_43":526,"_56":527,"_54":55},"Xssa7w9u",{},[],"Gracias por leer,\nHoracio","version","bafy2bzacebqndi6iq4jd2ystx3ihuosd4pcsujctvhem273ps3kdp3nadlfie","account","z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp","authors",[531],"path","/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal","createTime","2025-04-01T04:43:40.787Z","updateTime","2025-04-01T08:21:06.427Z","metadata",{"_387":542,"_543":345},"Estas gestionando el estado de tus Interfaces mal","cover","detachedBlocks",{},"genesis","generationInfo",{"_546":40,"_549":550},"generation","1743482620787","visibility","PUBLIC","isLatest",{"_534":555,"_528":529,"_558":24,"_559":531,"_37":560,"_561":-5,"_562":-5,"_563":-5,"_564":-5},[28,556,557],"you-are-writing-ui-state-wrong","estas-gestionando-el-estado-de-tus-interfaces-mal","latest","uid","hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal","blockRef","blockRange","hostname","scheme","siteHomeIcon","dehydratedState",{"_568":569,"_570":571},"mutations",[],"queries",[572,933,1106,1170,1176,1191,1264,1744],{"_573":574,"_928":929,"_931":932},"state",{"_575":576,"_914":299,"_915":916,"_917":-5,"_918":49,"_919":49,"_920":49,"_921":-5,"_922":-5,"_923":24,"_924":925,"_926":927},"data",{"_35":26,"_26":577,"_37":912},{"_28":578,"_528":529,"_530":531,"_532":908,"_534":535,"_536":537,"_538":539,"_540":909,"_544":910,"_546":40,"_547":911,"_551":552},[579,588,654,686,734,767,790,808,851,870,903],{"_31":580,"_33":581},[],{"_35":36,"_37":38,"_39":40,"_41":582,"_43":583,"_56":57,"_54":55},{},[584],{"_35":46,"_47":585,"_50":586,"_41":587,"_54":55},[49],[52],{},{"_31":589,"_33":651},[590,595,604,633,642],{"_31":591,"_33":592},[],{"_35":36,"_37":63,"_39":40,"_41":593,"_43":594,"_56":66,"_54":55},{},[],{"_31":596,"_33":597},[],{"_35":36,"_37":70,"_39":40,"_41":598,"_43":599,"_56":80,"_54":55},{},[600],{"_35":74,"_47":601,"_50":602,"_41":603,"_54":55},[76],[78],{},{"_31":605,"_33":630},[606,611,616,621],{"_31":607,"_33":608},[],{"_35":36,"_37":86,"_39":40,"_41":609,"_43":610,"_56":89,"_54":55},{},[],{"_31":612,"_33":613},[],{"_35":36,"_37":93,"_39":40,"_41":614,"_43":615,"_56":96,"_54":55},{},[],{"_31":617,"_33":618},[],{"_35":36,"_37":100,"_39":40,"_41":619,"_43":620,"_56":103,"_54":55},{},[],{"_31":622,"_33":623},[],{"_35":36,"_37":107,"_39":40,"_41":624,"_43":625,"_56":117,"_54":55},{},[626],{"_35":111,"_47":627,"_50":628,"_41":629,"_54":55},[113],[115],{},{"_35":36,"_37":119,"_39":40,"_41":631,"_43":632,"_56":124,"_54":55},{"_121":122},[],{"_31":634,"_33":635},[],{"_35":36,"_37":128,"_39":40,"_41":636,"_43":637,"_56":143,"_54":55},{},[638],{"_35":74,"_47":639,"_50":640,"_41":641,"_54":55},[133,134,113,135,136],[138,78,139,140,141],{},{"_31":643,"_33":644},[],{"_35":36,"_37":147,"_39":40,"_41":645,"_43":646,"_56":155,"_54":55},{},[647],{"_35":46,"_47":648,"_50":649,"_41":650,"_54":55},[49],[153],{},{"_35":157,"_37":158,"_39":40,"_41":652,"_43":653,"_56":162,"_54":55},{"_121":160},[],{"_31":655,"_33":683},[656,661,670],{"_31":657,"_33":658},[],{"_35":36,"_37":168,"_39":40,"_41":659,"_43":660,"_56":171,"_54":55},{},[],{"_31":662,"_33":663},[],{"_35":36,"_37":175,"_39":40,"_41":664,"_43":665,"_56":184,"_54":55},{},[666],{"_35":46,"_47":667,"_50":668,"_41":669,"_54":55},[180],[182],{},{"_31":671,"_33":672},[],{"_35":36,"_37":188,"_39":40,"_41":673,"_43":674,"_56":205,"_54":55},{},[675,679],{"_35":111,"_47":676,"_50":677,"_41":678,"_54":55},[193,194],[196,197],{},{"_35":46,"_47":680,"_50":681,"_41":682,"_54":55},[201],[203],{},{"_35":157,"_37":207,"_39":40,"_41":684,"_43":685,"_56":210,"_54":55},{"_121":160},[],{"_31":687,"_33":731},[688,697,726],{"_31":689,"_33":690},[],{"_35":36,"_37":216,"_39":40,"_41":691,"_43":692,"_56":225,"_54":55},{},[693],{"_35":46,"_47":694,"_50":695,"_41":696,"_54":55},[221],[223],{},{"_31":698,"_33":723},[699,704,713,718],{"_31":700,"_33":701},[],{"_35":36,"_37":231,"_39":40,"_41":702,"_43":703,"_56":234,"_54":55},{},[],{"_31":705,"_33":706},[],{"_35":36,"_37":238,"_39":40,"_41":707,"_43":708,"_56":247,"_54":55},{},[709],{"_35":111,"_47":710,"_50":711,"_41":712,"_54":55},[243],[245],{},{"_31":714,"_33":715},[],{"_35":36,"_37":251,"_39":40,"_41":716,"_43":717,"_56":254,"_54":55},{},[],{"_31":719,"_33":720},[],{"_35":36,"_37":258,"_39":40,"_41":721,"_43":722,"_56":261,"_54":55},{},[],{"_35":36,"_37":263,"_39":40,"_41":724,"_43":725,"_56":266,"_54":55},{"_121":122},[],{"_31":727,"_33":728},[],{"_35":36,"_37":270,"_39":40,"_41":729,"_43":730,"_56":273,"_54":55},{},[],{"_35":157,"_37":275,"_39":40,"_41":732,"_43":733,"_56":278,"_54":55},{"_121":160},[],{"_31":735,"_33":764},[736,741,750,759],{"_31":737,"_33":738},[],{"_35":74,"_37":284,"_39":40,"_41":739,"_43":740,"_56":289,"_54":55},{"_286":287},[],{"_31":742,"_33":743},[],{"_35":36,"_37":293,"_39":40,"_41":744,"_43":745,"_56":301,"_54":55},{},[746],{"_35":74,"_47":747,"_50":748,"_41":749,"_54":55},[49],[299],{},{"_31":751,"_33":752},[],{"_35":36,"_37":305,"_39":40,"_41":753,"_43":754,"_56":314,"_54":55},{},[755],{"_35":74,"_47":756,"_50":757,"_41":758,"_54":55},[310],[312],{},{"_31":760,"_33":761},[],{"_35":36,"_37":318,"_39":40,"_41":762,"_43":763,"_56":321,"_54":55},{},[],{"_35":157,"_37":323,"_39":40,"_41":765,"_43":766,"_56":326,"_54":55},{"_121":160},[],{"_31":768,"_33":787},[769,778],{"_31":770,"_33":771},[],{"_35":332,"_37":333,"_39":40,"_41":772,"_43":773,"_56":344,"_54":345},{},[774],{"_35":337,"_47":775,"_50":776,"_41":777,"_54":343},[339],[341],{},{"_31":779,"_33":780},[],{"_35":36,"_37":349,"_39":40,"_41":781,"_43":782,"_56":357,"_54":55},{},[783],{"_35":111,"_47":784,"_50":785,"_41":786,"_54":55},[354],[196],{},{"_35":157,"_37":359,"_39":40,"_41":788,"_43":789,"_56":362,"_54":55},{"_121":160},[],{"_31":791,"_33":805},[792],{"_31":793,"_33":794},[],{"_35":36,"_37":368,"_39":40,"_41":795,"_43":796,"_56":382,"_54":55},{},[797,801],{"_35":337,"_47":798,"_50":799,"_41":800,"_54":377},[373],[375],{},{"_35":46,"_47":802,"_50":803,"_41":804,"_54":55},[78],[115],{},{"_35":384,"_37":385,"_39":40,"_41":806,"_43":807,"_56":55,"_54":390},{"_387":388},[],{"_31":809,"_33":848},[810,839],{"_31":811,"_33":836},[812,817,822,827],{"_31":813,"_33":814},[],{"_35":36,"_37":398,"_39":40,"_41":815,"_43":816,"_56":401,"_54":55},{},[],{"_31":818,"_33":819},[],{"_35":36,"_37":405,"_39":40,"_41":820,"_43":821,"_56":408,"_54":55},{},[],{"_31":823,"_33":824},[],{"_35":36,"_37":412,"_39":40,"_41":825,"_43":826,"_56":415,"_54":55},{},[],{"_31":828,"_33":829},[],{"_35":36,"_37":419,"_39":40,"_41":830,"_43":831,"_56":427,"_54":55},{},[832],{"_35":74,"_47":833,"_50":834,"_41":835,"_54":55},[373],[425],{},{"_35":36,"_37":429,"_39":40,"_41":837,"_43":838,"_56":432,"_54":55},{"_121":122},[],{"_31":840,"_33":841},[],{"_35":36,"_37":436,"_39":40,"_41":842,"_43":843,"_56":444,"_54":55},{},[844],{"_35":46,"_47":845,"_50":846,"_41":847,"_54":55},[373],[442],{},{"_35":157,"_37":446,"_39":40,"_41":849,"_43":850,"_56":449,"_54":55},{"_121":160},[],{"_31":852,"_33":867},[853,862],{"_31":854,"_33":855},[],{"_35":36,"_37":455,"_39":40,"_41":856,"_43":857,"_56":463,"_54":55},{},[858],{"_35":46,"_47":859,"_50":860,"_41":861,"_54":55},[341],[461],{},{"_31":863,"_33":864},[],{"_35":36,"_37":467,"_39":40,"_41":865,"_43":866,"_56":470,"_54":55},{},[],{"_35":157,"_37":472,"_39":40,"_41":868,"_43":869,"_56":475,"_54":55},{"_121":160},[],{"_31":871,"_33":900},[872,877,882,891],{"_31":873,"_33":874},[],{"_35":36,"_37":481,"_39":40,"_41":875,"_43":876,"_56":484,"_54":55},{},[],{"_31":878,"_33":879},[],{"_35":36,"_37":488,"_39":40,"_41":880,"_43":881,"_56":491,"_54":55},{},[],{"_31":883,"_33":884},[],{"_35":36,"_37":495,"_39":40,"_41":885,"_43":886,"_56":504,"_54":55},{},[887],{"_35":111,"_47":888,"_50":889,"_41":890,"_54":55},[500],[502],{},{"_31":892,"_33":893},[],{"_35":36,"_37":508,"_39":40,"_41":894,"_43":895,"_56":515,"_54":55},{},[896],{"_35":46,"_47":897,"_50":898,"_41":899,"_54":55},[49],[113],{},{"_35":157,"_37":517,"_39":40,"_41":901,"_43":902,"_56":520,"_54":55},{"_121":160},[],{"_31":904,"_33":905},[],{"_35":36,"_37":524,"_39":40,"_41":906,"_43":907,"_56":527,"_54":55},{},[],[531],{"_387":542,"_543":345},{},{"_546":40,"_549":550},{"_37":560,"_559":531,"_534":913,"_528":529,"_561":-5,"_562":-5,"_563":-5,"_564":-5,"_558":24},[28,556,557],"dataUpdateCount","dataUpdatedAt",1780977094853,"error","errorUpdateCount","errorUpdatedAt","fetchFailureCount","fetchFailureReason","fetchMeta","isInvalidated","status","success","fetchStatus","idle","queryKey",[930,560,529,24],"ENTITY","queryHash","[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal\",\"bafy2bzacebqndi6iq4jd2ystx3ihuosd4pcsujctvhem273ps3kdp3nadlfie\",false]",{"_573":934,"_928":1104,"_931":1105},{"_575":935,"_914":299,"_915":1103,"_917":-5,"_918":49,"_919":49,"_920":49,"_921":-5,"_922":-5,"_923":24,"_924":925,"_926":927},{"_35":26,"_26":936,"_37":1100},{"_28":937,"_528":1088,"_530":531,"_532":1089,"_534":55,"_536":1090,"_538":1091,"_540":1092,"_544":1096,"_546":1097,"_547":1098,"_551":552},[938,946,958,971,978,1026,1047,1055],{"_31":939,"_33":940},[],{"_35":157,"_37":941,"_39":942,"_41":943,"_43":944,"_56":945,"_54":55},"YS5-lwb-","bafy2bzacedo2fapga62cenj2wqdo7fnnbwssy3ohyonmse3l74fds24nqx4r6",{},[],"Modeling UI with State Machines should be the norm.",{"_31":947,"_33":948},[],{"_35":36,"_37":949,"_39":942,"_41":950,"_43":951,"_56":957,"_54":55},"HIUNgDv3",{},[952],{"_35":46,"_47":953,"_50":954,"_41":956,"_54":55},[49],[955],79,{},"A practical guide to building better interfaces with XState, React & TypeScript",{"_31":959,"_33":960},[],{"_35":36,"_37":961,"_39":942,"_41":962,"_43":963,"_56":970,"_54":55},"RH2vgIqw",{},[964],{"_35":74,"_47":965,"_50":967,"_41":969,"_54":55},[966],132,[968],141,{},"Modern UI development is full of invisible complexity: async flows, conflicting states, edge cases, and fragile logic spread across useEffects and booleans.",{"_31":972,"_33":973},[],{"_35":36,"_37":974,"_39":942,"_41":975,"_43":976,"_56":977,"_54":55},"1i3NXohu",{},[],"This series is about doing it differently.",{"_31":979,"_33":1015},[980,987,994,1001,1008],{"_31":981,"_33":982},[],{"_35":36,"_37":983,"_39":942,"_41":984,"_43":985,"_56":986,"_54":55},"cP0mEJaa",{},[],"Easier to understand",{"_31":988,"_33":989},[],{"_35":36,"_37":990,"_39":942,"_41":991,"_43":992,"_56":993,"_54":55},"mUUMMN68",{},[],"Safer to extend",{"_31":995,"_33":996},[],{"_35":36,"_37":997,"_39":942,"_41":998,"_43":999,"_56":1000,"_54":55},"xkA4h4Fv",{},[],"Visually predictable",{"_31":1002,"_33":1003},[],{"_35":36,"_37":1004,"_39":942,"_41":1005,"_43":1006,"_56":1007,"_54":55},"1AW5Zc7P",{},[],"Naturally testable",{"_31":1009,"_33":1010},[],{"_35":36,"_37":1011,"_39":942,"_41":1012,"_43":1013,"_56":1014,"_54":55},"mISZl3dK",{},[],"Easy to Maintain and Refactor",{"_35":36,"_37":1016,"_39":942,"_41":1017,"_43":1018,"_56":1025,"_54":55},"mZU_BNzy",{"_121":122},[1019],{"_35":46,"_47":1020,"_50":1022,"_41":1024,"_54":55},[1021],34,[1023],64,{},"By modeling your UI behavior with state machines and statecharts, you can write code that’s:",{"_31":1027,"_33":1028},[],{"_35":36,"_37":1029,"_39":942,"_41":1030,"_43":1031,"_56":1046,"_54":55},"dT3b7j6V",{},[1032],{"_35":46,"_47":1033,"_50":1039,"_41":1045,"_54":55},[1034,1035,1036,1037,1038],100,134,142,149,168,[1040,1041,1042,1043,1044],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":1048,"_33":1049},[],{"_35":36,"_37":1050,"_39":1051,"_41":1052,"_43":1053,"_56":1054,"_54":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.",{"_31":1056,"_33":1083},[1057],{"_31":1058,"_33":1059},[],{"_35":1060,"_37":1061,"_39":942,"_41":1062,"_43":1082,"_56":55,"_54":55},"Query","XMasrKG1",{"_1063":1064,"_1065":1066,"_1067":1068,"_1081":24},"columnCount",3,"style","List","query",{"_1069":1070,"_1075":1076},"includes",[1071],{"_1072":531,"_534":28,"_1073":1074},"space","mode","Children","sort",[1077],{"_1078":24,"_1079":1080},"reverse","term","UpdateTime","banner",[],{"_35":157,"_37":1084,"_39":942,"_41":1085,"_43":1086,"_56":1087,"_54":55},"JuhiSEfW",{"_121":160},[],"Posts","bafy2bzacecwxx5llylg2hzhhcsf4r3dzvtr22wwk6wnw4qklwcvdp6jxln2ni",[531],"1970-01-01T00:00:00Z","2025-04-24T21:23:24.377Z",{"_387":1093,"_1094":1095},"UI with State Machines","siteUrl","https://ui-with-state-machines.hyper.media",{},"bafy2bzacecztctsdsles75mugrpzhgspjvfnf7atqvn5cmqqbccz4grooldak",{"_546":1097,"_549":1099},"0",{"_37":1101,"_559":531,"_534":1102,"_528":-5,"_561":-5,"_562":-5,"_563":-5,"_564":-5,"_558":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp",[],1780977094855,[930,1101,-5,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",null,true]",{"_573":1107,"_928":1167,"_931":1169},{"_575":1108,"_914":299,"_915":1166,"_917":-5,"_918":49,"_919":49,"_920":49,"_921":-5,"_922":-5,"_923":24,"_924":925,"_926":927},[1109,1144],{"_35":26,"_37":1110,"_534":1114,"_532":1115,"_536":1116,"_538":1121,"_1124":1125,"_546":1126,"_528":1113,"_1127":1128,"_1131":1132,"_547":1139,"_1141":-5,"_540":1142,"_551":552},{"_37":1111,"_559":531,"_534":1112,"_528":1113,"_561":-5,"_562":-5,"_563":-5,"_564":-5,"_558":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content",[28],"bafy2bzacecso2o7bwea36sevjo45wf2phruj5jcoomebikt7btumd3xpcrax2",[28],[531],{"_1117":1118,"_1119":1120},"seconds","1743456714","nanos",453000000,{"_1117":1122,"_1119":1123},"1776378355",213000000,"sortTime","2025-03-31T21:31:54.453Z","bafy2bzacecefqjbssb4ej2oc4wbspy3cvuuadbabfzxrzls56zqiissf6inw4","breadcrumbs",[1129],{"_387":1093,"_534":55,"_1130":24},"isMissing","activitySummary",{"_1133":-5,"_1134":55,"_1135":49,"_1136":1137,"_1138":6},"latestCommentTime","latestCommentId","commentCount","latestChangeTime",{"_1117":1122,"_1119":1123},"isUnread",{"_546":1126,"_549":1140},"1743456714453","redirectInfo",{"_387":1143},"Content",{"_35":26,"_37":1145,"_534":1150,"_532":1151,"_536":1152,"_538":1153,"_1124":1156,"_546":1157,"_528":1149,"_1127":1158,"_1131":1160,"_547":1162,"_1141":-5,"_540":1164,"_551":552},{"_37":1146,"_559":531,"_534":1147,"_528":1149,"_561":-5,"_562":-5,"_563":-5,"_564":-5,"_558":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/home",[1148],"home","bafyreicyjsg763rk6qtlns2wkpxn7uhhqc4t7c5ytd7ll7cd4ev42rgq5u",[1148],[531],{"_1117":1099,"_1119":49},{"_1117":1154,"_1119":1155},"1776190620",425000000,"1970-01-01T00:00:00.000Z","bafyreihqedcuddy2wuyh6dm6cy7pc5yhkdmq4bto7dzbz2bu3v5jsqud2y",[1159],{"_387":1093,"_534":55,"_1130":24},{"_1133":-5,"_1134":55,"_1135":49,"_1136":1161,"_1138":6},{"_1117":1154,"_1119":1155},{"_546":1157,"_549":1163},"1776190620425",{"_387":1165},"Home",1780977094850,[1168,1101,1074],"DOC_LIST_DIRECTORY","[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",\"Children\"]",{"_573":1171,"_928":1174,"_931":1175},{"_575":1172,"_914":299,"_915":1173,"_917":-5,"_918":49,"_919":49,"_920":49,"_921":-5,"_922":-5,"_923":24,"_924":925,"_926":927},[],1780977094849,[1168,560,1074],"[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal\",\"Children\"]",{"_573":1177,"_928":1188,"_931":1190},{"_575":1178,"_914":299,"_915":1187,"_917":-5,"_918":49,"_919":49,"_920":49,"_921":-5,"_922":-5,"_923":24,"_924":925,"_926":927},{"_1179":1180,"_1181":49,"_1182":1180,"_31":49,"_1183":1184,"_1185":1186},"citations",2,"comments","changes","authorUids",[531],"blocks",{},1780977094897,[1189,560],"DOCUMENT_INTERACTION_SUMMARY","[\"DOCUMENT_INTERACTION_SUMMARY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal\"]",{"_573":1192,"_928":1262,"_931":1263},{"_575":1193,"_914":299,"_915":1261,"_917":-5,"_918":49,"_919":49,"_920":49,"_921":-5,"_922":-5,"_923":24,"_924":925,"_926":927},{"_35":26,"_26":1194,"_37":1259},{"_28":1195,"_528":1113,"_530":531,"_532":1253,"_534":1254,"_536":1125,"_538":1255,"_540":1256,"_544":1257,"_546":1126,"_547":1258,"_551":552},[1196,1223,1230,1238,1246],{"_31":1197,"_33":1217},[1198,1209],{"_31":1199,"_33":1200},[],{"_35":1201,"_37":1202,"_39":1203,"_41":1204,"_43":1207,"_56":55,"_54":1208},"Embed","I01RCHLp","bafy2bzacedffkd4rdzzkikyjdm23zb2evqbqhnwklr5nxlcaod7pynmzj75um",{"_1205":1206},"view","Card",[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong?v=bafy2bzacecxbssfu6tsgckkty6krdldbq232rib3mvbbxhfhi745pqg4m7zsg&l",{"_31":1210,"_33":1211},[],{"_35":1201,"_37":1212,"_39":1213,"_41":1214,"_43":1215,"_56":55,"_54":1216},"TbDjWW-e","bafy2bzaced2hqcefph7tgklninzu5dcebzjmxq67dmjn7puloiksgwttj6gig",{"_1205":1206},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified?v=bafy2bzaceasflmgw6yafc3mygkufwzsrzcjoh5vbpczy532qvitkfsli3icns&l",{"_35":157,"_37":1218,"_39":1219,"_41":1220,"_43":1221,"_56":1222,"_54":55},"SpGu0tBK","bafy2bzaceblppdcojdh2aj4zbh6aax7c6a6ynzvetc2elfxbi44o2mxwvc5go",{"_121":160},[],"English",{"_31":1224,"_33":1225},[],{"_35":157,"_37":1226,"_39":1219,"_41":1227,"_43":1228,"_56":1229,"_54":55},"nvxL-VgX",{},[],"Spanish",{"_31":1231,"_33":1232},[],{"_35":1201,"_37":1233,"_39":1234,"_41":1235,"_43":1236,"_56":55,"_54":1237},"XG17WIWR","bafy2bzacebsxm4y2fsik3g3ovk5kx4kri56g32o6r7dszvekaqugfrqbmhmx6",{"_1205":1206},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal?v=bafy2bzacedeehy4mmf4hniuuxqoww54eacrhpypjtzu5qotzkgrq2bm6lfmqm&l",{"_31":1239,"_33":1240},[],{"_35":1201,"_37":1241,"_39":1242,"_41":1243,"_43":1244,"_56":55,"_54":1245},"LsgymWG9uV","bafy2bzacedonvbcc5bzwy2j5r7wnwgaco4rcrpyo5g6zqdugpfbdejp5oodeg",{"_1205":1206},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/estados-eventos-y-transiciones-desmitificados",{"_31":1247,"_33":1248},[],{"_35":1201,"_37":1249,"_39":1113,"_41":1250,"_43":1251,"_56":55,"_54":1252},"dyEQC00biY",{"_1205":1206},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/why-state-machines-are-a-game-changer-for-ui-development",[531],"/content","2026-04-16T22:25:55.213Z",{"_387":1143},{},{"_546":1126,"_549":1140},{"_37":1111,"_559":531,"_534":1260,"_528":-5,"_561":-5,"_562":-5,"_563":-5,"_564":-5},[28],1780977094854,[930,1111,-5,24],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content\",null,false]",{"_573":1265,"_928":1742,"_931":1743},{"_575":1266,"_914":299,"_915":1741,"_917":-5,"_918":49,"_919":49,"_920":49,"_921":-5,"_922":-5,"_923":24,"_924":925,"_926":927},{"_35":26,"_26":1267,"_37":1738},{"_28":1268,"_528":1273,"_530":531,"_532":1729,"_534":1730,"_536":1731,"_538":1732,"_540":1733,"_544":1735,"_546":1286,"_547":1736,"_551":552},[1269,1282,1294,1384,1426,1494,1534,1588,1646,1672,1716,1722],{"_31":1270,"_33":1271},[],{"_35":36,"_37":1272,"_39":1273,"_41":1274,"_43":1275,"_56":1281,"_54":55},"bwFwn1C4","bafy2bzacecxbssfu6tsgckkty6krdldbq232rib3mvbbxhfhi745pqg4m7zsg",{},[1276],{"_35":337,"_47":1277,"_50":1279,"_41":1280,"_54":1237},[1278],29,[134],{},"Tienes la version en español Aqui!",{"_31":1283,"_33":1284},[],{"_35":36,"_37":1285,"_39":1286,"_41":1287,"_43":1288,"_56":1293,"_54":55},"fdPPwqyK","bafy2bzaceblbz4bq35scgunjmywxitadj53jlujzzqmderu2enx65g4iibg4w",{},[1289],{"_35":46,"_47":1290,"_50":1291,"_41":1292,"_54":55},[49],[310],{},"Why state machines make UI logic simpler, safer, and way more maintainable.",{"_31":1295,"_33":1379},[1296,1303,1315,1355,1368],{"_31":1297,"_33":1298},[],{"_35":36,"_37":1299,"_39":1286,"_41":1300,"_43":1301,"_56":1302,"_54":55},"7WuP5M98",{},[],"Let’s be honest: your React component’s state logic probably started simple.",{"_31":1304,"_33":1305},[],{"_35":36,"_37":1306,"_39":1286,"_41":1307,"_43":1308,"_56":1314,"_54":55},"gQee2tae",{},[1309],{"_35":74,"_47":1310,"_50":1311,"_41":1313,"_54":55},[180],[1312],39,{},"A couple of booleans. Maybe a useEffect. Just enough to get things working.",{"_31":1316,"_33":1350},[1317,1324,1331,1338],{"_31":1318,"_33":1319},[],{"_35":36,"_37":1320,"_39":1286,"_41":1321,"_43":1322,"_56":1323,"_54":55},"ohqeaaWA",{},[],"You added a loading state.",{"_31":1325,"_33":1326},[],{"_35":36,"_37":1327,"_39":1286,"_41":1328,"_43":1329,"_56":1330,"_54":55},"TV7FSi-P",{},[],"Then an error state.",{"_31":1332,"_33":1333},[],{"_35":36,"_37":1334,"_39":1286,"_41":1335,"_43":1336,"_56":1337,"_54":55},"GpWZB7rj",{},[],"Then a retry flow.",{"_31":1339,"_33":1340},[],{"_35":36,"_37":1341,"_39":1286,"_41":1342,"_43":1343,"_56":1349,"_54":55},"N3YjtS-P",{},[1344],{"_35":111,"_47":1345,"_50":1346,"_41":1348,"_54":55},[76],[1347],35,{},"Then an edge case where loading and error coexist.",{"_35":36,"_37":1351,"_39":1286,"_41":1352,"_43":1353,"_56":1354,"_54":55},"roF3Zphe",{"_121":122},[],"But then things changed:",{"_31":1356,"_33":1357},[],{"_35":36,"_37":1358,"_39":1286,"_41":1359,"_43":1360,"_56":1367,"_54":55},"9e8b4C7p",{},[1361],{"_35":74,"_47":1362,"_50":1364,"_41":1366,"_54":55},[500,138,78,139,1363],80,[1278,1312,1365,1023,201],53,{},"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.",{"_31":1369,"_33":1370},[],{"_35":36,"_37":1371,"_39":1286,"_41":1372,"_43":1373,"_56":1378,"_54":55},"0Z3n0acd",{},[1374],{"_35":46,"_47":1375,"_50":1376,"_41":1377,"_54":55},[49],[193],{},"Sound familiar?",{"_35":157,"_37":1380,"_39":1286,"_41":1381,"_43":1382,"_56":1383,"_54":55},"D1-y4X6q",{"_121":160},[],"🤯 The UI Logic Spiral",{"_31":1385,"_33":1421},[1386,1393,1404],{"_31":1387,"_33":1388},[],{"_35":36,"_37":1389,"_39":1286,"_41":1390,"_43":1391,"_56":1392,"_54":55},"9gC20yWH",{},[],"We often treat UI state as a flat structure of booleans or enums.",{"_31":1394,"_33":1395},[],{"_35":36,"_37":1396,"_39":1286,"_41":1397,"_43":1398,"_56":1403,"_54":55},"Fc3Auckl",{},[1399],{"_35":46,"_47":1400,"_50":1401,"_41":1402,"_54":55},[1278],[339],{},"But in reality, your UI is a process. A sequence. A user clicks a button, something happens, and the UI responds.",{"_31":1405,"_33":1406},[],{"_35":36,"_37":1407,"_39":1286,"_41":1408,"_43":1409,"_56":1420,"_54":55},"zXKxxqPK",{},[1410,1415],{"_35":111,"_47":1411,"_50":1413,"_41":1414,"_54":55},[1412,180],16,[196,442],{},{"_35":46,"_47":1416,"_50":1417,"_41":1419,"_54":55},[461],[1418],86,{},"That’s not just state. That’s state over time — and that’s exactly what state machines are made for.",{"_35":157,"_37":1422,"_39":1286,"_41":1423,"_43":1424,"_56":1425,"_54":55},"zD16k_dd",{"_121":160},[],"🧠 UIs Aren’t Just State — They’re Behavior",{"_31":1427,"_33":1489},[1428,1441,1482],{"_31":1429,"_33":1430},[],{"_35":36,"_37":1431,"_39":1286,"_41":1432,"_43":1433,"_56":1440,"_54":55},"nwnXcy5u",{},[1434],{"_35":46,"_47":1435,"_50":1437,"_41":1439,"_54":55},[1436],82,[1438],95,{},"What if, instead of wiring together a dozen flags, you modeled your UI logic as a state machine?",{"_31":1442,"_33":1477},[1443,1450,1463,1470],{"_31":1444,"_33":1445},[],{"_35":36,"_37":1446,"_39":1286,"_41":1447,"_43":1448,"_56":1449,"_54":55},"YHZ60aGm",{},[],"Define all possible states up front",{"_31":1451,"_33":1452},[],{"_35":36,"_37":1453,"_39":1286,"_41":1454,"_43":1455,"_56":1462,"_54":55},"BG844_u6",{},[1456],{"_35":111,"_47":1457,"_50":1459,"_41":1461,"_54":55},[1458],9,[1460],13,{},"Describe only valid transitions",{"_31":1464,"_33":1465},[],{"_35":36,"_37":1466,"_39":1286,"_41":1467,"_43":1468,"_56":1469,"_54":55},"8AfLrOx4",{},[],"Eliminate contradictory or impossible states",{"_31":1471,"_33":1472},[],{"_35":36,"_37":1473,"_39":1286,"_41":1474,"_43":1475,"_56":1476,"_54":55},"DCP-xbPi",{},[],"Get a visual map of your logic — for free",{"_35":36,"_37":1478,"_39":1286,"_41":1479,"_43":1480,"_56":1481,"_54":55},"GEVqKMh_",{"_121":122},[],"With a state machine, you:",{"_31":1483,"_33":1484},[],{"_35":36,"_37":1485,"_39":1286,"_41":1486,"_43":1487,"_56":1488,"_54":55},"Bj1BdyX5",{},[],"Let’s look at a simple example.",{"_35":157,"_37":1490,"_39":1286,"_41":1491,"_43":1492,"_56":1493,"_54":55},"cWnwRtNl",{"_121":160},[],"✅ The Solution: Model Behavior, Not Just State",{"_31":1495,"_33":1529},[1496,1502,1509,1522],{"_31":1497,"_33":1498},[],{"_35":74,"_37":1499,"_39":1286,"_41":1500,"_43":1501,"_56":289,"_54":55},"tthO-Xq7",{"_286":287},[],{"_31":1503,"_33":1504},[],{"_35":36,"_37":1505,"_39":1286,"_41":1506,"_43":1507,"_56":1508,"_54":55},"5mDaHPOh",{},[],"That’s it.",{"_31":1510,"_33":1511},[],{"_35":36,"_37":1512,"_39":1286,"_41":1513,"_43":1514,"_56":1521,"_54":55},"Tf0C6FVr",{},[1515],{"_35":74,"_47":1516,"_50":1518,"_41":1520,"_54":55},[1517],69,[1519],77,{},"One machine. Two states. One event. No booleans. No conditionals. No useState.",{"_31":1523,"_33":1524},[],{"_35":36,"_37":1525,"_39":1286,"_41":1526,"_43":1527,"_56":1528,"_54":55},"vET9knzB",{},[],"Simple, expressive, and type-safe.",{"_35":157,"_37":1530,"_39":1286,"_41":1531,"_43":1532,"_56":1533,"_54":55},"oSfzQouN",{"_121":160},[],"🧪 Example: Toggle with XState",{"_31":1535,"_33":1583},[1536,1548,1560],{"_31":1537,"_33":1538},[],{"_35":36,"_37":1539,"_39":1286,"_41":1540,"_43":1541,"_56":1547,"_54":55},"PFEubsuK",{},[1542],{"_35":111,"_47":1543,"_50":1545,"_41":1546,"_54":55},[1544],25,[134],{},"Here’s what that machine actually looks like:",{"_31":1549,"_33":1550},[],{"_35":332,"_37":1551,"_39":1286,"_41":1552,"_43":1553,"_56":1559,"_54":345},"69qPwKx1",{},[1554],{"_35":337,"_47":1555,"_50":1556,"_41":1558,"_54":377},[180],[1557],40,{},"State machine visualizer from stately.ai",{"_31":1561,"_33":1578},[1562],{"_31":1563,"_33":1564},[],{"_35":36,"_37":1565,"_39":1286,"_41":1566,"_43":1567,"_56":1577,"_54":55},"raeO-tIt",{},[1568,1573],{"_35":337,"_47":1569,"_50":1571,"_41":1572,"_54":377},[1570],11,[196],{},{"_35":46,"_47":1574,"_50":1575,"_41":1576,"_54":55},[180],[134],{},"Tools like Stately.ai let you see your machines as flow diagrams — so you and your team instantly understand what’s going on.",{"_35":384,"_37":1579,"_39":1286,"_41":1580,"_43":1582,"_56":55,"_54":390},"RfomATRA",{"_387":1581},"👉 Open in Stately Visualizer",[],{"_35":157,"_37":1584,"_39":1286,"_41":1585,"_43":1586,"_56":1587,"_54":55},"QdybwklD",{"_121":160},[],"🔍 Visualizing It",{"_31":1589,"_33":1641},[1590,1630],{"_31":1591,"_33":1625},[1592,1599,1606,1613],{"_31":1593,"_33":1594},[],{"_35":36,"_37":1595,"_39":1286,"_41":1596,"_43":1597,"_56":1598,"_54":55},"_5pp5GCa",{},[],"Simplify multi-step forms and wizards",{"_31":1600,"_33":1601},[],{"_35":36,"_37":1602,"_39":1286,"_41":1603,"_43":1604,"_56":1605,"_54":55},"ycWsxYoc",{},[],"Model modals, dropdowns, or onboarding flows",{"_31":1607,"_33":1608},[],{"_35":36,"_37":1609,"_39":1286,"_41":1610,"_43":1611,"_56":1612,"_54":55},"-E8hexmN",{},[],"Eliminate inconsistent UI states",{"_31":1614,"_33":1615},[],{"_35":36,"_37":1616,"_39":1286,"_41":1617,"_43":1618,"_56":1624,"_54":55},"5Hduh--0",{},[1619],{"_35":74,"_47":1620,"_50":1621,"_41":1623,"_54":55},[245],[1622],23,{},"Replace messy useEffect logic with declarative transitions",{"_35":36,"_37":1626,"_39":1286,"_41":1627,"_43":1628,"_56":1629,"_54":55},"Jo8lef--",{"_121":122},[],"This isn’t just for toggles. You can use state machines to:",{"_31":1631,"_33":1632},[],{"_35":36,"_37":1633,"_39":1286,"_41":1634,"_43":1635,"_56":1640,"_54":55},"eR1fhV5r",{},[1636],{"_35":46,"_47":1637,"_50":1638,"_41":1639,"_54":55},[373],[442],{},"And when you pair XState + React + TypeScript, you unlock type-safe, testable UI logic that scales.",{"_35":157,"_37":1642,"_39":1286,"_41":1643,"_43":1644,"_56":1645,"_54":55},"vph2YBdF",{"_121":160},[],"🛠️ Why This Matters",{"_31":1647,"_33":1667},[1648,1660],{"_31":1649,"_33":1650},[],{"_35":36,"_37":1651,"_39":1286,"_41":1652,"_43":1653,"_56":1659,"_54":55},"xZimMM5q",{},[1654],{"_35":46,"_47":1655,"_50":1656,"_41":1658,"_54":55},[1557],[1657],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.",{"_31":1661,"_33":1662},[],{"_35":36,"_37":1663,"_39":1286,"_41":1664,"_43":1665,"_56":1666,"_54":55},"bVgpTHna",{},[],"You’ll learn how to go from messy state to modeled behavior in minutes.",{"_35":157,"_37":1668,"_39":1286,"_41":1669,"_43":1670,"_56":1671,"_54":55},"bxuzThYA",{"_121":160},[],"⏭️ Coming Up Next: States, Events, and Transitions",{"_31":1673,"_33":1711},[1674,1681,1688,1700],{"_31":1675,"_33":1676},[],{"_35":36,"_37":1677,"_39":1286,"_41":1678,"_43":1679,"_56":1680,"_54":55},"JH-6Rryd",{},[],"Pick a small UI interaction in your app — a toggle, modal, or dropdown — and try modeling it as a state machine.",{"_31":1682,"_33":1683},[],{"_35":36,"_37":1684,"_39":1286,"_41":1685,"_43":1686,"_56":1687,"_54":55},"scvfIDjN",{},[],"Just one.",{"_31":1689,"_33":1690},[],{"_35":36,"_37":1691,"_39":1286,"_41":1692,"_43":1693,"_56":1699,"_54":55},"p48_gOts",{},[1694],{"_35":111,"_47":1695,"_50":1696,"_41":1698,"_54":55},[153],[1697],51,{},"Then ask yourself: was this easier to reason about?",{"_31":1701,"_33":1702},[],{"_35":36,"_37":1703,"_39":1286,"_41":1704,"_43":1705,"_56":1710,"_54":55},"3JDOfXV5",{},[1706],{"_35":46,"_47":1707,"_50":1708,"_41":1709,"_54":55},[49],[182],{},"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.",{"_35":157,"_37":1712,"_39":1286,"_41":1713,"_43":1714,"_56":1715,"_54":55},"gWgHnWOx",{"_121":160},[],"💡 Try This",{"_31":1717,"_33":1718},[],{"_35":36,"_37":1719,"_39":1286,"_41":1720,"_43":1721,"_56":55,"_54":55},"AffwMmaJ",{},[],{"_31":1723,"_33":1724},[],{"_35":36,"_37":1725,"_39":1286,"_41":1726,"_43":1727,"_56":1728,"_54":55},"V5cHfg-a",{},[],"Thanks for reading,\nHoracio",[531],"/content/you-are-writing-ui-state-wrong","2025-03-31T21:51:13.698Z","2025-04-01T04:44:31.918Z",{"_387":1734,"_543":345},"You are Writing UI State Wrong",{},{"_546":1286,"_549":1737},"1743457873698",{"_37":1739,"_559":531,"_534":1740,"_528":-5,"_561":-5,"_562":-5,"_563":-5,"_564":-5},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong",[28,556],1780977094852,[930,1739,-5,24],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong\",null,false]",{"_573":1745,"_928":1753,"_931":1755},{"_575":1746,"_914":299,"_915":1752,"_917":-5,"_918":49,"_919":49,"_920":49,"_921":-5,"_922":-5,"_923":24,"_924":925,"_926":927},{"_35":530,"_37":1747,"_540":1749},{"_528":1088,"_559":531,"_37":1101,"_534":1748,"_561":-5,"_562":-5,"_563":-5,"_564":-5},[],{"_387":1093,"_1094":1095,"_1750":-5,"_1751":-5},"icon","summary",1780977094899,[1754,531],"ACCOUNT","[\"ACCOUNT\",\"z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"]","ssrContentHTML","

Por qué las máquinas de estados hacen que la lógica de UI sea más simple, segura y mantenible.

🤯 El espiral de la lógica en la UI

Seamos sinceros: probablemente la lógica de estado en tu componente de React empezó siendo simple.

Un par de booleanos. Tal vez un useEffect. Lo justo para que funcione.

Pero luego las cosas se complicaron:

Agregaste un estado de carga.
Después, un estado de error.
Luego, un flujo de reintento.
Y finalmente, un caso raro donde hay carga y error al mismo tiempo.

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.

¿Te suena familiar?

🧠 Las UIs no son solo estados — son comportamientos

A menudo tratamos el estado de UI como una estructura plana de booleanos o enums.

Pero en realidad, tu UI es un proceso. Una secuencia. Un usuario hace clic, algo sucede, y la UI responde.

Eso no es solo estado. Es estado a través del tiempo — y eso es exactamente lo que una máquina de estados modela.

✅ La solución: modela comportamientos, no solo estados

¿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?

Con una máquina de estados, puedes:

Definir todos los estados posibles desde el principio
Describir solo las transiciones válidas
Eliminar estados imposibles o contradictorios
Tener un mapa visual de tu lógica — gratis

Veamos un ejemplo simple.

🧪 Ejemplo: Toggle con XState

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});

Eso es todo.

Una máquina. Dos estados. Un evento. Sin booleanos. Sin condicionales. Sin useState.

Simple, expresivo y con tipado fuerte.

🔍 Visualízalo

$\"Diagrama$ Diagrama de La Maquina de estado en Stately.ai

Así es como realmente luce esa máquina:

Button

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.

🛠️ ¿Por qué importa esto?

Esto no es solo para toggles. Puedes usar máquinas de estados para:

Simplificar formularios multistep y asistentes
Modelar modales, menús desplegables o flujos de onboarding
Eliminar estados inconsistentes en la UI
Reemplazar lógica useEffect con transiciones declarativas

Y cuando combinas XState + React + TypeScript, desbloqueas una arquitectura de UI segura, testeable y escalable.

⏭️ Próximo tema: Estados, Eventos y Transiciones

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.

Vas a aprender cómo pasar de un estado caótico a un comportamiento modelado en minutos.

💡 Intenta esto

Elige una interacción pequeña en tu UI — un toggle, modal o dropdown — e intenta modelarla como una máquina de estados.

Solo una.

Y luego pregúntate: ¿fue más fácil razonar sobre esto?

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.

Gracias por leer,\nHoracio

","enableWebSigning","origin","homeMetadata",{"_387":1093,"_1094":1095},"originHomeId",{"_559":531,"_37":1101,"_534":1764,"_528":-5,"_561":-5,"_562":-5,"_563":-5,"_564":-5},[],"meta",{"_1767":1768,"_1820":1821},"values",{"_1769":1770,"_1772":1773,"_1774":1775,"_1776":1777,"_1779":1780,"_1781":1782,"_1783":1784,"_1786":1787,"_1788":1789,"_1790":1791,"_1792":1793,"_1794":1795,"_1796":1797,"_1798":1799,"_1800":1801,"_1802":1803,"_1804":1805,"_1806":1807,"_1808":1809,"_1810":1811,"_1812":1813,"_1814":1815,"_1816":1817,"_1818":1819},"document.generationInfo.generation",[1771],"bigint","dehydratedState.queries.0.state.data.document.generationInfo.generation",[1771],"dehydratedState.queries.1.state.data.document.generationInfo.generation",[1771],"dehydratedState.queries.1.queryKey.2",[1778],"undefined","dehydratedState.queries.2.state.data.0.createTime.seconds",[1771],"dehydratedState.queries.2.state.data.0.updateTime.seconds",[1771],"dehydratedState.queries.2.state.data.0.sortTime",[1785],"Date","dehydratedState.queries.2.state.data.0.activitySummary.latestCommentTime",[1778],"dehydratedState.queries.2.state.data.0.activitySummary.latestChangeTime.seconds",[1771],"dehydratedState.queries.2.state.data.0.generationInfo.generation",[1771],"dehydratedState.queries.2.state.data.0.redirectInfo",[1778],"dehydratedState.queries.2.state.data.1.createTime.seconds",[1771],"dehydratedState.queries.2.state.data.1.updateTime.seconds",[1771],"dehydratedState.queries.2.state.data.1.sortTime",[1785],"dehydratedState.queries.2.state.data.1.activitySummary.latestCommentTime",[1778],"dehydratedState.queries.2.state.data.1.activitySummary.latestChangeTime.seconds",[1771],"dehydratedState.queries.2.state.data.1.generationInfo.generation",[1771],"dehydratedState.queries.2.state.data.1.redirectInfo",[1778],"dehydratedState.queries.5.state.data.document.generationInfo.generation",[1771],"dehydratedState.queries.5.queryKey.2",[1778],"dehydratedState.queries.6.state.data.document.generationInfo.generation",[1771],"dehydratedState.queries.6.queryKey.2",[1778],"dehydratedState.queries.7.state.data.metadata.icon",[1778],"dehydratedState.queries.7.state.data.metadata.summary",[1778],"referentialEqualities",{"_1769":1822,"_1774":1823,"_1781":1824,"_1790":1825,"_1796":1826},[1772],[1794],[1788],[1808],[1802],"actionData","errors"]