riverpod-select について
Riverpod の select で Provider 状態の一部だけを監視し、関係のない値の変更による再ビルドを避ける方法を説明するスキルです。非同期 Provider の解決済みデータに使う selectAsync と、最適化が有効な場面も扱います。
主な機能
- 01選択した Provider 値の監視
- 02選択値の変更時だけ再ビルド
- 03非同期データへの selectAsync の適用
- 04選択値の不変性の維持
活用シーン
- 01表示中のフィールドが変わった場合だけ Widget を再ビルド
- 02無関係な状態が頻繁に変わる場合の再ビルド削減
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ serverpod/ skills-registry --skill riverpod-selectインストール後、Claude Code で/riverpod-selectを入力して読み込まれたか確認します。
詳細
Riverpod — select を使った再ビルドの削減
手順
デフォルトでは、ref.watch(provider) はプロバイダーの値が(参照/等価性に基づいて)変化するたびに再ビルドします。状態の一部(たとえば User の 1 つのフィールド)しか使用していない場合でも、ほかのフィールドが変化するとウィジェットは再ビルドされます。
select を使うと、状態の一部だけを監視できます。選択された値が(== に基づいて)変化した場合にのみ再ビルドされます。
構文
// Rebuild only when firstName changes
String name = ref.watch(provider.select((it) => it.firstName));
return Text('Hello $name');
異なるプロパティに対して select を複数回呼び出せます。選択された値は不変である必要があります。返された List/オブジェクトをその場で変更しても、再ビルドは発生しません。
非同期プロバイダー:selectAsync
非同期プロバイダーでは、多くの場合 ref.watch(provider.future) を使用します。AsyncValue 全体ではなく解決後のデータに対して選択するには、(利用可能な場合)selectAsync を使います。データに対して select を適用し、Future を返します。お使いのバージョンでの正確な API については、Riverpod のドキュメントを参照してください。
使用するタイミング
- 「ほかの」プロパティが頻繁に変化し、再ビルドがボトルネックになっていると測定できた場合に限って使用します。select にはわずかなコストと複雑さが伴います。この最適化が必要でない限り、通常の watch を優先してください。
コメント
Markdown 対応