Flutter Hooksの導入と基本的な使い方

はじめに

Flutter Hooksは、React Hooksからインスパイアされたライブラリで、FlutterのStatefulWidgetの機能を、よりシンプルで再利用可能な方法で提供します。このライブラリを使うことにより、コンポーネントの状態やライフサイクルをより宣言的に扱うことができます。特に、React Hooksに慣れ親しんだ開発者にとっては、Flutterでのアプリ開発が直感的かつ効率的に行えるようになります。

インストール方法

Flutter Hooksをプロジェクトに追加するには、以下のコマンドをプロジェクトのルートディレクトリで実行します。

flutter pub add flutter_hooks

インポートの追加

ライブラリをインストールした後、使用するファイルで次のようにインポートします。

import 'package:flutter_hooks/flutter_hooks.dart';

flutter_hooksの基本的な使い方

Flutter Hooksを使用する際の基本的なフックは以下の通りです。

useState（状態を管理する）

useStateは、状態を関数内で管理するためのフックです。これにより、変数の状態を保持し、それが更新されるとウィジェットが再描画されます。

@override
Widget build(BuildContext context) {
  final count = useState(0);

  return ElevatedButton(
    onPressed: () => count.value++,
    child: Text('You have pushed the button ${count.value} times'),
  );
}

useEffect（初期表示時または状態が変化した時に処理を行う）

useEffectは、コンポーネントがレンダリングされた後に副作用（外部の操作や非同期処理など）を実行するためのフックです。依存関係の配列を指定することで、その値が変更されたときのみ副作用がトリガーされます。

Widget build(BuildContext context) {
  final title = useState('Flutter Hooks');

  useEffect(() {
    print('Title has been updated to: ${title.value}');
    return null; // optional cleanup to run on unmount or dependency change
  }, [title.value]);
}

useMemoized（メモ化された関数）

useMemoizedは、計算コストの高い関数をメモ化するために使用します。このフックは、依存関係が変更された場合にのみ関数を再計算します。

Widget build(BuildContext context) {
  final count = useState(0);
  final doubleCount = useMemoized(() => count.value * 2, [count.value]);

  return Text('Double count is $doubleCount');
}

useMemoizedは、結果が頻繁に再利用されるような場合に特に有効です。依存関係が変更されない限り、関数の結果は保存され、同じ入力に対して何度も計算する必要がなくなります。

useCallback

useCallback は、関数インスタンスをキャッシュするために使用されるフックです。これにより、依存関係が変更されない限り、関数の新しいインスタンスが不必要に生成されることがなくなります。これは、パフォーマンスを向上させ、子コンポーネントにプロップスとして関数を渡す場合の再描画を防ぐのに有効です。

Widget build(BuildContext context) {
  final count = useState(0);

  // incrementCountはcount.valueが変わらない限り、同じインスタンスを保持します。
  final incrementCount = useCallback(() {
    count.value++;
  }, [count.value]);

  return ElevatedButton(
    onPressed: incrementCount,
    child: Text('Increment'),
  );
}