Which one should I pick for a new project?

That depends on what you're building. These are two fundamentally different tools:

pmndrs/zustand — State Management

Use Zustand if you need simple, lightweight state management for React applications. It's designed for managing application state with a hook-based API. Key characteristics:

• Small bundle size (per the README badge)
• Minimal boilerplate — "isn't boilerplatey or opinionated"
• Handles common React pitfalls like the "zombie child problem" and context loss
• Good for: managing UI state, form data, global application state

statelyai/xstate — State Machines & Workflows

Use XState if you need declarative state machine logic for complex workflows and stateful behavior. It's designed around finite state machines and SCXML standards (evident from [packages/core/src/scxml.ts] and the schema definitions). Good for: authentication flows, multi-step processes, coordinating complex stateful logic, visual state diagrams.

Quick Decision Matrix

Need	Pick
Global React state (counters, user data, UI toggles)	Zustand
Complex workflows (auth, forms with validation, multi-step)	XState
Simple state, fast setup	Zustand
Visual state diagrams + formal correctness	XState
Both together?	Use both — they complement each other

Zustand has a Grade A architecture (0 import cycles, 98/100 score) and 0 known CVEs, making it very reliable for straightforward state needs. XState is the industry standard for state machines when workflow complexity justifies it.

FOLLOW_UPS:

• Does Zustand support middleware or devtools?
• Can XState integrate with React hooks?
• How do Zustand and XState differ in bundle size?