# [Pixel Post] State Management in SpriteDX — Why We Chose Signals

SpriteDX has a lot going on: panels that expand and collapse, previews that update in real time, AI jobs that stream progress. All those little moving parts need to stay in sync without dragging the whole app into a rerender storm.

We wanted state management that felt light, expressive, and didn’t bury us in boilerplate. That’s why we chose [`@preact/signals-react`](https://www.npmjs.com/package/@preact/signals-react).

---

## Why Signals?

Signals are just reactive values:

```plaintext
import { signal } from "@preact/signals-react";

export const isGenerating = signal(false);
```

Drop `{isGenerating}` into JSX and React will update *only that part of the tree* when it changes. No context wiring, no dependency arrays, no memo gymnastics.

---

## How this helps SpriteDX

* **Granular updates** → collapsing a panel doesn’t rerender the whole workspace.
    
* **Shared state, no ceremony** → AI pipeline status and preview sprites are just signals, used anywhere.
    
* **Simple mental model** → state is a value, you read and write it, React handles the rest.
    

---

## The vibe

Signals make SpriteDX feel the way we want the product itself to feel: fast, lightweight, and a little bit magical ✨. Instead of fighting state, we can focus on building a playful, responsive creative tool.

That’s why we picked signals. They keep the app snappy and the codebase uncluttered — exactly the kind of foundation SpriteDX needs.