DetachedScope

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.

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

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

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

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