Show HN: Tired of logic in useEffect, I built a class-based React state manager
4 hours ago
- #React Architecture
- #State Management
- #TypeScript
- Snapstate was built to separate business logic from React components into TypeScript classes for cleaner architecture.
- React is great for UI rendering, but placing business logic there leads to blurred boundaries, making testing and reuse difficult.
- Snapstate offers a middle ground between existing state management solutions like Redux, Zustand, and MobX, with class-based stores and explicit updates.
- A common React pattern shown involves mixing auth, data fetching, loading/error states, derived values, and mutations, which Snapstate aims to simplify.
- Using Snapstate, logic moves to stores (e.g., AuthStore and DashboardStore), leaving React components to handle only rendering and props.
- This separation enables easier testing without React dependencies, allowing direct class-based testing of business rules.
- Additional features like scoped stores, form validation, and URL sync emerged naturally from this design principle.
- Snapstate is open-source and available on npm, though still in alpha, with stable core APIs used in production.