🔖

【Flutter】状態管理ライブラリRiverpod+Hooksの導入についてのメモ

2023/11/10に公開1

Flutterの状態管理でRiverpodとHookがあるけどどう使い分けたらいいの?Riverpodだけじゃダメなの?Hookを使うメリットは?といった疑問についてRiverpodの公式ドキュメントを見ながら解消していきます。

Riverpodってなに?

Flutterの開発で用いる状態管理ライブラリのひとつです。主にアプリ全体で共有するようなグローバルな状態の管理を行います。
https://riverpod.dev/ja/docs/introduction/why_riverpod

Hooksってなに?

HooksもFlutterの状態管理ライブラリのひとつですが、主に1つのWidget内で完結するようなフォームな値などのローカルな状態の管理を行います。RiverpodとHooksを両方使いたい場合は、それぞれ別々でimportするのではなく、hooks_riverpodをimportします。
https://riverpod.dev/ja/docs/concepts/about_hooks

flutter_riverpodとhooks_riverpodどっちを入れればいいの?

hooksを使うなら hooks_riverpod、使わないならflutter_riverpodですが、flutter_riverpodでできることはhooks_riverpodでもできるので迷ったらとりあえずhooks_riverpodを入れればOK!

RiverpodとHooksの使い分け方は?Riverpodだけじゃダメなの?

Riverpodはアプリ全体で使うグローバルな状態の管理には適していますが、フォームの値など1つのWidgetで完結するようなローカルな状態管理には向いていません。(Riverpodの公式ドキュメントでは避けるべきこととして挙げられています
対して、Hooksはローカルな状態の管理に適しています。そのため、以下のように使い分けるとよいでしょう。

  • グローバルな状態の管理 → Riverpod
  • ローカルな状態の管理 → Hooks

HooksはReactから導入された経緯があり、dartっぽい書き方ではないため場違いに感じるかもしれません。もちろんHooksを使わないという選択をすることもできます。その場合は、ローカルな状態管理にStatefulWidgetか別の状態管理ライブラリを使うことになります。

Hooksを使うメリットは?

Hooksを使うとStatefulWidgetと比べて記述量が大幅に減り、コードの見通しがよくなります。
Riverpod開発者のRemiさんもHooksを使っているらしいです。

Riverpodの自動コード生成って入れたほうがいいの?

Riverpod公式は自動コード生成を使うことを推奨しています。コード生成を導入すると、自分で書くコードの量が減り、各Providerの特性について学習する必要がなくなります。
一方で、新しいProviderを作成するたびに自動コード生成を走らせる必要があり、コードの規模が大きくなってくるとコード生成に数十秒ほど待つ必要がある場合もあります。
このメリットとデメリットを見て導入を決めるといいと思いますが、個人的には今からRiverpodを勉強するという方は自動コード生成を用いるのをオススメします。

https://riverpod.dev/docs/concepts/about_code_generation#should-i-use-code-generation

Discussion

JboyHashimotoJboyHashimoto

Riverpodはアプリ全体で使うグローバルな状態の管理には適していますが、フォームの値など1つのWidgetで完結するようなローカルな状態管理には向いていません。

なるほど🧐
今までノリで使ってましたが、Riverpodだけだと違和感感じるのは、それだったんですね。
昔は、なんでもプロバイダーで管理してたが、flutter_hooksを現場で使うことがあって、HookWidgetを好むエンジニアが多かった理由がわかりました。