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.

---

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