# DetachedScope

```ts
import { DetachedScope } 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>

`DetachedScope` improves performance by detaching certain areas from the main render loop. Detached contents render in their own render loop and use a data declaration to specify which changes can flow in or out.

Use this for heavy components like grids, charts, or rich popups that might be negatively affected by other elements on the page.

```tsx
import { createModel } from "cx/data";
import { DetachedScope } 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">
    <DetachedScope bind={m.scope1}>
      <div className="p-4 bg-gray-100 rounded">
        <p>Detached Scope 1</p>
        <p text={m.scope1.count} />
      </div>
    </DetachedScope>

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

```

## How It Works

1. The `bind` prop specifies the data paths this scope depends on
2. The scope renders independently from the rest of the page
3. Only changes to the bound data trigger re-renders inside the scope
4. Changes inside the scope don't trigger re-renders outside

## 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. |
| `exclusive` | `string \| array` | Paths for exclusive data that only affects this scope. |
| `exclusiveData` | `object` | Exclusive data selector for data used only within this scope. |
| `name` | `string` | Name of the scope for debugging purposes. |