SetupWidget<T extends SetupWidget<T>> class abstract

A widget that uses a composition-based API similar to Vue's Composition API.

The setup function executes only once when the widget is first created, not on every rebuild. This provides better performance and a more predictable execution model compared to React-style hooks.

Hot Reload Behavior

During hot reload, hooks are matched in order by their runtime type:

• If types match in sequence, existing hooks are reused and SetupHook.reassemble is called
• If a type mismatch occurs, all subsequent hooks are unmounted in reverse order
• New or replacement hooks will have SetupHook.mount called

This ensures hooks maintain correct state during development while adapting to code changes.

Example

class CounterWidget extends SetupWidget<CounterWidget> {
  const CounterWidget({super.key});

  @override
  setup(context, props) {
    // Setup runs once - create reactive state
    final count = useSignal(0);

    // Return builder function - runs on each rebuild
    return () => Column(
      children: [
        Text('Count: ${count.value}'),
        ElevatedButton(
          onPressed: () => count.value++,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

Parameters and Props

For widgets with parameters, use the props parameter to access them reactively:

class UserCard extends SetupWidget<UserCard> {
  final String name;
  final int age;

  const UserCard({super.key, required this.name, required this.age});

  @override
  setup(context, props) {
    // Access props reactively - triggers rebuild when they change
    final greeting = useComputed(() => 'Hello, ${props().name}!');

    return () => Column(
      children: [
        Text(greeting.value),
        Text('Age: ${props().age}'),
      ],
    );
  }
}