About riverpod-select
A Riverpod skill explaining how to use select to watch part of a provider's state and avoid rebuilds when unrelated values change. It also covers selectAsync for resolved data from asynchronous providers and notes when the optimization is worthwhile.
Key features
- 01Watch selected provider values
- 02Limit rebuilds to selected changes
- 03Use selectAsync with async data
- 04Keep selected values immutable
Use cases
- 01Rebuild a widget only when a displayed field changes
- 02Reduce rebuilds when unrelated state changes often
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/riverpod-selectin Claude Code to confirm it loaded.
Details
From the project READMERiverpod — Reducing rebuilds with select
Instructions
By default, ref.watch(provider) rebuilds whenever the provider's value changes (by reference/equality). If you only use a subset of the state (e.g. one field of a User), the widget still rebuilds when other fields change.
Use select to watch only a part of the state. Rebuilds happen only when the selected value changes (by ==).
Syntax
// Rebuild only when firstName changes
String name = ref.watch(provider.select((it) => it.firstName));
return Text('Hello $name');
You can call select multiple times for different properties. The selected value should be immutable; mutating a returned List/object in place will not trigger a rebuild.
Async providers: selectAsync
For async providers you often use ref.watch(provider.future). To select on the resolved data instead of the whole AsyncValue, use selectAsync (when available): it applies a select on the data and returns a Future. See the Riverpod docs for the exact API in your version.
When to use
- Only when the "other" properties change often and you have measured that rebuilds are a bottleneck. Select adds a small cost and extra complexity. Prefer normal watch unless you need the optimization.