Docs

Dot-Notation & Bracket Selectors

SuperState's selectors allow you to subscribe to specific nested properties or array indices, making your components high-performance and focused.

#How It Works

If you have a complex state object like user: { profile: { location: 'PK' } }, you can subscribe to any level deep by using a dot-separated string.

ts
LocationBadge.tsx
import { useSuperState } from "react-use-superstate"
export function LocationBadge() {
// Ultra-fine subscription: only re-renders if location changes.
const [location, setLocation] = useSuperState('user.profile.location')
return <span className="p-2 bg-muted rounded">{location}</span>
}

#Array Index Access

Use bracket notation to subscribe to specific array indices. Only the component watching that index will re-render when it changes.

ts
FirstItem.tsx
import { useSuperState } from "react-use-superstate"
export function FirstItem() {
// Only re-renders if food[0] changes — not food[1], food[2], etc.
const [first, setFirst] = useSuperState('food[0]')
return <span>{first}</span>
}
// Deep array + object access also works:
const [name] = useSuperState('users[2].name')

#Updating Deep State

The setLocation function returned by useSuperState('user.profile.location') will only update that nested key and notify other subscribers of the parent keys.

ts
Settings.tsx
// Parent subscribers: user, user.profile
// Property subscribers: user.profile.location
const [location, setLocation] = useSuperState('user.profile.location')
const update = () => setLocation('US') // Correctly notifies all relevant watchers.
Type Safety Tip
SuperState's selector notation is dynamic. When using deep keys, TypeScript cannot always infer the exact nested type automatically. We recommend using a generic type parameter: useSuperState<string>('user.name').
NextSelective Re-renders