Yuuniworks Notes

# Flutter - Hooks

# 使える場所

下記の条件を満たす場所で使える

  • Hooksミックスインを使った widget や、HookWidgetの中であること
  • build()メソッドの中であること

# ルール

  • フック名は必ずuseで始める
  • conditional に実行できない(例えば if 文の中などでは使えない)

# 例

# useState

  • カウンターの例
  • 返ってくる値の実態はValueNotifierである
class Counter extends HookWidget {
  @override
  Widget build(context) {
    final count = useState(0);

    return Column(children: [
      Text("you clicked ${count.value} times"),
      TextButton(
        child: Text("count up"),
        onPressed: () => count.value += 1,
      ),
    ]);
  }
}

# useEffect

class Counter extends HookWidget {
  @override
  Widget build(context) {
    final count = useState(0);

    useEffect(
      () {
        // 初回マウント時に１回だけ実行される
        count.value += 10;

        return () {/* dispose時に行いたい処理があればここに記載する */};
      },
      // 以下の値に変化があったときに再実行される。
      // この例ではマウント時にのみ実行される。
      [],
    );
    // 以下省略
  }
}

# useMemorized

常に変化する値を固定したり、高コストな計算をなるべく減らすために使う。

// マウント時の現在日時を保存する例
final DateTime now = useMemoized(() => DateTime.now());