# layoutDependency > Gate layout measurement so FLIP only recomputes when a dependency changes. **Source:** [https://motion.svelte.page/examples/layout-dependency](https://motion.svelte.page/examples/layout-dependency) **Markdown mirror:** [https://motion.svelte.page/examples/layout-dependency.md](https://motion.svelte.page/examples/layout-dependency.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: frequent renders, gated measurement. Both boxes have `layout` and re-render constantly (their color cycles). The left box re-measures on every render; the right box passes `layoutDependency={dep}`, so it only re-measures when `dep` changes — watch its counter stay flat. **Metadata:** tag: `LAYOUT` | api: `layoutDependency` | input: `layout` | mode: `live` ### Notes - Every render recolors both boxes — a stand-in for live text or streaming values that re-render a `layout` element often. - The gated box passes `layoutDependency={'{dep}'}`, so its measure counter only moves when `dep` changes on Reflow. - Both still FLIP-animate to their new position on Reflow — gating skips the wasted measurements, not the real ones. ### Source #### Default.svelte Source file: [src/lib/examples/layout-dependency/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/layout-dependency/demos/Default.svelte) ```svelte
// no gate re-measures every render

0 ? 'busy' : 'idle'}> {defaultMeasures} measures

(defaultMeasures += 1)} > A
// layoutDependency measures only on dep change

0 ? 'busy' : 'idle'}> {gatedMeasures} measures

(gatedMeasures += 1)} > B
``` ## FIG-002: keyed list, what to gate on. Rows are `layout="position"` in a keyed `{#each}` sorted by activity. Gated on a per-row field, only the bumped row animates and the rows it displaces jump — upstream parity. Gate on the row index and every moved row slides. **Metadata:** tag: `LAYOUT` | api: `layoutDependency` | input: `keyed each` | mode: `live` ### Notes - Bumping a row re-sorts the list. With `layoutDependency={'{row.ts}'}` only that row's dependency changed, so only it FLIPs — the displaced rows jump, exactly as upstream `MeasureLayout` behaves. - Switch to `layoutDependency={'{i}'}`: the index changes for every row whose slot changed, so every moved row animates and untouched rows stay gated. - Don't need the gate in a list? Omit `layoutDependency` and every reorder animates every row. ### Source #### KeyedList.svelte Source file: [src/lib/examples/layout-dependency/demos/KeyedList.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/layout-dependency/demos/KeyedList.svelte) ```svelte

{#if gate === 'field'} layoutDependency={'{row.ts}'} — bump a row: it slides up, the rows it displaces jump (their dependency didn't change). {:else} layoutDependency={'{i}'} — bump a row: every row whose slot changed slides. {/if}

```