Clean React Global State Management Without Dependencies
summary
Claims a dependency-free global store built with createStore and hooked into React 18 via useSyncExternalStore, implemented in TypeScript with memoized callbacks. Builds a small app (header, body, shares, footer), shows per-component selectors that update only the changed item and skip renders when values are identical. Shows an SSR init path to hydrate server props, supports multiple independent stores, and demonstrates that the implementation actually reduces unnecessary re-renders in the demo.
AI-written summary · about
chapters (21)
- 0:00Introduction
- 1:03State management without dependencies
- 2:10Talk outline
- 4:19React TypeScript project
- 7:09Requirements for global state
- 8:56Defining the store
- 10:21Listeners for state updates
- 11:25useSyncExternalStore hook
- 12:52Subscribing components
- 13:14Selectors in components
- 14:21Updating with setState
- 15:25Avoiding re-renders
- 16:28Updating shares component
- 17:10Live demo
- 18:14Testing updates
- 19:39Adding new shares
- 21:07useCallback for renders
- 21:28Next.js SSR handling
- 22:30Reusing the store
- 22:51Conclusion
- 24:38Q&A
related talks
39mHow to use NgRx ComponentStore?
36mModern React and the case for Reactive State Management
30mMake React State-Management great again
24mGoodbye, useState
30mReact state management in a GraphQL era
51mBuilding React Applications with Redux
56mEliminate extra dependencies : State management for React apps with hooks
18mDestructuring state management (in React)