useMemoized caches both next and previous values

[anmol-me]

useMemoized is caching both values previous and next. Also, log('Wait Over') runs twice. Isn't useMemoized suppose to cache only the previous value? Please explain

class HomePage extends HookWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    log('*** REBUILDING HOME PAGE ***');
    ValueNotifier<int> useStateNum = useState(0);

    Future<ValueNotifier<int>> slowFunction() async {
      await Future.delayed(const Duration(seconds: 5));
      log('Wait Over');
      return useStateNum;
    }

    var useMem = useMemoized(() => slowFunction(), [slowFunction()]);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Hooks'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            OutlinedButton(
              onPressed: () async {
                ValueNotifier<int> sl = await useMem;
                sl.value++;
              },
              child: Text('State++: ${useStateNum.value}'),
            ),
            OutlinedButton(
              onPressed: () async {
                ValueNotifier<int> sl = await useMem;
                sl.value--;
              },
              child: Text('State--: ${useStateNum.value}'),
            ),
          ],
        ),
      ),
    );
  }
}

[rrousselGit]

Your key passed to useMemoized is never the same. The problem is that slowFunction() != slowFunction().
Also, you invoked the function twice, so you'll by definition have two logs.

And even if you fix all that, your function is still async. So if your key useMemoized changes while the previous execution is still pending, the previous async function won't be cancelled.

[anmol-me]

Made the following change

    var useMem = useMemoized(() => slowFunction(), [useStateNum.value]);

The second thing is, as per the documentation, "Later, when the HookWidget rebuilds, the call to useMemoized will return the previously created instance without calling valueBuilder.".

Here, the current value/instance is say, 2, the previous instance will therefore be 1, and the next instance will be 3.

The result of 2 instances is cached - previous and next (1 & 3).

The documentation says "return the previously created instance". But when I press the increment button the next instance is immediately returned. This behavior should only happen with the previous instance. Why is the next returning instance being cached?

[rrousselGit]

Your value changed. So a new instance was made and you got that instead.