IsolatedScope

IsolatedScope improves performance by isolating certain areas from unnecessary recomputations. Contents of an isolated scope will only update when the specified data changes.

Use this for grids, charts, or any rich content that might cause performance issues for the rest of the page.

<div className="flex gap-4">
  <IsolatedScope bind={m.scope1}>
    <div className="p-4 bg-gray-100 rounded">
      <p>Isolated Scope 1</p>
      <p text={m.scope1.count} />
    </div>
  </IsolatedScope>

  <IsolatedScope bind={m.scope2}>
    <div className="p-4 bg-gray-100 rounded">
      <p>Isolated Scope 2</p>
      <p text={m.scope2.count} />
    </div>
  </IsolatedScope>
</div>

export const model = {
  scope1: { count: 0 },
  scope2: { count: 0 },
};

import { createModel } from "cx/data";
import { IsolatedScope } from "cx/widgets";

How It Works

1. The bind prop specifies the data paths this scope depends on
2. Children only re-render when the bound data changes
3. Changes to other store data do not trigger re-renders inside the scope

IsolatedScope vs DetachedScope

• IsolatedScope - Prevents unnecessary re-renders by filtering which data changes affect the children
• DetachedScope - Goes further by running in a completely separate render loop, providing stronger isolation

Use IsolatedScope for simpler cases. Use DetachedScope when you need maximum isolation.

Configuration