An Idea for simplified dispose effects

[yousefak007]

Problem:

Managing disposable resources in Flutter applications can be cumbersome, leading to potential memory leaks and code clutter. This proposal introduces a helper library to simplify effect and state disposal.

Key Features:

• Disposer class: Centrally stores and invokes disposal listeners when disposed.

abstract class IDisposer {
  void onDispose(void Function() listener);
}

class Disposer extends IDisposer {
  List<void Function()>? _onDisposeListeners;

  @override
  void onDispose(void Function() listener) {
    _onDisposeListeners ??= [];
    _onDisposeListeners!.add(listener);
  }

  void dispose() {
    for (var disposer in _onDisposeListeners ?? []) {
      disposer();
    }
  }
}

• ReactionDisposerExtensions: Associates EffectCleanup with a Disposer's onDispose callback.

extension ReactionDisposerExtensions on EffectCleanup {
  void disposer(IDisposer disposer) {
    disposer.onDispose(call);
  }
}

• Automatic Disposal in Widgets: Mixin for automatic disposal within stateful widgets.

mixin DisposerMixin<T extends StatefulWidget> on State<T> {
  final IDisposer disposer = Disposer();

  @override
  void dispose() {
    (disposer as Disposer).dispose();
    super.dispose();
  }
}

// Dart example

final disposer = Disposer();

effect(() {
  // ... another effect
}).disposer(disposer);

// ... more effects

disposer.dispose(); // Dispose all effects

// Widget example:

class _FooState extends State<FooPage> with DisposerMixin {
  @override
  void initState() {
    effect(() {
      // ...
    }).disposer(disposer);
    super.initState();
  }
}

Benefits:

• Improved resource management and reduced memory leaks.
• Cleaner and more maintainable Flutter code.
• Less manual disposal logic required.

Proposed Enhancement:

Introduce a simplified syntax like effect(() { ... }, disposer: disposer); for associating effects with a Disposer.

[yousefak007]

I used Bard to translate this document, as I am not a native English speaker.

[rodydavis]

This is very interesting! I also thought about having scopes similar to this implementation:

https://github.com/maverick-js/signals

In addition to providing lints to dispose signals, I think this would be another great idea.

[yousefak007]

I agree that scopes can be useful in certain situations. However, I share your concern that they might struggle to effectively group effects and signals within a function.

That's why I find the Disposer approach appealing. It aligns with Riverpod's ref.onDispose concept, allowing disposal registration from anywhere in your codebase

[yousefak007]

I think if you could add a disposer parameter, it would allow developers to opt in whenever they want.

    effect(() {
         ... 
     },
     disposer: disposer
   );

[jinyus]

I solved this problem in my package by having BeaconGroups; which is basically a way to create beacons/signals that can be disposed/reset together.

 final myGroup = BeaconGroup();

 final name = myGroup.writable('Bob');
 final age = myGroup.writable(20);

 myGroup.effect(() {
   print(name.value); // Outputs: Bob
 });

 age.value = 21;
 name.value = 'Alice';

 myGroup.resetAll(); // resets beacons but does nothing to the effect

 print(name.value); // Bob
 print(age.value); // 20

 myGroup.disposeAll();

 print(name.isDisposed); // true
 print(age.isDisposed); // true
 // All beacons and effects are disposed

[yousefak007]

Your solution is creating effects or signals with a group object, I think this is not flexible and not simple.

My idea is to eliminate the need to make the EffectCleanup variable global and then call it in the dispose function.

[jinyus]

I'm not sure I follow. I think my solution is more intuitive:

class _FooState extends State<FooPage> {

final group  = SignalGroup();
  @override
  void initState() {
    group.effect(() {
      // ...
    });
    super.initState();
  }

  @override
  void dispose() {
      group.dispose()
      super.dispose()
  }
}

A mixin for stateful widgets could be created that does this automatically.

mixin SignalGroupWidget<T extends StatefulWidget> on State<T> {
  final group = SignalGroup();

  @override
  void dispose() {
    super.dispose();
    group.disposeAll();
  }
}

Then use it seamlessly:

class _FooState extends State<FooPage> with SignalGroupWidget {

  @override
  void initState() {
    group.effect(() {
      // ...
    });
    super.initState();
  }
}