Migrating from Watch to SignalsMixin in the Signals Package

[Gianluca-Altieri]

From the Signals package changelog, it is clear that after version 5.4.0, the SignalsMixin is recommended to replace any implementation that previously used Watch. I’ve noticed a significant change in how the "surgical" rebuild process works now, likely due to this update. This suggests that we should refactor our current code to adopt the new approach to ensure compatibility and potentially improve performance.

However, I couldn’t find a comprehensive guide on how to properly migrate from the old Watch pattern to the new SignalsMixin. The only documentation I’ve found so far is the SignalsMixin reference, but it lacks an in-depth explanation of the migration process.

Has anyone else come across detailed resources or documentation regarding this change? Any guidance or examples on best practices for migrating to SignalsMixin would be appreciated.

[rodydavis]

For context I am needing to remove quite a few legacy extension methods that were a mix of the behavior and DX that I was aiming for.

With SignalsMixin it completely encapsulates the signals to the widget and automatically rebuild and dispose each signal as needed. The Watch widget now uses the SignalsMixin internally too.

I choose not to deprecate the .watch() extension as I think there is a lot of value still for stateless widgets but using the Watch widget is preferred since it will clean up faster and allows for surgical rendering.

The SignalsMixin is only needed if you want the auto rebuilding widgets since you can still use regular signals and the Watch widget in the build method. The mixin is very close to how Lit and Angular do the update lifecycles with signals.

After the recent update I can finally update signals exactly as expected and all the tests are working correctly now without extra rebuilds.

[Gianluca-Altieri]

@rodydavis, I’ve been experimenting with SignalsMixin and noticed some discrepancies when trying to follow the documentation here. The code example provided shows the usage of createSignal, createComputed, and createEffect, but these parts seem deprecated or incompatible with the latest version (5.5.0).

For instance, when I tried to remove the Watch wrapper and directly rely on the mixin to observe the signals, the widget did not automatically rebuild as expected. I assumed that the mixin would internally manage the dependencies, but it didn’t behave this way.

Here’s a snippet based on the example from the documentation:

class MyWidget extends StatefulWidget {
  // ...
}

class _MyWidget extends State<MyWidget> with SignalsMixin {
  late var _signal = this.createSignal(0);
  late var _computed = this.createComputed(() => _signal() * 2);

  @override
  void initState() {
    super.initState();
    this.createEffect(() {
      print('count: $_signal, double: $_computed');
    });
  }
  // ...
}

Is this example outdated given the recent updates to 5.5.0? Also, is it still necessary to wrap widgets in Watch, or should SignalsMixin alone handle updates automatically? If there’s a different approach recommended for signals within widgets, especially for automatic rebuilds, could you provide an updated example?

Thank you for your help!

[rodydavis]

I'll update the docs! With the mixin the watch widget is not needed for signals created locally with the mixin!

[Gianluca-Altieri]

I tried a minimal example of a counter, but the widget is not updated in the UI; Do I misunderstand something?

import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

class TestPage extends StatefulWidget {
  const TestPage({super.key});

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> with SignalsMixin {
  late final counter = signal(0);

  void _incrementCounter() {
    counter.value++;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter: ${counter.value}',
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: const Text('Increment counter'),
            ),
          ],
        ),
      ),
    );
  }
}

[Solido]

Hi!

Here's an exemple of SignalsMixin.
Expression change a little.

import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

main() {
  runApp(MaterialApp(home: Scaffold(body: TestPage())));
}

class TestPage extends StatefulWidget {
  const TestPage({super.key});

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> with SignalsMixin {
  late final counter = this.createSignal(0);

  void _incrementCounter() {
    counter.value++;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter: ${counter.value}',
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: const Text('Increment counter'),
            ),
          ],
        ),
      ),
    );
  }
}

[Gianluca-Altieri]

Great @Solido! Now it's evident and easy!