Chapter 14

[v0.14.0以下版] Selectを使ってState更新の再構築を最適化する

村松龍之介
村松龍之介
2023.02.12に更新

Select は hooks_riverpod 限定で使用できる

flutter_hooks , hooks_riverpod の組み合わせて使用できる useProvider でのみ使用できる構文です。

counterProvider (StateNotifierProvider) での実際の使用例は以下の通りです。

class Example extends HookWidget {
  
  Widget build(BuildContext context) {
    final isAbove10 = useProvider(counterProvider.select((s) => s.state > 10));
    return Text('Is counter > 10 ? $isAbove10');
  }
}

この場合、カウンターの状態(値)が10以上になった場合のみWidgetが再構築されます。
例えば、カウント値が1から2、9から10に変更されてもWidgetは再構築されません。

また、Stateにクラスを割り当てており、複数の状態を保持しているときにも有効です。

select((s) => s.state.someValue) のように値を選択することで、再構築対象となる値を狭めることができます。