signals-hooks

Reactive State Hooks (signals_hooks)

This skill covers orchestrating reactive state signals within flutter_hooks codebases utilizing the signals_hooks package.

---

🚀 Getting Started

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),
      ),
    );
  }
}

Tip

All signals, derived computed states, and side effects created inside standard HookWidget elements using the use... methods automatically teardown and dispose when the widget unmounts. This completely eliminates memory leaks or manual resource disposal.

---

📊 Comprehensive Hooks Reference Directory

The following table summarizes all available reactive hooks in the signals_hooks package. Click on any hook's name to view its detailed documentation, signature, best practices, and code examples.

Hook	Return Type	Description	Lifecycle / Teardown Behavior
useSignal	Signal<T>	Creates a mutable reactive signal managed by the hook lifecycle.	Disposes the signal on widget unmount.
useComputed	Computed<T>	Creates a derived, cached read-only computed signal.	Disposes the computed signal on widget unmount.
useSignalEffect	void	Registers a reactive side effect bound to the widget mount lifecycle.	Cancels the effect subscription on widget unmount.
useExistingSignal	Signal<T>	Binds an external signal to rebuild when it mutates.	Detaches subscription on unmount (does not dispose signal).
useSignalValue	T	Directly reads and subscribes to the value of an external signal.	Detaches subscription on unmount (does not dispose signal).
useLazySignal	Signal<T>	Creates a new lazy Signal initialized late, managed by hook state.	Disposes the lazy signal on widget unmount.
useLinkedSignal	LinkedSignal<T>	Creates a new LinkedSignal that resets its value when its source changes.	Disposes the linked signal on widget unmount.
useFutureSignal	FutureSignal<T>	Creates a reactive future signal with auto-disposal and race protection.	Disposes the future signal on widget unmount.
useStreamSignal	StreamSignal<T>	Creates a reactive stream signal with key-based resubscription.	Cancels stream subscription and disposes signal on unmount.
useAsyncSignal	AsyncSignal<T>	Wraps an asynchronous task state inside a manageable AsyncSignal.	Disposes the async signal on widget unmount.
useAsyncComputed	AsyncSignal<T>	Creates an async computed signal re-evaluated on dependency change.	Disposes the async signal on widget unmount.
useValueNotifierToSignal	Signal<T>	Bridges a standard Flutter ValueNotifier to a mutable reactive Signal.	Detaches subscription on unmount (does not dispose).
useValueListenableToSignal	ReadonlySignal<T>	Bridges a standard Flutter ValueListenable to a read-only Signal.	Detaches subscription on unmount (does not dispose).
useListSignal	ListSignal<T>	Creates a reactive list with deep item-level mutation tracking.	Disposes the list signal on widget unmount.
useSetSignal	SetSignal<T>	Creates a reactive set with deep element-level mutation tracking.	Disposes the set signal on widget unmount.
useMapSignal	MapSignal<K, V>	Creates a reactive map with deep key-value mutation tracking.	Disposes the map signal on widget unmount.
useIterableSignal	IterableSignal<T>	Creates a reactive iterable with element-level mutation tracking.	Disposes the iterable signal on widget unmount.
useTrackedSignal	TrackedSignal<T>	Creates a tracked signal remembering its historical value state.	Disposes the tracked signal on widget unmount.
useQueueSignal	QueueSignal<T>	Creates a reactive queue for FIFO collection management.	Disposes the queue signal on widget unmount.
useChangeStackSignal	ChangeStackSignal<T>	Creates a change-stack signal for robust undo/redo history tracking.	Disposes the change-stack signal on widget unmount.

---

🧪 Testing State Hooks

To verify hook state components, use flutter_test along with a HookBuilder to execute the hooks safely under test frameworks:

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);
});