Is it okay to use ref.read inside useEffect or useMemoized?

[ryohetoy]

The doc mentioned that we cannot use ref.read inside build method directly.
But how about ref.read inside useEffect or useMemoized from flutter_hooks package? Is it OK?

https://riverpod.dev/ja/docs/essentials/combining_requests#refread-%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89

If it is an anti-pattern, I would appreciate if you could also tell me the reason.

Code Example

class Test extends HookConsumerWidget {
  const Test({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    // NG
    ref.read(xxx);

    // Is this OK?
    useEffect(() {
      final value = ref.read(xxx);
      print(value);
      return null;
    }, []);

    // Is this OK?
    final initialValue = useMemoized(() {
      return ref.read(xxx);
    }, []);

    return const Placeholder();
  }
}

[gdurandrexel]

You can use ref.read in a build method. Your widget will just not rebuild if the value of the provider changes. This is usually not what you want, hence the warning in the doc.

As for your question, I would say that as long as ref does not become invalid at the point you use it, then it is OK.
I don't see anything technically wrong with your usage.
But be aware of the warning in the doc: Be careful when using ref.read on a provider as, since it doesn't listen to the provider, said provider may decide to destroy its state if it isn't listened., which means, in your example, that the provider xxx may build twice. This may happen if there is an async gap between 2 reads of the same autodispose provider.

[rrousselGit]

Don't. You should instead use ref.watch before calling the hook, and pass the value as key:

final value = ref.watch(...);

useEffect(() {
  print(value);
}, [value]);

[gdurandrexel]

Is there a technical reason to avoid this (it may produce a bug or not do what is expected, which is reading the current value), or is it just that it's probably not what ryohetoy wants to do.

BTW it looks like both versions to do produce the same result:

• his will print once (if using const [] as key), and the widget will never rebuild on value change
• yours will print each time the provider value changes and the widget will also rebuild each time

[rrousselGit]

Hooks and providers are supposed to be reactive. They should be called again when a value they depend on changed. It's a bug if it isn't :)

[ryohetoy]

Thank you for reply.
But what if we do not need to depend on it?

In the case below, I want to print every time a changed, but not b.
If I watch for bProvider as you said, I think the widget will cause unnecessary rebuild which we don't want.

final a = ref.watch(aProvider);

useEffect(() {
  // I need current b value at this point.
  final b = ref.read(bProvider);
  print(a + b);
  return null;
}, [a]);