In this workshop, we'll build and evolve a production-ready React application with scalable state management patterns. We'll start with the basics and progressively tackle more complex state challenges by implementing event-driven architecture, handling multiple sources of truth, and optimizing performance.
You'll learn state management principles that can be applied to any application, regardless of framework, size, or complexity. This workshop combines theory with hands-on practice through a series of progressive exercises.
By participating in this workshop, you'll learn to:
- Architect state management solutions that scale with application complexity
- Avoid common React state management pitfalls and anti-patterns
- Model state using event-driven patterns for more predictable applications
- Balance local, shared, and server state for optimal performance
- Debug and troubleshoot complex state issues efficiently
- Node.js 20+ and a package manager (pnpm, npm, or yarn) installed
- Basic knowledge of React and TypeScript
# or npm install or yarn install
pnpm install# or npm run dev or yarn dev
pnpm devOpen http://localhost:3000 with your browser to see the workshop application.
# or npm test or yarn test
pnpm test- Exercise: Antipatterns (📃 Code) - Common React state management mistakes
- Exercise: Diagrams (📃 Code) - State visualization techniques
- Exercise: Finite states (📃 Code) - Combining state patterns
- Exercise: Reducers (📃 Code) - Building with
useReducer - Exercise: Forms (📃 Code) - Form handling
- Exercise: URL (📃 Code) - URL state synchronization
- Exercise: Fetch (📃 Code) - Data fetching patterns
- Exercise: Libraries (📃 Code) - State management libraries
- Exercise: Normalization (📃 Code) - Data normalization
- Exercise: Effects (📃 Code) - Refactoring cascading
useEffects - Exercise: Sync (📃 Code) - Synchronization patterns with
useSyncExternalStore - Exercise: Test (📃 Code) - Testing state management
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- State Management: React hooks, XState Store, TanStack Query
- Database: SQLite with Drizzle ORM
- Testing: Vitest with Testing Library
- UI Components: ShadCN (Radix UI primitives)
Happy coding! 🚀