Performance Optimizations
SuperState is built from the ground up for speed. It uses React 18's useSyncExternalStore to minimize re-renders and ensure consistency across your application.
#Selective Re-renders
Only components watching a specific key re-render. If you have 500 components and 1 component updates "count", 499 components will not even be evaluated.
ts
AppOverview.tsx1import { useSuperState } from "react-use-superstate"
2
3function Counter() {
4 const [count] = useSuperState('count') // Watches focus: count
5 return <h1>{count}</h1>
6}
7
8function Sidebar() {
9 // Watches focus: user.name
10 // Will NEVER re-render if count changes
11 const [name] = useSuperState('user.name')
12 return <span>{name}</span>
13}
#Batching Updates
When updating multiple keys at once, wrap your updates in batchUpdate to bundle them into a single notification. This prevents multiple re-renders for a single interaction.
ts
app/page.tsx1import { batchUpdate, setState } from "react-use-superstate"
2
3// Use batching for multiple updates
4batchUpdate(() => {
5 setState('loading', true)
6 setState('userId', 101)
7 setState('theme', 'dark')
8})
9// All watchers re-render only ONCE.
External Sync
Because SuperState exists outside the React render tree, it bypasses top-down reconciliation for global updates, which can significantly improve TBT (Total Blocking Time) in large apps.
NextAPI Reference