signals-hooks

リアクティブ状態フック（signals_hooks）

このスキルでは、signals_hooks パッケージを利用する flutter_hooks コードベースで、リアクティブ状態シグナルを連携する方法を説明します。

---

🚀 はじめに

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:signals_hooks/signals_hooks.dart';

class ExampleWidget extends HookWidget {
  const ExampleWidget({super.key});

  @override
  Widget build(BuildContext context) {
    // 1. Create a reactive signal managed by the widget's hook lifecycle
    final count = useSignal(0);
    
    // 2. Derive a lazy, memoized computed value
    final doubleCount = useComputed(() => count.value * 2);
    
    // 3. Register reactive side effects automatically bound to layout phases
    useSignalEffect(() {
      debugPrint('count changed: $count, double: $doubleCount');
    });

    return Scaffold(
      body: Center(
        child: Text('Count: $count (Double: $doubleCount)'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count.value++,
        child: const Icon(Icons.add),
      ),
    );
  }
}

ヒント

標準の HookWidget 要素内で use... メソッドを使って作成されたシグナル、派生した計算状態、副作用はすべて、ウィジェットのアンマウント時に自動的に終了・破棄されます。これにより、メモリーリークや手動でのリソース破棄が完全になくなります。

---

📊 フック総合リファレンス一覧

次の表は、signals_hooks パッケージで利用できるすべてのリアクティブフックをまとめたものです。フック名をクリックすると、詳細なドキュメント、シグネチャー、ベストプラクティス、コード例を確認できます。

Hook	戻り値の型	説明	ライフサイクル／破棄時の動作
useSignal	Signal<T>	フックのライフサイクルで管理される、変更可能なリアクティブシグナルを作成します。	ウィジェットのアンマウント時にシグナルを破棄します。
useComputed	Computed<T>	派生された、キャッシュ済みの読み取り専用計算シグナルを作成します。	ウィジェットのアンマウント時に計算シグナルを破棄します。
useSignalEffect	void	ウィジェットのマウントライフサイクルに紐づくリアクティブな副作用を登録します。	ウィジェットのアンマウント時に副作用のサブスクリプションをキャンセルします。
useExistingSignal	Signal<T>	外部シグナルにバインドし、変更時に再ビルドするようにします。	アンマウント時にサブスクリプションを解除します（シグナルは破棄しません）。
useSignalValue	T	外部シグナルの値を直接読み取り、サブスクライブします。	アンマウント時にサブスクリプションを解除します（シグナルは破棄しません）。
useLazySignal	Signal<T>	フックの状態で管理される、初期化が遅延される新しい遅延 Signal を作成します。	ウィジェットのアンマウント時に遅延シグナルを破棄します。
useLinkedSignal	LinkedSignal<T>	ソースが変更されたときに値をリセットする、新しい LinkedSignal を作成します。	ウィジェットのアンマウント時にリンクされたシグナルを破棄します。
useFutureSignal	FutureSignal<T>	自動破棄と競合保護機能を備えた、リアクティブな Future シグナルを作成します。	ウィジェットのアンマウント時に Future シグナルを破棄します。
useStreamSignal	StreamSignal<T>	キーに基づく再サブスクライブ機能を備えた、リアクティブなストリームシグナルを作成します。	アンマウント時にストリームのサブスクリプションをキャンセルし、シグナルを破棄します。
useAsyncSignal	AsyncSignal<T>	非同期タスクの状態を、管理可能な AsyncSignal でラップします。	ウィジェットのアンマウント時に非同期シグナルを破棄します。
useAsyncComputed	AsyncSignal<T>	依存関係の変更時に再評価される、非同期計算シグナルを作成します。	ウィジェットのアンマウント時に非同期シグナルを破棄します。
useValueNotifierToSignal	Signal<T>	標準の Flutter ValueNotifier を、変更可能なリアクティブ Signal に接続します。	アンマウント時にサブスクリプションを解除します（破棄はしません）。
useValueListenableToSignal	ReadonlySignal<T>	標準の Flutter ValueListenable を、読み取り専用 Signal に接続します。	アンマウント時にサブスクリプションを解除します（破棄はしません）。
useListSignal	ListSignal<T>	アイテム単位の変更を深く追跡する、リアクティブなリストを作成します。	ウィジェットのアンマウント時にリストシグナルを破棄します。
useSetSignal	SetSignal<T>	要素単位の変更を深く追跡する、リアクティブなセットを作成します。	ウィジェットのアンマウント時にセットシグナルを破棄します。
useMapSignal	MapSignal<K, V>	キーと値の変更を深く追跡する、リアクティブなマップを作成します。	ウィジェットのアンマウント時にマップシグナルを破棄します。
useIterableSignal	IterableSignal<T>	要素単位の変更を追跡する、リアクティブな反復可能オブジェクトを作成します。	ウィジェットのアンマウント時に反復可能シグナルを破棄します。
useTrackedSignal	TrackedSignal<T>	値の過去の状態を記憶する、追跡対象のシグナルを作成します。	ウィジェットのアンマウント時に追跡対象のシグナルを破棄します。
useQueueSignal	QueueSignal<T>	FIFO コレクション管理用のリアクティブなキューを作成します。	ウィジェットのアンマウント時にキューシグナルを破棄します。
useChangeStackSignal	ChangeStackSignal<T>	堅牢な元に戻す／やり直し履歴の追跡用に、変更スタックシグナルを作成します。	ウィジェットのアンマウント時に変更スタックシグナルを破棄します。

---

🧪 フックの状態をテストする

フックの状態コンポーネントを検証するには、flutter_test と HookBuilder を使用して、テストフレームワーク内でフックを安全に実行します。

testWidgets('useSignal test', (tester) async {
  late Signal<int> state;
  await tester.pumpWidget(
    HookBuilder(builder: (context) {
      state = useSignal(42);
      return Text('$state', textDirection: TextDirection.ltr);
    }),
  );

  expect(state.value, 42);
  expect(find.text('42'), findsOneWidget);

  state.value = 43;
  await tester.pumpAndSettle();

  expect(find.text('43'), findsOneWidget);
});