How to debounce and cancel side effects?

[JanHitako]

Hi, the debouncing example in the documentation is only about when the provider itself is being disposed.

I am wondering what would be the proper method to debounce this for example:

@riverpod
class InteractionController extends _$InteractionController {
  @override
  Future<PostInteractions> build() async => [/* ... */];

  Future<void> interactLike() async {
    /* .... */
    state = const AsyncValue.loading();
    final likeState = _postRepository.interactLike(post, _user); 
    // _postRepository.interactLike(...) will like if the post isn't liked,
    // and unlike if the post is liked then return the new state of the like that is returned by the server
    something.then((isLiked) => {
        state = AsyncData(lastState.CopyWith(isLiked: isLiked));
    }, onError: (err) => {
        state = AsyncValue.error(...);
      }
    );
  }

  Future<void> interactSaveFavorite() async {
    /* .... */
  }

  /* .... */
  
}

interactLike() is called by a button widget, what I want to do is that when the user tap on the button, I want to wait a few milliseconds before sending the request, if within that timeframe, the user tap again the button, no request will be sent.

[idispatch75]

I use RX for this kind of thing (in this case rxdart). RX is in my opinion a required knowledge when doing UI, and is applicable to every framework you may use.
I would put the debounce logic in the UI though.

In your HookConsumerWidget, you could use something like this (untested, may not compile):

Widget build(...) {
  final tapStreamController = useStreamController<bool>();
  
  useEffect(() {
    final subscription = tapStreamController.stream
        .debounceTime(const Duration(milliseconds: 500))
        .listen((_) {
      ref.read(interactionControllerProvider.notifier).interactLike();
    });
  
    return subscription.cancel;
  }, [tapStreamController]);

  return OutlinedButton(
    onPressed: () => tapStreamController.add(true),
  )
}