[{"_1":2,"_1353":-5,"_1354":-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","e7b8b0fb06b942ffbb787e521100d8b7--0","sentryBaggage","sentry-environment=production,sentry-trace_id=e7b8b0fb06b942ffbb787e521100d8b7,sentry-sampled=false","remixVersion",2,"routes/$",{"_20":21,"_1311":1312},"json",{"_22":23,"_24":25,"_26":-5,"_27":-5,"_28":-5,"_29":30,"_31":-5,"_32":33,"_588":6,"_45":589,"_599":-5,"_600":601,"_1304":30,"_10":1148,"_1305":1148,"_1306":1307,"_1308":1309},"prefersLanguages",[],"viewTerm","collaborators","panelParam","openComment","accountUid","isInspect",false,"inspectTab","document",{"_34":35,"_560":549,"_561":562,"_563":564,"_565":566,"_567":568,"_569":570,"_571":572,"_579":580,"_581":48,"_582":583,"_586":587},"content",[36,130,183,212,262,290,311,346,374,501,545],{"_37":38,"_41":123},"children",[39,57,103],{"_37":40,"_41":42},[],"block",{"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"type","Paragraph","id","X_-1QPAY","revision","bafyreiejui73fg3kf6z4vsflc4ktnhhi2wh5inpt5m725keqduve52pcbm","attributes",{},"annotations",[],"text","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.","link","",{"_37":58,"_41":87},[59,66,73,80],{"_37":60,"_41":61},[],{"_43":44,"_45":62,"_47":48,"_49":63,"_51":64,"_53":65,"_55":56},"WzLNuzxz",{},[],"Clicking the document title",{"_37":67,"_41":68},[],{"_43":44,"_45":69,"_47":48,"_49":70,"_51":71,"_53":72,"_55":56},"f2ghHskQ",{},[],"Clicking the editor area",{"_37":74,"_41":75},[],{"_43":44,"_45":76,"_47":48,"_49":77,"_51":78,"_53":79,"_55":56},"4-R85I9w",{},[],"Auto-entering edit mode when a draft exists",{"_37":81,"_41":82},[],{"_43":44,"_45":83,"_47":48,"_49":84,"_51":85,"_53":86,"_55":56},"LDOeF2nI",{},[],"Keyboard shortcuts",{"_43":44,"_45":88,"_47":48,"_49":89,"_51":92,"_53":102,"_55":56},"0-nHopbB",{"_90":91},"childrenType","Unordered",[93],{"_43":94,"_95":96,"_98":99,"_49":101,"_55":56},"Bold","starts",[97],39,"ends",[100],52,{},"Sounds simple, right? But your app has multiple ways to enter edit mode:",{"_37":104,"_41":105},[],{"_43":44,"_45":106,"_47":48,"_49":107,"_51":108,"_53":122,"_55":56},"7pJYB7hV",{},[109,116],{"_43":110,"_95":111,"_98":113,"_49":115,"_55":56},"Code",[112],17,[114],25,{},{"_43":94,"_95":117,"_98":119,"_49":121,"_55":56},[118],63,[120],83,{},"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.",{"_43":124,"_45":125,"_47":48,"_49":126,"_51":128,"_53":129,"_55":56},"Heading","OwXDKqnA",{"_90":127},"Group",[],"The Problem",{"_37":131,"_41":178},[132,145,152,161],{"_37":133,"_41":134},[],{"_43":44,"_45":135,"_47":48,"_49":136,"_51":137,"_53":144,"_55":56},"q6WmQx2F",{},[138],{"_43":94,"_95":139,"_98":141,"_49":143,"_55":56},[140],35,[142],40,{},"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.",{"_37":146,"_41":147},[],{"_43":44,"_45":148,"_47":48,"_49":149,"_51":150,"_53":151,"_55":56},"-w2AY92q",{},[],"Here's the mental model:",{"_37":153,"_41":154},[],{"_43":110,"_45":155,"_47":48,"_49":156,"_51":159,"_53":160,"_55":56},"4jnVHkuo",{"_157":158},"language","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",{"_37":162,"_41":163},[],{"_43":44,"_45":164,"_47":48,"_49":165,"_51":166,"_53":177,"_55":56},"bqZY_Vl8",{},[167,172],{"_43":94,"_95":168,"_98":169,"_49":171,"_55":56},[112],[170],59,{},{"_43":110,"_95":173,"_98":174,"_49":176,"_55":56},[170],[175],69,{},"The key insight: we didn't touch any UI code that triggers edit.start. The machine routes the transition based on context.",{"_43":124,"_45":179,"_47":48,"_49":180,"_51":181,"_53":182,"_55":56},"pb4Y2Olv",{"_90":127},[],"The State Machine Approach",{"_37":184,"_41":207},[185,192,200],{"_37":186,"_41":187},[],{"_43":44,"_45":188,"_47":48,"_49":189,"_51":190,"_53":191,"_55":56},"iwfbRBr-",{},[],"Without a state machine, you'd end up with something like this scattered across your components:",{"_37":193,"_41":194},[],{"_43":110,"_45":195,"_47":48,"_49":196,"_51":198,"_53":199,"_55":56},"B5VSyRq3",{"_157":197},"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",{"_37":201,"_41":202},[],{"_43":44,"_45":203,"_47":48,"_49":204,"_51":205,"_53":206,"_55":56},"jv2CVOGQ",{},[],"Every new entry point means another place to remember the guard. Every edge case (draft exists + old version + account switch) multiplies the conditionals.",{"_43":124,"_45":208,"_47":48,"_49":209,"_51":210,"_53":211,"_55":56},"nyXuJAHK",{"_90":127},[],"Before: Boolean Spaghetti",{"_37":213,"_41":257},[214,221,229,236,243,250],{"_37":215,"_41":216},[],{"_43":44,"_45":217,"_47":48,"_49":218,"_51":219,"_53":220,"_55":56},"N73Uq9x5",{},[],"With XState, the guard lives in the machine definition:",{"_37":222,"_41":223},[],{"_43":110,"_45":224,"_47":48,"_49":225,"_51":227,"_53":228,"_55":56},"UPQWgtew",{"_157":226},"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",{"_37":230,"_41":231},[],{"_43":44,"_45":232,"_47":48,"_49":233,"_51":234,"_53":235,"_55":56},"zS2XXv11",{},[],"The auto-edit transition for existing drafts gets the same treatment:",{"_37":237,"_41":238},[],{"_43":110,"_45":239,"_47":48,"_49":240,"_51":241,"_53":242,"_55":56},"g3Y7flDO",{"_157":226},[],"// Auto-edit guard: only on latest version\nalways: {\n target: 'editing',\n guard: ({context}) => context.shouldAutoEdit && context.isLatestVersion,\n actions: ['clearShouldAutoEdit', 'setDepsFromPublished'],\n},\n",{"_37":244,"_41":245},[],{"_43":44,"_45":246,"_47":48,"_49":247,"_51":248,"_53":249,"_55":56},"w7D3ju8h",{},[],"The confirmation state handles only its own concern:",{"_37":251,"_41":252},[],{"_43":110,"_45":253,"_47":48,"_49":254,"_51":255,"_53":256,"_55":56},"eIhUXn3-",{"_157":226},[],"confirmingOldVersionEdit: {\n on: {\n 'edit.confirm': {\n target: 'editing',\n actions: ['setDepsFromPublished'],\n },\n 'edit.cancel': {\n target: 'loaded',\n },\n },\n},\n",{"_43":124,"_45":258,"_47":48,"_49":259,"_51":260,"_53":261,"_55":56},"uiGFw2IY",{"_90":127},[],"After: One Machine, One Guard",{"_37":263,"_41":285},[264,271,278],{"_37":265,"_41":266},[],{"_43":44,"_45":267,"_47":48,"_49":268,"_51":269,"_53":270,"_55":56},"y1_prkIu",{},[],"The dialog component is purely declarative — it reads state and sends events:",{"_37":272,"_41":273},[],{"_43":110,"_45":274,"_47":48,"_49":275,"_51":276,"_53":277,"_55":56},"lysr5VRF",{"_157":197},[],"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",{"_37":279,"_41":280},[],{"_43":44,"_45":281,"_47":48,"_49":282,"_51":283,"_53":284,"_55":56},"HNSQzmrj",{},[],"Drop this component anywhere in the tree. It works because it talks to the machine, not to local state.",{"_43":124,"_45":286,"_47":48,"_49":287,"_51":288,"_53":289,"_55":56},"rzWErhQt",{"_90":127},[],"The UI: Dead Simple",{"_37":291,"_41":306},[292,299],{"_37":293,"_41":294},[],{"_43":44,"_45":295,"_47":48,"_49":296,"_51":297,"_53":298,"_55":56},"c3izfZOv",{},[],"Here's the complete document lifecycle with the new confirmation guard:",{"_37":300,"_41":301},[],{"_43":110,"_45":302,"_47":48,"_49":303,"_51":304,"_53":305,"_55":56},"i3xN9kZW",{"_157":158},[],"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",{"_43":124,"_45":307,"_47":48,"_49":308,"_51":309,"_53":310,"_55":56},"2NFWJyvH",{"_90":127},[],"The Full Picture",{"_37":312,"_41":341},[313,328],{"_37":314,"_41":315},[],{"_43":44,"_45":316,"_47":48,"_49":317,"_51":318,"_53":327,"_55":56},"KnxzdsOq",{},[319],{"_43":110,"_95":320,"_98":323,"_49":326,"_55":56},[321,322],150,171,[324,325],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",{"_37":329,"_41":330},[],{"_43":44,"_45":331,"_47":48,"_49":332,"_51":333,"_53":340,"_55":56},"Sy6s229z",{},[334],{"_43":94,"_95":335,"_98":337,"_49":339,"_55":56},[336],46,[338],84,{},"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.",{"_43":124,"_45":342,"_47":48,"_49":343,"_51":344,"_53":345,"_55":56},"J30rZmR3",{"_90":127},[],"Why This Matters",{"_37":347,"_41":369},[348,355,362],{"_37":349,"_41":350},[],{"_43":44,"_45":351,"_47":48,"_49":352,"_51":353,"_53":354,"_55":56},"W8uwdfuB",{},[],"State machine tests are clean because they're just input → output:",{"_37":356,"_41":357},[],{"_43":110,"_45":358,"_47":48,"_49":359,"_51":360,"_53":361,"_55":56},"LklZ0T0r",{"_157":226},[],"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",{"_37":363,"_41":364},[],{"_43":44,"_45":365,"_47":48,"_49":366,"_51":367,"_53":368,"_55":56},"MEwPi7yg",{},[],"No DOM, no mocking click handlers, no rendering components. Pure logic.",{"_43":124,"_45":370,"_47":48,"_49":371,"_51":372,"_53":373,"_55":56},"bSE19LBw",{"_90":127},[],"Testing: Events In, States Out",{"_37":375,"_41":496},[376,439],{"_37":377,"_41":433},[378,391,410],{"_37":379,"_41":380},[],{"_43":44,"_45":381,"_47":48,"_49":382,"_51":383,"_53":390,"_55":56},"8yn_DTRI",{},[384],{"_43":94,"_95":385,"_98":387,"_49":389,"_55":56},[386],0,[388],11,{},"Start small — model one complex interaction (a multi-step form, a data loading flow)",{"_37":392,"_41":393},[],{"_43":44,"_45":394,"_47":48,"_49":395,"_51":396,"_53":409,"_55":56},"bFG6HG-Z",{},[397,402],{"_43":94,"_95":398,"_98":399,"_49":401,"_55":56},[386],[400],18,{},{"_43":403,"_95":404,"_98":406,"_49":407,"_55":408},"Link",[405],21,[140],{},"http://stately.ai/viz","Use the visualizer — stately.ai/viz turns your machine definition into an interactive diagram",{"_37":411,"_41":412},[],{"_43":44,"_45":413,"_47":48,"_49":414,"_51":415,"_53":432,"_55":56},"bHnMU77U",{},[416,421],{"_43":94,"_95":417,"_98":418,"_49":420,"_55":56},[386],[419],29,{},{"_43":110,"_95":422,"_98":426,"_49":431,"_55":56},[423,120,424,425],43,92,99,[427,428,429,430],75,90,97,105,{},"Think in states, not booleans — instead of isLoading && !isError && hasData, model loading, error, loaded as distinct states",{"_43":44,"_45":434,"_47":48,"_49":435,"_51":437,"_53":438,"_55":56},"9u0p35gA",{"_90":436},"Ordered",[],"If you're new to state machines in UI:",{"_37":440,"_41":477},[441,455,466],{"_37":442,"_41":443},[],{"_43":44,"_45":444,"_47":48,"_49":445,"_51":446,"_53":454,"_55":56},"Wq2RNbtS",{},[447],{"_43":110,"_95":448,"_98":451,"_49":453,"_55":56},[449,450],20,48,[97,452],57,{},"Machine definition: document-machine.ts (commit 73c6efee7)",{"_37":456,"_41":457},[],{"_43":44,"_45":458,"_47":48,"_49":459,"_51":460,"_53":465,"_55":56},"bEl_IptI",{},[461],{"_43":110,"_95":462,"_98":463,"_49":464,"_55":56},[114],[450],{},"React hooks & selectors: use-document-machine.ts",{"_37":467,"_41":468},[],{"_43":44,"_45":469,"_47":48,"_49":470,"_51":471,"_53":476,"_55":56},"jk3cD4Ps",{},[472],{"_43":110,"_95":473,"_98":474,"_49":475,"_55":56},[388],[140],{},"UI dialog: resource-page-common.tsx",{"_43":44,"_45":478,"_47":48,"_49":479,"_51":480,"_53":495,"_55":56},"fWh_KRd9",{"_90":91},[481,488],{"_43":403,"_95":482,"_98":484,"_49":486,"_55":487},[483],34,[485],53,{},"hm://z6Mko5npVz4Bx9Rf4vkRUf2swvb568SDbhLwStaha3HzgrLS",{"_43":403,"_95":489,"_98":491,"_49":493,"_55":494},[490],94,[492],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:",{"_43":124,"_45":497,"_47":48,"_49":498,"_51":499,"_53":500,"_55":56},"Tyt7ztVq",{"_90":127},[],"Getting Started",{"_37":502,"_41":540},[503,516,528],{"_37":504,"_41":505},[],{"_43":44,"_45":506,"_47":48,"_49":507,"_51":508,"_53":515,"_55":56},"Z4Af4Ig3",{},[509],{"_43":403,"_95":510,"_98":511,"_49":513,"_55":514},[386],[512],14,{},"https://stately.ai/docs/xstate-v5","XState v5 docs",{"_37":517,"_41":518},[],{"_43":44,"_45":519,"_47":48,"_49":520,"_51":521,"_53":527,"_55":56},"YrMzUImI",{},[522],{"_43":403,"_95":523,"_98":524,"_49":525,"_55":526},[386],[405],{},"https://stately.ai/editor","Stately visual editor",{"_37":529,"_41":530},[],{"_43":44,"_45":531,"_47":48,"_49":532,"_51":533,"_53":539,"_55":56},"y9qtEiOg",{},[534],{"_43":403,"_95":535,"_98":536,"_49":537,"_55":538},[386],[142],{},"https://www.youtube.com/watch?v=VU1NKX6Qkxc","David Khourshid — \"State Machines in UI\"",{"_43":124,"_45":541,"_47":48,"_49":542,"_51":543,"_53":544,"_55":56},"PcxE4SGR",{"_90":91},[],"Resources",{"_37":546,"_41":547},[],{"_43":44,"_45":548,"_47":549,"_49":550,"_51":551,"_53":559,"_55":56},"PoO5J60k","bafy2bzacea5seqrzbgdxuthunjxv27bjaghy3mx4pte6vyu36fithgpiz7e7c",{},[552],{"_43":403,"_95":553,"_98":555,"_49":557,"_55":558},[554],9,[556],22,{},"https://unsplash.com/@imjash?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText","Photo by Joshua Ferrer on Unsplash","version","account","z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp","authors",[562],"path","/content/why-state-machines-are-a-game-changer-for-ui-development","createTime","2026-04-16T22:25:55.108Z","updateTime","2026-04-16T22:30:09.336Z","metadata",{"_573":574,"_575":576,"_577":578},"name","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","detachedBlocks",{},"genesis","generationInfo",{"_581":48,"_584":585},"generation","1776378355139","visibility","PUBLIC","isLatest",{"_565":590,"_560":549,"_592":6,"_593":562,"_45":594,"_595":-5,"_596":-5,"_597":-5,"_598":-5},[34,591],"why-state-machines-are-a-game-changer-for-ui-development","latest","uid","hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/why-state-machines-are-a-game-changer-for-ui-development","blockRef","blockRange","hostname","scheme","siteHomeIcon","dehydratedState",{"_602":603,"_604":605},"mutations",[],"queries",[606,987,1159,1201,1207,1221,1293],{"_607":608,"_982":983,"_985":986},"state",{"_609":610,"_967":968,"_969":970,"_971":-5,"_972":386,"_973":386,"_974":386,"_975":-5,"_976":-5,"_977":30,"_978":979,"_980":981},"data",{"_43":32,"_32":611,"_45":965},{"_34":612,"_560":549,"_561":562,"_563":961,"_565":566,"_567":568,"_569":570,"_571":962,"_579":963,"_581":48,"_582":964,"_586":587},[613,665,702,722,757,777,792,815,835,920,952],{"_37":614,"_41":662},[615,620,649],{"_37":616,"_41":617},[],{"_43":44,"_45":46,"_47":48,"_49":618,"_51":619,"_53":54,"_55":56},{},[],{"_37":621,"_41":642},[622,627,632,637],{"_37":623,"_41":624},[],{"_43":44,"_45":62,"_47":48,"_49":625,"_51":626,"_53":65,"_55":56},{},[],{"_37":628,"_41":629},[],{"_43":44,"_45":69,"_47":48,"_49":630,"_51":631,"_53":72,"_55":56},{},[],{"_37":633,"_41":634},[],{"_43":44,"_45":76,"_47":48,"_49":635,"_51":636,"_53":79,"_55":56},{},[],{"_37":638,"_41":639},[],{"_43":44,"_45":83,"_47":48,"_49":640,"_51":641,"_53":86,"_55":56},{},[],{"_43":44,"_45":88,"_47":48,"_49":643,"_51":644,"_53":102,"_55":56},{"_90":91},[645],{"_43":94,"_95":646,"_98":647,"_49":648,"_55":56},[97],[100],{},{"_37":650,"_41":651},[],{"_43":44,"_45":106,"_47":48,"_49":652,"_51":653,"_53":122,"_55":56},{},[654,658],{"_43":110,"_95":655,"_98":656,"_49":657,"_55":56},[112],[114],{},{"_43":94,"_95":659,"_98":660,"_49":661,"_55":56},[118],[120],{},{"_43":124,"_45":125,"_47":48,"_49":663,"_51":664,"_53":129,"_55":56},{"_90":127},[],{"_37":666,"_41":699},[667,676,681,686],{"_37":668,"_41":669},[],{"_43":44,"_45":135,"_47":48,"_49":670,"_51":671,"_53":144,"_55":56},{},[672],{"_43":94,"_95":673,"_98":674,"_49":675,"_55":56},[140],[142],{},{"_37":677,"_41":678},[],{"_43":44,"_45":148,"_47":48,"_49":679,"_51":680,"_53":151,"_55":56},{},[],{"_37":682,"_41":683},[],{"_43":110,"_45":155,"_47":48,"_49":684,"_51":685,"_53":160,"_55":56},{"_157":158},[],{"_37":687,"_41":688},[],{"_43":44,"_45":164,"_47":48,"_49":689,"_51":690,"_53":177,"_55":56},{},[691,695],{"_43":94,"_95":692,"_98":693,"_49":694,"_55":56},[112],[170],{},{"_43":110,"_95":696,"_98":697,"_49":698,"_55":56},[170],[175],{},{"_43":124,"_45":179,"_47":48,"_49":700,"_51":701,"_53":182,"_55":56},{"_90":127},[],{"_37":703,"_41":719},[704,709,714],{"_37":705,"_41":706},[],{"_43":44,"_45":188,"_47":48,"_49":707,"_51":708,"_53":191,"_55":56},{},[],{"_37":710,"_41":711},[],{"_43":110,"_45":195,"_47":48,"_49":712,"_51":713,"_53":199,"_55":56},{"_157":197},[],{"_37":715,"_41":716},[],{"_43":44,"_45":203,"_47":48,"_49":717,"_51":718,"_53":206,"_55":56},{},[],{"_43":124,"_45":208,"_47":48,"_49":720,"_51":721,"_53":211,"_55":56},{"_90":127},[],{"_37":723,"_41":754},[724,729,734,739,744,749],{"_37":725,"_41":726},[],{"_43":44,"_45":217,"_47":48,"_49":727,"_51":728,"_53":220,"_55":56},{},[],{"_37":730,"_41":731},[],{"_43":110,"_45":224,"_47":48,"_49":732,"_51":733,"_53":228,"_55":56},{"_157":226},[],{"_37":735,"_41":736},[],{"_43":44,"_45":232,"_47":48,"_49":737,"_51":738,"_53":235,"_55":56},{},[],{"_37":740,"_41":741},[],{"_43":110,"_45":239,"_47":48,"_49":742,"_51":743,"_53":242,"_55":56},{"_157":226},[],{"_37":745,"_41":746},[],{"_43":44,"_45":246,"_47":48,"_49":747,"_51":748,"_53":249,"_55":56},{},[],{"_37":750,"_41":751},[],{"_43":110,"_45":253,"_47":48,"_49":752,"_51":753,"_53":256,"_55":56},{"_157":226},[],{"_43":124,"_45":258,"_47":48,"_49":755,"_51":756,"_53":261,"_55":56},{"_90":127},[],{"_37":758,"_41":774},[759,764,769],{"_37":760,"_41":761},[],{"_43":44,"_45":267,"_47":48,"_49":762,"_51":763,"_53":270,"_55":56},{},[],{"_37":765,"_41":766},[],{"_43":110,"_45":274,"_47":48,"_49":767,"_51":768,"_53":277,"_55":56},{"_157":197},[],{"_37":770,"_41":771},[],{"_43":44,"_45":281,"_47":48,"_49":772,"_51":773,"_53":284,"_55":56},{},[],{"_43":124,"_45":286,"_47":48,"_49":775,"_51":776,"_53":289,"_55":56},{"_90":127},[],{"_37":778,"_41":789},[779,784],{"_37":780,"_41":781},[],{"_43":44,"_45":295,"_47":48,"_49":782,"_51":783,"_53":298,"_55":56},{},[],{"_37":785,"_41":786},[],{"_43":110,"_45":302,"_47":48,"_49":787,"_51":788,"_53":305,"_55":56},{"_157":158},[],{"_43":124,"_45":307,"_47":48,"_49":790,"_51":791,"_53":310,"_55":56},{"_90":127},[],{"_37":793,"_41":812},[794,803],{"_37":795,"_41":796},[],{"_43":44,"_45":316,"_47":48,"_49":797,"_51":798,"_53":327,"_55":56},{},[799],{"_43":110,"_95":800,"_98":801,"_49":802,"_55":56},[321,322],[324,325],{},{"_37":804,"_41":805},[],{"_43":44,"_45":331,"_47":48,"_49":806,"_51":807,"_53":340,"_55":56},{},[808],{"_43":94,"_95":809,"_98":810,"_49":811,"_55":56},[336],[338],{},{"_43":124,"_45":342,"_47":48,"_49":813,"_51":814,"_53":345,"_55":56},{"_90":127},[],{"_37":816,"_41":832},[817,822,827],{"_37":818,"_41":819},[],{"_43":44,"_45":351,"_47":48,"_49":820,"_51":821,"_53":354,"_55":56},{},[],{"_37":823,"_41":824},[],{"_43":110,"_45":358,"_47":48,"_49":825,"_51":826,"_53":361,"_55":56},{"_157":226},[],{"_37":828,"_41":829},[],{"_43":44,"_45":365,"_47":48,"_49":830,"_51":831,"_53":368,"_55":56},{},[],{"_43":124,"_45":370,"_47":48,"_49":833,"_51":834,"_53":373,"_55":56},{"_90":127},[],{"_37":836,"_41":917},[837,877],{"_37":838,"_41":874},[839,848,861],{"_37":840,"_41":841},[],{"_43":44,"_45":381,"_47":48,"_49":842,"_51":843,"_53":390,"_55":56},{},[844],{"_43":94,"_95":845,"_98":846,"_49":847,"_55":56},[386],[388],{},{"_37":849,"_41":850},[],{"_43":44,"_45":394,"_47":48,"_49":851,"_51":852,"_53":409,"_55":56},{},[853,857],{"_43":94,"_95":854,"_98":855,"_49":856,"_55":56},[386],[400],{},{"_43":403,"_95":858,"_98":859,"_49":860,"_55":408},[405],[140],{},{"_37":862,"_41":863},[],{"_43":44,"_45":413,"_47":48,"_49":864,"_51":865,"_53":432,"_55":56},{},[866,870],{"_43":94,"_95":867,"_98":868,"_49":869,"_55":56},[386],[419],{},{"_43":110,"_95":871,"_98":872,"_49":873,"_55":56},[423,120,424,425],[427,428,429,430],{},{"_43":44,"_45":434,"_47":48,"_49":875,"_51":876,"_53":438,"_55":56},{"_90":436},[],{"_37":878,"_41":906},[879,888,897],{"_37":880,"_41":881},[],{"_43":44,"_45":444,"_47":48,"_49":882,"_51":883,"_53":454,"_55":56},{},[884],{"_43":110,"_95":885,"_98":886,"_49":887,"_55":56},[449,450],[97,452],{},{"_37":889,"_41":890},[],{"_43":44,"_45":458,"_47":48,"_49":891,"_51":892,"_53":465,"_55":56},{},[893],{"_43":110,"_95":894,"_98":895,"_49":896,"_55":56},[114],[450],{},{"_37":898,"_41":899},[],{"_43":44,"_45":469,"_47":48,"_49":900,"_51":901,"_53":476,"_55":56},{},[902],{"_43":110,"_95":903,"_98":904,"_49":905,"_55":56},[388],[140],{},{"_43":44,"_45":478,"_47":48,"_49":907,"_51":908,"_53":495,"_55":56},{"_90":91},[909,913],{"_43":403,"_95":910,"_98":911,"_49":912,"_55":487},[483],[485],{},{"_43":403,"_95":914,"_98":915,"_49":916,"_55":494},[490],[492],{},{"_43":124,"_45":497,"_47":48,"_49":918,"_51":919,"_53":500,"_55":56},{"_90":127},[],{"_37":921,"_41":949},[922,931,940],{"_37":923,"_41":924},[],{"_43":44,"_45":506,"_47":48,"_49":925,"_51":926,"_53":515,"_55":56},{},[927],{"_43":403,"_95":928,"_98":929,"_49":930,"_55":514},[386],[512],{},{"_37":932,"_41":933},[],{"_43":44,"_45":519,"_47":48,"_49":934,"_51":935,"_53":527,"_55":56},{},[936],{"_43":403,"_95":937,"_98":938,"_49":939,"_55":526},[386],[405],{},{"_37":941,"_41":942},[],{"_43":44,"_45":531,"_47":48,"_49":943,"_51":944,"_53":539,"_55":56},{},[945],{"_43":403,"_95":946,"_98":947,"_49":948,"_55":538},[386],[142],{},{"_43":124,"_45":541,"_47":48,"_49":950,"_51":951,"_53":544,"_55":56},{"_90":91},[],{"_37":953,"_41":954},[],{"_43":44,"_45":548,"_47":549,"_49":955,"_51":956,"_53":559,"_55":56},{},[957],{"_43":403,"_95":958,"_98":959,"_49":960,"_55":558},[554],[556],{},[562],{"_573":574,"_575":576,"_577":578},{},{"_581":48,"_584":585},{"_45":594,"_593":562,"_565":966,"_560":549,"_595":-5,"_596":-5,"_597":-5,"_598":-5,"_592":6},[34,591],"dataUpdateCount",1,"dataUpdatedAt",1776802109634,"error","errorUpdateCount","errorUpdatedAt","fetchFailureCount","fetchFailureReason","fetchMeta","isInvalidated","status","success","fetchStatus","idle","queryKey",[984,594,549,6],"ENTITY","queryHash","[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/why-state-machines-are-a-game-changer-for-ui-development\",\"bafy2bzacea5seqrzbgdxuthunjxv27bjaghy3mx4pte6vyu36fithgpiz7e7c\",true]",{"_607":988,"_982":1157,"_985":1158},{"_609":989,"_967":968,"_969":1156,"_971":-5,"_972":386,"_973":386,"_974":386,"_975":-5,"_976":-5,"_977":30,"_978":979,"_980":981},{"_43":32,"_32":990,"_45":1153},{"_34":991,"_560":1141,"_561":562,"_563":1142,"_565":56,"_567":1143,"_569":1144,"_571":1145,"_579":1149,"_581":1150,"_582":1151,"_586":587},[992,1000,1012,1025,1032,1079,1100,1108],{"_37":993,"_41":994},[],{"_43":124,"_45":995,"_47":996,"_49":997,"_51":998,"_53":999,"_55":56},"YS5-lwb-","bafy2bzacedo2fapga62cenj2wqdo7fnnbwssy3ohyonmse3l74fds24nqx4r6",{},[],"Modeling UI with State Machines should be the norm.",{"_37":1001,"_41":1002},[],{"_43":44,"_45":1003,"_47":996,"_49":1004,"_51":1005,"_53":1011,"_55":56},"HIUNgDv3",{},[1006],{"_43":94,"_95":1007,"_98":1008,"_49":1010,"_55":56},[386],[1009],79,{},"A practical guide to building better interfaces with XState, React & TypeScript",{"_37":1013,"_41":1014},[],{"_43":44,"_45":1015,"_47":996,"_49":1016,"_51":1017,"_53":1024,"_55":56},"RH2vgIqw",{},[1018],{"_43":110,"_95":1019,"_98":1021,"_49":1023,"_55":56},[1020],132,[1022],141,{},"Modern UI development is full of invisible complexity: async flows, conflicting states, edge cases, and fragile logic spread across useEffects and booleans.",{"_37":1026,"_41":1027},[],{"_43":44,"_45":1028,"_47":996,"_49":1029,"_51":1030,"_53":1031,"_55":56},"1i3NXohu",{},[],"This series is about doing it differently.",{"_37":1033,"_41":1069},[1034,1041,1048,1055,1062],{"_37":1035,"_41":1036},[],{"_43":44,"_45":1037,"_47":996,"_49":1038,"_51":1039,"_53":1040,"_55":56},"cP0mEJaa",{},[],"Easier to understand",{"_37":1042,"_41":1043},[],{"_43":44,"_45":1044,"_47":996,"_49":1045,"_51":1046,"_53":1047,"_55":56},"mUUMMN68",{},[],"Safer to extend",{"_37":1049,"_41":1050},[],{"_43":44,"_45":1051,"_47":996,"_49":1052,"_51":1053,"_53":1054,"_55":56},"xkA4h4Fv",{},[],"Visually predictable",{"_37":1056,"_41":1057},[],{"_43":44,"_45":1058,"_47":996,"_49":1059,"_51":1060,"_53":1061,"_55":56},"1AW5Zc7P",{},[],"Naturally testable",{"_37":1063,"_41":1064},[],{"_43":44,"_45":1065,"_47":996,"_49":1066,"_51":1067,"_53":1068,"_55":56},"mISZl3dK",{},[],"Easy to Maintain and Refactor",{"_43":44,"_45":1070,"_47":996,"_49":1071,"_51":1072,"_53":1078,"_55":56},"mZU_BNzy",{"_90":91},[1073],{"_43":94,"_95":1074,"_98":1075,"_49":1077,"_55":56},[483],[1076],64,{},"By modeling your UI behavior with state machines and statecharts, you can write code that’s:",{"_37":1080,"_41":1081},[],{"_43":44,"_45":1082,"_47":996,"_49":1083,"_51":1084,"_53":1099,"_55":56},"dT3b7j6V",{},[1085],{"_43":94,"_95":1086,"_98":1092,"_49":1098,"_55":56},[1087,1088,1089,1090,1091],100,134,142,149,168,[1093,1094,1095,1096,1097],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.",{"_37":1101,"_41":1102},[],{"_43":44,"_45":1103,"_47":1104,"_49":1105,"_51":1106,"_53":1107,"_55":56},"-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.",{"_37":1109,"_41":1136},[1110],{"_37":1111,"_41":1112},[],{"_43":1113,"_45":1114,"_47":996,"_49":1115,"_51":1135,"_53":56,"_55":56},"Query","XMasrKG1",{"_1116":1117,"_1118":1119,"_1120":1121,"_1134":30},"columnCount",3,"style","List","query",{"_1122":1123,"_1128":1129},"includes",[1124],{"_1125":562,"_565":34,"_1126":1127},"space","mode","Children","sort",[1130],{"_1131":30,"_1132":1133},"reverse","term","UpdateTime","banner",[],{"_43":124,"_45":1137,"_47":996,"_49":1138,"_51":1139,"_53":1140,"_55":56},"JuhiSEfW",{"_90":127},[],"Posts","bafy2bzacecwxx5llylg2hzhhcsf4r3dzvtr22wwk6wnw4qklwcvdp6jxln2ni",[562],"1970-01-01T00:00:00Z","2025-04-24T21:23:24.377Z",{"_573":1146,"_1147":1148},"UI with State Machines","siteUrl","https://ui-with-state-machines.hyper.media",{},"bafy2bzacecztctsdsles75mugrpzhgspjvfnf7atqvn5cmqqbccz4grooldak",{"_581":1150,"_584":1152},"0",{"_45":1154,"_593":562,"_565":1155,"_560":-5,"_595":-5,"_596":-5,"_597":-5,"_598":-5,"_592":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp",[],1776802109641,[984,1154,-5,6],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",null,true]",{"_607":1160,"_982":1198,"_985":1200},{"_609":1161,"_967":968,"_969":1197,"_971":-5,"_972":386,"_973":386,"_974":386,"_975":-5,"_976":-5,"_977":30,"_978":979,"_980":981},[1162],{"_43":32,"_45":1163,"_565":1167,"_563":1168,"_567":1169,"_569":1174,"_1177":1178,"_581":1179,"_560":1166,"_1180":1181,"_1184":1185,"_582":1192,"_1194":-5,"_571":1195,"_586":587},{"_45":1164,"_593":562,"_565":1165,"_560":1166,"_595":-5,"_596":-5,"_597":-5,"_598":-5,"_592":6},"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content",[34],"bafy2bzacecso2o7bwea36sevjo45wf2phruj5jcoomebikt7btumd3xpcrax2",[34],[562],{"_1170":1171,"_1172":1173},"seconds","1743456714","nanos",453000000,{"_1170":1175,"_1172":1176},"1776378355",213000000,"sortTime","2025-03-31T21:31:54.453Z","bafy2bzacecefqjbssb4ej2oc4wbspy3cvuuadbabfzxrzls56zqiissf6inw4","breadcrumbs",[1182],{"_573":1146,"_565":56,"_1183":30},"isMissing","activitySummary",{"_1186":-5,"_1187":56,"_1188":386,"_1189":1190,"_1191":6},"latestCommentTime","latestCommentId","commentCount","latestChangeTime",{"_1170":1175,"_1172":1176},"isUnread",{"_581":1179,"_584":1193},"1743456714453","redirectInfo",{"_573":1196},"Content",1776802109636,[1199,1154,1127],"DOC_LIST_DIRECTORY","[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\",\"Children\"]",{"_607":1202,"_982":1205,"_985":1206},{"_609":1203,"_967":968,"_969":1204,"_971":-5,"_972":386,"_973":386,"_974":386,"_975":-5,"_976":-5,"_977":30,"_978":979,"_980":981},[],1776802109638,[1199,594,1127],"[\"DOC_LIST_DIRECTORY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/why-state-machines-are-a-game-changer-for-ui-development\",\"Children\"]",{"_607":1208,"_982":1218,"_985":1220},{"_609":1209,"_967":968,"_969":1217,"_971":-5,"_972":386,"_973":386,"_974":386,"_975":-5,"_976":-5,"_977":30,"_978":979,"_980":981},{"_1210":968,"_1211":386,"_1212":17,"_37":386,"_1213":1214,"_1215":1216},"citations","comments","changes","authorUids",[562],"blocks",{},1776802109647,[1219,594],"DOCUMENT_INTERACTION_SUMMARY","[\"DOCUMENT_INTERACTION_SUMMARY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/why-state-machines-are-a-game-changer-for-ui-development\"]",{"_607":1222,"_982":1291,"_985":1292},{"_609":1223,"_967":968,"_969":1290,"_971":-5,"_972":386,"_973":386,"_974":386,"_975":-5,"_976":-5,"_977":30,"_978":979,"_980":981},{"_43":32,"_32":1224,"_45":1288},{"_34":1225,"_560":1166,"_561":562,"_563":1282,"_565":1283,"_567":1178,"_569":1284,"_571":1285,"_579":1286,"_581":1179,"_582":1287,"_586":587},[1226,1253,1260,1268,1276],{"_37":1227,"_41":1247},[1228,1239],{"_37":1229,"_41":1230},[],{"_43":1231,"_45":1232,"_47":1233,"_49":1234,"_51":1237,"_53":56,"_55":1238},"Embed","I01RCHLp","bafy2bzacedffkd4rdzzkikyjdm23zb2evqbqhnwklr5nxlcaod7pynmzj75um",{"_1235":1236},"view","Card",[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong?v=bafy2bzacecxbssfu6tsgckkty6krdldbq232rib3mvbbxhfhi745pqg4m7zsg&l",{"_37":1240,"_41":1241},[],{"_43":1231,"_45":1242,"_47":1243,"_49":1244,"_51":1245,"_53":56,"_55":1246},"TbDjWW-e","bafy2bzaced2hqcefph7tgklninzu5dcebzjmxq67dmjn7puloiksgwttj6gig",{"_1235":1236},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/states-events-and-transitions-demystified?v=bafy2bzaceasflmgw6yafc3mygkufwzsrzcjoh5vbpczy532qvitkfsli3icns&l",{"_43":124,"_45":1248,"_47":1249,"_49":1250,"_51":1251,"_53":1252,"_55":56},"SpGu0tBK","bafy2bzaceblppdcojdh2aj4zbh6aax7c6a6ynzvetc2elfxbi44o2mxwvc5go",{"_90":127},[],"English",{"_37":1254,"_41":1255},[],{"_43":124,"_45":1256,"_47":1249,"_49":1257,"_51":1258,"_53":1259,"_55":56},"nvxL-VgX",{},[],"Spanish",{"_37":1261,"_41":1262},[],{"_43":1231,"_45":1263,"_47":1264,"_49":1265,"_51":1266,"_53":56,"_55":1267},"XG17WIWR","bafy2bzacebsxm4y2fsik3g3ovk5kx4kri56g32o6r7dszvekaqugfrqbmhmx6",{"_1235":1236},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/you-are-writing-ui-state-wrong/estas-gestionando-el-estado-de-tus-interfaces-mal?v=bafy2bzacedeehy4mmf4hniuuxqoww54eacrhpypjtzu5qotzkgrq2bm6lfmqm&l",{"_37":1269,"_41":1270},[],{"_43":1231,"_45":1271,"_47":1272,"_49":1273,"_51":1274,"_53":56,"_55":1275},"LsgymWG9uV","bafy2bzacedonvbcc5bzwy2j5r7wnwgaco4rcrpyo5g6zqdugpfbdejp5oodeg",{"_1235":1236},[],"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content/estados-eventos-y-transiciones-desmitificados",{"_37":1277,"_41":1278},[],{"_43":1231,"_45":1279,"_47":1166,"_49":1280,"_51":1281,"_53":56,"_55":594},"dyEQC00biY",{"_1235":1236},[],[562],"/content","2026-04-16T22:25:55.213Z",{"_573":1196},{},{"_581":1179,"_584":1193},{"_45":1164,"_593":562,"_565":1289,"_560":-5,"_595":-5,"_596":-5,"_597":-5,"_598":-5},[34],1776802109637,[984,1164,-5,30],"[\"ENTITY\",\"hm://z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp/content\",null,false]",{"_607":1294,"_982":1301,"_985":1303},{"_609":1295,"_967":968,"_969":1300,"_971":-5,"_972":386,"_973":386,"_974":386,"_975":-5,"_976":-5,"_977":30,"_978":979,"_980":981},{"_43":561,"_45":1296,"_571":1298},{"_560":1141,"_593":562,"_45":1154,"_565":1297,"_595":-5,"_596":-5,"_597":-5,"_598":-5},[],{"_573":1146,"_1147":1148,"_1299":-5,"_575":-5},"icon",1776802109649,[1302,562],"ACCOUNT","[\"ACCOUNT\",\"z6MkhBiheioCs7btwVLUcnSCcFPdhTGGHSHpR4SHTyAobUUp\"]","enableWebSigning","origin","homeMetadata",{"_573":1146,"_1147":1148},"originHomeId",{"_593":562,"_45":1154,"_565":1310,"_560":-5,"_595":-5,"_596":-5,"_597":-5,"_598":-5},[],"meta",{"_1313":1314,"_1348":1349},"values",{"_1315":1316,"_1318":1319,"_1320":1321,"_1322":1323,"_1325":1326,"_1327":1328,"_1329":1330,"_1332":1333,"_1334":1335,"_1336":1337,"_1338":1339,"_1340":1341,"_1342":1343,"_1344":1345,"_1346":1347},"document.generationInfo.generation",[1317],"bigint","dehydratedState.queries.0.state.data.document.generationInfo.generation",[1317],"dehydratedState.queries.1.state.data.document.generationInfo.generation",[1317],"dehydratedState.queries.1.queryKey.2",[1324],"undefined","dehydratedState.queries.2.state.data.0.createTime.seconds",[1317],"dehydratedState.queries.2.state.data.0.updateTime.seconds",[1317],"dehydratedState.queries.2.state.data.0.sortTime",[1331],"Date","dehydratedState.queries.2.state.data.0.activitySummary.latestCommentTime",[1324],"dehydratedState.queries.2.state.data.0.activitySummary.latestChangeTime.seconds",[1317],"dehydratedState.queries.2.state.data.0.generationInfo.generation",[1317],"dehydratedState.queries.2.state.data.0.redirectInfo",[1324],"dehydratedState.queries.5.state.data.document.generationInfo.generation",[1317],"dehydratedState.queries.5.queryKey.2",[1324],"dehydratedState.queries.6.state.data.metadata.icon",[1324],"dehydratedState.queries.6.state.data.metadata.summary",[1324],"referentialEqualities",{"_1315":1350,"_1327":1351,"_1336":1352},[1318],[1334],[1340],"actionData","errors"]