# IsolatedScope

```ts
import { IsolatedScope } from 'cx/widgets';
```



<Note type="info">
For most performance optimization scenarios, consider using [PrivateStore](/docs/concepts/private-store) instead, which is more commonly used and easier to work with.
</Note>

`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.

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

interface Model {
  scope1: { count: number };
  scope2: { count: number };
}

const m = createModel<Model>();

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

export default (
  <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>
);

```

## 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

| Property | Type | Description |
| -------- | ---- | ----------- |
| `bind` | `string \| array` | Binding path(s) to monitor for changes. Shorthand for `data`. |
| `data` | `object` | Data selector object. Children update only when this data changes. |