Memo / Watch Components

Memo Component

Optimize expensive UI rendering by memoizing component subtrees until specific data changes.

Memoize with Store

Cache an entire component subtree and only re-render when the watched store changes:

<Memo watch={counterStore}>
  {() => {
    // ✅ Entire subtree memoized - only re-renders when counterStore changes
    return <ExpensiveSubTree />;
  }}
</Memo>

Perfect for expensive components that depend on specific store data.

Memoize with Computed Values

Watch computed values across multiple stores for fine-grained control:

<Memo
  watch={() => ({
    count: counterStore.value.count,
    userName: userStore.value.name,
  })}
>
  {({ count, userName }) => <ExpensiveChart count={count} user={userName} />}
</Memo>

Watch Component

Reactive UI that re-renders whenever watched data changes - no memoization.

Watch Store Changes

<Watch watch={counterStore}>{(state) => <p>Count: {state.count}</p>}</Watch>

Watch Computed Values

<Watch
  watch={() => ({
    count: counterStore.value.count,
    status: userStore.value.isOnline ? "online" : "offline",
  })}
>
  {({ count, status }) => (
    <div>
      <span>Count: {count}</span>
      <span>Status: {status}</span>
    </div>
  )}
</Watch>