🤯 The UI Logic Spiral

Let’s be honest: your React component’s state logic probably started simple.

A couple of booleans. Maybe a useEffect. Just enough to get things working.

But then things changed:

You added a loading state.
Then an error state.
Then a retry flow.
Then an edge case where loading and error coexist.

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.

Sound familiar?

🧠 UIs Aren’t Just State — They’re Behavior

We often treat UI state as a flat structure of booleans or enums.

But in reality, your UI is a process. A sequence. A user clicks a button, something happens, and the UI responds.

That’s not just state. That’s state over time — and that’s exactly what state machines are made for.

✅ The Solution: Model Behavior, Not Just State

What if, instead of wiring together a dozen flags, you modeled your UI logic as a state machine?

With a state machine, you:

Define all possible states up front
Describe only valid transitions
Eliminate contradictory or impossible states
Get a visual map of your logic — for free

Let’s look at a simple example.

🧪 Example: Toggle with 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});

That’s it.

One machine. Two states. One event. No booleans. No conditionals. No useState.

Simple, expressive, and type-safe.

🔍 Visualizing It

Here’s what that machine actually looks like:

$\"State$ State machine visualizer from stately.ai

Button

Tools like Stately.ai let you see your machines as flow diagrams — so you and your team instantly understand what’s going on.

🛠️ Why This Matters

This isn’t just for toggles. You can use state machines to:

Simplify multi-step forms and wizards
Model modals, dropdowns, or onboarding flows
Eliminate inconsistent UI states
Replace messy useEffect logic with declarative transitions

And when you pair XState + React + TypeScript, you unlock type-safe, testable UI logic that scales.

⏭️ Coming Up Next: States, Events, and Transitions

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.

You’ll learn how to go from messy state to modeled behavior in minutes.

💡 Try This

Pick a small UI interaction in your app — a toggle, modal, or dropdown — and try modeling it as a state machine.

Just one.

Then ask yourself: was this easier to reason about?

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.

Thanks for reading,\nHoracio

","enableWebSigning","https://xlavapies.com","origin","homeMetadata",{"_387":1328,"_1315":1329,"_1115":1324,"_1330":1331,"_1332":6,"_1333":1334,"_1335":1336},"xlavapies","ipfs://bafkreibjgpcc23vqvrrpgybnlsu2sjglmh2s2yxd74ejujfx2zcnvuwgeq","seedExperimentalLogo","ipfs://bafkreict5dp4nudj5cgl6kc22ws4cd3hubz25y7dkhkescqpuqale7363e","showActivity","contentWidth","L","theme",{"_1337":1338},"headerLayout","Center","originHomeId",{"_570":1341,"_37":1342,"_546":1343,"_541":-5,"_572":-5,"_573":-5,"_574":-5,"_575":-5},"z6MkgAtUyLGa8nUn3xDbvfWprE58pYMDeuhD8sH59T6NYiuj","hm://z6MkgAtUyLGa8nUn3xDbvfWprE58pYMDeuhD8sH59T6NYiuj",[],"meta",{"_1346":1347,"_1409":1410},"values",{"_1348":1349,"_1351":1352,"_1353":1354,"_1355":1356,"_1358":1359,"_1360":1361,"_1362":1363,"_1365":1366,"_1367":1368,"_1369":1370,"_1371":1372,"_1373":1374,"_1375":1376,"_1377":1378,"_1379":1380,"_1381":1382,"_1383":1384,"_1385":1386,"_1387":1388,"_1389":1390,"_1391":1392,"_1393":1394,"_1395":1396,"_1397":1398,"_1399":1400,"_1401":1402,"_1403":1404,"_1405":1406,"_1407":1408},"document.generationInfo.generation",[1350],"bigint","dehydratedState.queries.0.state.data.document.generationInfo.generation",[1350],"dehydratedState.queries.1.state.data.document.generationInfo.generation",[1350],"dehydratedState.queries.1.queryKey.2",[1357],"undefined","dehydratedState.queries.2.state.data.0.createTime.seconds",[1350],"dehydratedState.queries.2.state.data.0.updateTime.seconds",[1350],"dehydratedState.queries.2.state.data.0.sortTime",[1364],"Date","dehydratedState.queries.2.state.data.0.activitySummary.latestCommentTime",[1357],"dehydratedState.queries.2.state.data.0.activitySummary.latestChangeTime.seconds",[1350],"dehydratedState.queries.2.state.data.0.generationInfo.generation",[1350],"dehydratedState.queries.2.state.data.0.redirectInfo",[1357],"dehydratedState.queries.2.state.data.1.createTime.seconds",[1350],"dehydratedState.queries.2.state.data.1.updateTime.seconds",[1350],"dehydratedState.queries.2.state.data.1.sortTime",[1364],"dehydratedState.queries.2.state.data.1.activitySummary.latestCommentTime",[1357],"dehydratedState.queries.2.state.data.1.activitySummary.latestChangeTime.seconds",[1350],"dehydratedState.queries.2.state.data.1.generationInfo.generation",[1350],"dehydratedState.queries.2.state.data.1.redirectInfo",[1357],"dehydratedState.queries.3.state.data.0.createTime.seconds",[1350],"dehydratedState.queries.3.state.data.0.updateTime.seconds",[1350],"dehydratedState.queries.3.state.data.0.sortTime",[1364],"dehydratedState.queries.3.state.data.0.activitySummary.latestCommentTime",[1357],"dehydratedState.queries.3.state.data.0.activitySummary.latestChangeTime.seconds",[1350],"dehydratedState.queries.3.state.data.0.generationInfo.generation",[1350],"dehydratedState.queries.3.state.data.0.redirectInfo",[1357],"dehydratedState.queries.5.state.data.document.generationInfo.generation",[1350],"dehydratedState.queries.5.queryKey.2",[1357],"dehydratedState.queries.6.state.data.metadata.icon",[1357],"dehydratedState.queries.6.state.data.metadata.summary",[1357],"referentialEqualities",{"_1348":1411,"_1353":1412,"_1360":1413,"_1369":1414,"_1375":1415,"_1389":1416},[1351],[1373],[1367],[1401],[1381],[1395],"actionData","errors"]