React Custom Hooks Store
Open-source global state manager built from scratch using the Observer Pattern with Redux-style slices — zero external dependencies. Components that only dispatch actions skip re-renders via shouldListen:false, demonstrating deep understanding of React rendering internals and subscription-based reactivity.
Timeline
January 2025
Role
Lead Developer
Status
In-progressTechnology Stack
Key Challenges
- Preventing stale closures in subscriber callbacks required careful use of useRef to always reference the latest state.
- Implementing useSyncExternalStore correctly to avoid tearing in concurrent React rendering.
Key Learnings
- Building a state manager from scratch provides deep understanding of React's rendering lifecycle and subscription patterns.
- The Observer Pattern is the foundational design pattern behind most reactive state management libraries.
The Problem
Most React state management libraries (Redux, Zustand, Jotai) abstract away how reactivity actually works. Junior developers use them without understanding the subscription and rendering mechanics underneath. I wanted to build a state manager from scratch to demonstrate these internals.
Technical Decisions
Observer Pattern: The store uses a publish-subscribe model. Each slice maintains a set of subscriber callbacks. When state changes, only subscribed components re-render — not the entire tree.
Redux-Style API: The external API mirrors Redux Toolkit's createSlice pattern (slices, actions, selectors) so developers can compare the custom implementation with the industry standard and understand what Redux does under the hood.
Selective Re-Renders: Components that only dispatch actions (write-only) can opt out of re-renders by setting shouldListen: false. This demonstrates a key React performance concept — separating state producers from state consumers.
Zero Dependencies: The entire library uses only React's built-in hooks (useState, useEffect, useRef, useSyncExternalStore). No external packages. This proves that a production-capable state manager can be built with React primitives alone.
The Outcome
A fully functional global state manager that teaches React rendering internals through practical code. The Observer Pattern implementation shows exactly how libraries like Redux and Zustand manage subscriptions and trigger re-renders.