# State Management

Domain classification: design-engineering. Lifecycle: `experimental`.

## Repository Boundary

State management is a Design Engineering topic, not a seventh domain. It owns consumer UI decisions about authoritative values, events, effects, reconciliation, and lifetime. Layout continues to own spatial composition; Motion owns optional presentation timing. Server transaction protocols, universal library rankings, and shared component implementations are outside this collection.

## Reusable Method

Start with [the decision tree](https://style.gallery/library/design-engineering/state-management/decision-tree/index.md), fill in the [state brief](https://style.gallery/library/design-engineering/state-management/state-brief/index.md), select the smallest relevant patterns, then compose a [screen recipe](https://style.gallery/library/design-engineering/state-management/recipes/index/index.md). The [verification matrix](https://style.gallery/library/design-engineering/state-management/verification/index.md) separates expected behavior from observed evidence.

한국어 검색 안내: 상태 관리, 상태 소유권, 파생 상태, 초안과 저장본, 비동기 요청 경합, URL 동기화, 상태 복원은 아래 패턴에서 찾을 수 있습니다.

### Pattern Catalog

| Category                 | Pattern                                                                                                                                               | Failure prevented                                                                           |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| Ownership and derivation | [Single Owner And Controlled Inputs](https://style.gallery/library/design-engineering/state-management/patterns/single-owner/index.md)                | Keep one authoritative value when several controls edit the same setting.                   |
| Ownership and derivation | [Derived State From Authoritative Inputs](https://style.gallery/library/design-engineering/state-management/patterns/derived-state/index.md)          | Prevent totals, filtered lists, and dirty flags from drifting away from their inputs.       |
| Ownership and derivation | [Selection By Stable Identity](https://style.gallery/library/design-engineering/state-management/patterns/id-selection/index.md)                      | Keep selection attached to an entity while a collection reorders or refreshes.              |
| Editing and persistence  | [Draft And Persisted Baseline](https://style.gallery/library/design-engineering/state-management/patterns/draft-and-baseline/index.md)                | Preserve editable work while distinguishing it from the last acknowledged saved value.      |
| Editing and persistence  | [Submitted Snapshot And Save Acknowledgement](https://style.gallery/library/design-engineering/state-management/patterns/submitted-snapshot/index.md) | Keep later edits dirty when an earlier submitted snapshot finishes saving.                  |
| Editing and persistence  | [Unsaved Changes And Navigation](https://style.gallery/library/design-engineering/state-management/patterns/unsaved-navigation/index.md)              | Make leaving an edited screen an explicit decision without losing the current draft.        |
| Asynchronous consistency | [Latest Request Wins](https://style.gallery/library/design-engineering/state-management/patterns/latest-request-wins/index.md)                        | Prevent an older read response from replacing the result of a newer user intent.            |
| Asynchronous consistency | [Single Flight And Duplicate Submission](https://style.gallery/library/design-engineering/state-management/patterns/single-flight/index.md)           | Apply an explicit policy to repeated activation of one pending operation.                   |
| Asynchronous consistency | [Optimistic Overlay And Recovery](https://style.gallery/library/design-engineering/state-management/patterns/optimistic-overlay/index.md)             | Show a speculative change while preserving an authoritative base for recovery.              |
| Navigation and lifetime  | [URL State And History](https://style.gallery/library/design-engineering/state-management/patterns/url-state/index.md)                                | Keep shareable screen state consistent across links, refresh, and browser history.          |
| Navigation and lifetime  | [Identity Boundary And Reset](https://style.gallery/library/design-engineering/state-management/patterns/identity-reset/index.md)                     | Prevent temporary state and pending outcomes from leaking across entity or account changes. |
| Navigation and lifetime  | [Versioned And Scoped State Restore](https://style.gallery/library/design-engineering/state-management/patterns/versioned-restore/index.md)           | Restore persisted preferences only when their schema and ownership scope are valid.         |

### Relationship To Existing Contracts

The [Component Contract](https://style.gallery/library/design-engineering/component-contract/index.md) remains the public handoff for semantics, events, focus, and asynchronous ownership. Its save example remains in place. [Worked Examples](https://style.gallery/library/design-engineering/worked-examples/index.md) supplies existing product scenarios; these patterns make their mechanisms individually selectable.

This collection contains 12 patterns in four categories and four [recipes](https://style.gallery/library/design-engineering/state-management/recipes/index/index.md). The [composition matrix](https://style.gallery/library/design-engineering/state-management/recipes/index/index.md#composition-matrix) records essential and replaceable choices. Plain JavaScript examples are the local executable reference; framework adapters must preserve their declared invariants.

## Opinionated Guidance

Start by locating the authoritative value and its lifetime. Introduce a shared store only when shared ownership or subscriptions require it. Keep remote data authority distinct from local cache ownership, and model request status separately from draft validity and persisted revision.

## Platform-Specific Guidance

Choose native controls and platform navigation before adapters. URL parsing, storage access, focus recovery, and framework disposal each need target-runtime checks beyond the Node examples.

## Unsupported Absolutes

Neither a reducer nor a state machine guarantees race freedom. No library is the default for this collection. Local executable examples do not establish backend, accessibility, or browser conformance.

## Verification Contract

A reader should find a pattern from a failure symptom, identify its owner and minimal implementation, compose it into a screen, and locate a repeatable acceptance sequence. Run `bun run test:state-management` for the 12 local examples; record browser and backend checks separately.

## Source, License, And Attribution

Locally authored synthesis and examples. No upstream implementation is copied. These experimental contracts describe consumer-owned behavior; review when a failure, ownership change, or platform change invalidates an assumption.

## IA Navigation

Parent: [Design Engineering](https://style.gallery/library/design-engineering/index/index.md).
Next: [Continue the state management route](https://style.gallery/library/design-engineering/state-management/decision-tree/index.md).