randalschwartz 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
HookWidgetelements using theuse...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);
});