State and Logic Patterns

State management is one of the most critical aspects of frontend development. This section covers advanced patterns beyond basic React state.

Why Advanced State Management?

Basic: useState, useContext
Advanced: Flux, Atoms, Signals, State Machines

When you need it:

Global state across many components
Complex state logic
Time travel / undo-redo
Optimistic updates
State persistence
Cross-tab synchronization

State Management Evolution

1. Component State (2013)

const [count, setCount] = useState(0);

2. Flux Pattern (2014)

Action → Dispatcher → Store → View

3. Atom-Based (2020)

const countAtom = atom(0);

4. Signals (2022)

const count = signal(0);

5. State Machines (XState)

const machine = createMachine({...});

Coverage

This section includes:

Flux Architecture - Redux patterns and best practices
Atom-Based State - Recoil and Jotai patterns
Signals - Solid.js-inspired reactivity
State Machines - XState patterns
Undo/Redo - History management
Optimistic UI - Advanced patterns
Persistence - State persistence strategies
Cross-Tab Sync - BroadcastChannel patterns

Quick Comparison

// React Context (Built-in)
const ThemeContext = createContext();
// Pros: Built-in, simple
// Cons: Re-renders, no selectors

// Redux (Flux)
const store = configureStore({ reducer });
// Pros: Predictable, DevTools, middleware
// Cons: Boilerplate, learning curve

// Recoil/Jotai (Atoms)
const countAtom = atom(0);
// Pros: Fine-grained, minimal boilerplate
// Cons: Less mature ecosystem

// Signals
const count = signal(0);
// Pros: Extremely fast, automatic tracking
// Cons: Different mental model

// XState (State Machines)
const machine = createMachine({...});
// Pros: Impossible states impossible, visualizable
// Cons: Learning curve, verbose