signals-hooks

name	signals-hooks
description	Comprehensive reactive state hooks for integration with flutter_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.

---

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