🎯 Field-Level Reactivity

Subscribe to individual fields for maximum performance

Name Component (Only re-renders on name changes)

Hello, Alice! 👋

Render count: 0

This counter only increases when the 'name' field changes!

✅ This component ONLY subscribes to the 'name' field. Changing age or email won't trigger a re-render here!

Test Controls

Current Store State:

{
  "name": "Alice",
  "age": 25,
  "email": "alice@example.com"
}

⚡ Performance Benefit

The Name component above only re-renders when the 'name' field changes. This is much more efficient than:

Global state subscriptions that re-render on any change
Context providers that pass down entire objects
Redux selectors that don't use proper memoization

Field-Level Subscription

"use client";
function UserName() {
  // Only re-renders when 'name' changes
  const name = userStore.useField("name");

  return <h1>Hello, {name}!</h1>;
}

vs. Full Store Subscription

"use client";
function UserNameInefficient() {
  // Re-renders on ANY store change!
  const { name } = userStore.useStore();

  return <h1>Hello, {name}!</h1>;
}