User: {store.user.name}
-Count: {store.count}
-Theme: {store.theme}
-Count: {count}
+Count: {count}
+E-mail: {email}
; +} +``` + +### Update the Store + +```tsx filename="CounterControls.tsx" switcher tab="TypeScript" +import { useStoreReducer } from "contection"; +import { AppStore } from "./store"; + +function CounterControls() { + // useStoreReducer never triggers re-render + const [store, setStore] = useStoreReducer(AppStore); + + return ( +{user.email}
+E-mail: {email}
} +{width} x {height}
; +} +``` + +### Subscribe to Breakpoints + +```tsx +function ResponsiveComponent() { + const { isMobile } = useStore(ViewportStore, { + keys: ["isMobile"], + }); + return isMobile ?Count: {count}
+ + +Only when counter / 10 changes
+Counter only when theme is dark
+Render-prop pattern
+counter: {counter}
+ theme: {theme}
+ Only when counter changes
+Re-renders on ANY change
+counter: {store.counter}
+ theme: {store.theme}
+ user: {store.user.name}
+ Updates without re-rendering this component
+Only when theme changes
+Only when user changes
+{user.name}
+ {user.email}
+ Each level subscribes independently
++ React Context API extended with fine-grained subscriptions and computed values +
+Subscribe to specific store keys — components re-render only when subscribed data changes
+Derive state with mutation functions for transformed or filtered data
+Works with Next.js and other SSR frameworks out of the box
+