FlutterHooksとHookWidgetの使用について

[riscait]

ディスカッション展開の背景

• useState を使用しなくなったため、 Flutter Hooks の採用を再検討したい。

• Extensionのゲッター等で useL10n 等を使用できるが、 Hook(Consumer)Widget からの使用じゃないと実行時エラーになる。

extension SomeExt on Some {
  // Hook(Consumer)Widgetからなら問題なく使用できる
  String get labelText {
    final l10n = useL10n();
    ...
  }
  // useL10n()を使用しない場合
  String labelText(L10n l10n) {
    ...
  }
}

決めたいこと

• Flutter Hooksを今後も使用するか否か
• 使用するのであれば、ConsumerWidget と HookConsumerWidget は適宜使い分けるか

現在の暫定方針

• useState は Riverpodのプロバイダと相互干渉できないのと、Widget間でバケツリレーになるので使用しない
  → 状態管理はRiverpodのプロバイダを使う

現在使用中のHooks機能

• useEffect
• useTextEditingController
• usePageController
• useL10n

Hooksを使用することによるデメリット

• Hook(Consumer)Widgetを使用しないといけない
• Hooksを使用していないWidgetでHookConsumerWidgetを使っていたら指摘する？（レビュワーの負担）
• Flutter標準の StatefulWidget と書き味が異なるので、学習が必要

Hooksを使用するメリット

• StatefulWidget の initState , dispose , didChangeDependencies 等の代わりとなる useEffect が使える。
• StatefulWidget のようにWidgetとStateでクラスが分かれない
• useTextEditingController や usePageController が使える

Hooksをやめても代替できること

• 代わりに StatefulWidget , StatefulConsumerWidget を使用する
• L10n.of(context) は自動インポートに難があるが、 BuildContextのExtensionで代用できる

extension ContextWithL10n on BuildContext {
  L10n get l10n => L10n.of(this)!;
}

FlutterHooksを使用するなら？

• HookConsumerWidget と ConsumerWidget を適宜使い分ける？それとも 常に HookConsumerWidget を使用する？
  →ConsumerWidgetで Hooksを使ってもコンパイルエラーにならないので、レビュワーの負担になる
• StatelessWidget と HookWidget は使い分けたい感はある🤔
• ConsumerWidget と HookConsumerWidget は適宜使い分けずに HookConsumerWidget に統一するとレビュワーの負担が軽減される？

[kinako0626-ota]

useEffect使いやすいから欲しいけどレビュワーの普段考えたら確かにいらない気もします🧐
それにflutterのstatefulで書けるなら新しいエンジニアが入ってきた時にhooksについての学習コストがなくなるのも魅力だと思います！

[naipaka]

hooksについての学習コストがなくなるのも魅力

これは確かにですね👍

[riscait]

ありがとうございます！
確かに、特に公式や他のドキュメントや記事だと Hooksじゃなくて StatefulWidgetでサンプル書かれていることが多いのでメリットですね👀

[naipaka]

useTextEditingController や usePageController が使える

上記やuseAnimationControllerが使えるとすっきりかけて嬉しい場面もありつつ悩ましいです🤔

L10n.of(context) は自動インポートに難があるが、 BuildContextのExtensionで代用できる
FlutterHooksを使用するなら？

もしFlutterHooksを使う場合でもl10nに関してはuse使わない形でも良さそうな気がしました👀
l10nを使うためにHookWidgetに変えるのが手間かもと思ったり🤔

また、FlutterHooksを使う場合はレビュワーの負担も加味して、
基本使うのはStatelessWidget、StatefulWidget、HookConsumerWidgetだけに限定するのが良さそうだなと思いました🙋‍♂️

[riscait]

ありがとうございます🙌

上記やuseAnimationControllerが使えるとすっきりかけて嬉しい場面もありつつ悩ましいです🤔

確かに useAnimationController 使うか使わないかで書き味もだいぶ異なりますよね👀

もしFlutterHooksを使う場合でもl10nに関してはuse使わない形でも良さそうな気がしました👀
l10nを使うためにHookWidgetに変えるのが手間かもと思ったり🤔

確かにですね。l10nの使用頻度が多いので、Extensionに寄せるだけでも少なくなりそうです👀

また、FlutterHooksを使う場合はレビュワーの負担も加味して、
基本使うのはStatelessWidget、StatefulWidget、HookConsumerWidgetだけに限定するのが良さそうだなと思いました🙋‍♂️

これは良い塩梅ですよね👀 確かにRiverpod使わないシンプルなWidgetなら HookWidgetじゃなくて StatefulWidgetで良さそうです🧐

[riscait]

• 2023年12月現在、HookWidgetは適宜使用しています
• 依存をなるべく少なくしたい or Hooksを使うメリットがない場合は StatefulWidgetを使う
• 今後は l10n は使わず slang パッケージを使う方針でいきそう