Chapter 22無料公開

AutoDispose修飾子で、Providerを自動破棄させる

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

autoDispose修飾子とは

そのProviderへの参照(watch等の監視)が無くなった時、自動でそのProviderが破棄されるようになります。

再度、参照(watch等の監視)された際は新たなProviderとして構築されるので、以前のProviderの状態は引き継ぎません。

詳しい解説

通常、Providerの値はキャッシュされ、例えば複数の画面で watch されてもキャッシュされている値を取得できます。

表示のたびに新しい値を取得し直す必要のないProviderの場合はこれで問題ありません。

ただ、いくつかのユースケースでは毎回新しい値を取得し直したい場合や古いProviderを破棄させたい場合があります。

ユースケースを考えて詳しく見ていきましょう。

詳細画面に遷移するたびに最新の詳細情報を取得・表示したい

とある通販アプリの画面では、商品リストを表示しています。
その中からユーザーが気になる商品リストをタップすると、その商品の詳細情報が表示される詳細画面へ遷移します。

商品情報だけでなく、在庫情報やレビュー情報が表示される画面です。

仮にこの画面ではこのようなProviderが使われるとします。

final productDetailProvider = FutureProvider<ProductDetail>((ref) {
  final id = ref.watch(selectedProductIdProvider);
  return ref.watch(productRepository).fetch(productId: id)
});

この時、AutoDisposeではないProviderを使用して商品データを取得・表示させていた場合は、一度商品リスト画面へ戻って、数分後にまた同じ商品詳細ページに遷移してきても、前回表示された情報がそのまま表示されます。

詳細画面に遷移してくるたびに、 ref.refresh させても最新の情報を表示させることはできますが、スマートではなさそうです。

final productDetailProvider = FutureProvider.autoDispose<ProductDetail>((ref) {
  final id = ref.watch(selectedProductIdProvider);
  return ref.watch(productRepository).fetch(productId: id)
});

autoDispose 修飾子を付けることで、詳細画面を閉じてリスト画面へ戻るタイミングで productDetailProvider をwatchする者がいなくなり、破棄されます。

disposeされたタイミングで何かしたい

ref.onDispose が使用できます。

final autoDisposeProvider = Provider.autoDispose((ref) {
  ref.onDispose(() {
    // このProviderが使用されなくなった=破棄される直前に実行されます
  });
});

https://riverpod.dev/docs/concepts/modifiers/auto_dispose