performance/state-raw · Raw state opportunity

再代入しかしないオブジェクト・配列の $state には、一度も使わない深いリアクティビティのコストがかかり続けます。$state.raw ならプロキシを省けます。

重大度: info · カテゴリ: performance

チェック内容

オブジェクトリテラルまたは配列リテラルで初期化されたトップレベルの $state 束縛のうち、1回以上再代入され、中身は一度も変更（mutate）されないものを検出します。

<script>
  let posts = $state([]);

  async function refresh() {
    posts = await fetch('/api/posts').then((r) => r.json()); // 再代入のみ — $state.raw 向き
  }
</script>

検出は意図的に保守的です。深いリアクティビティに依存しうる痕跡が1つでもあれば候補から外します。候補として残るのは、次のすべてを満たす束縛だけです。

プロパティや要素への書き込み、delete、メソッド呼び出しがない
外部へ渡していない（関数の引数、コンポーネントの prop、bind:、use:/transition:/animate: ディレクティブの式）
別名参照を作っていない（const inner = obj.items、ヘルパー内の return obj、インラインハンドラーでの別の場所への保存）
その値やそのメンバーパス（{#each obj.items as item} など）を回す {#each} ブロック内で、アイテムを編集していない（bind:value={item.text} や <Row {item} /> のある編集可能なリストには深いリアクティビティが必要です）

なぜ重要か

$state のオブジェクトと配列は、プロパティ単位の変更を追跡するために深いプロキシで包まれます。そのコストはすべてのプロパティアクセスにかかりますが、再代入しかしない束縛（典型は API レスポンス）はこの仕組みを一度も使いません。

Svelte 公式も、再代入しかしない大きなオブジェクトには $state.raw を案内しています。$state.raw でも再代入は変わらずリアクティブなままで、プロキシが必要なのはプロパティ単位の変更だけです。

修正方法

<script>
  let posts = $state.raw([]);
</script>

変えるのはここだけで、初期値も再代入のコードもそのまま動きます。

export default {
  rules: {
    'performance/state-raw': 'off'
  }
};

performance/state-raw · Raw state opportunity

チェック内容

なぜ重要か

修正方法

制限事項

モードによる違い

無効化