Simultaneous invocations of useFlags() detected

This page describes what to do about the @happykit/flags: Simultaneous invocations of useFlags() detected warning.

Why you see this warning

You are calling useFlags() multiple times on the same page.

Philosophy behind this warning

useFlags() is supposed to be called exactly once per page. Usually from within the page component. This has multiple benefits

  • useFlags() invocations send requests to evaluate your feature flags. Calling useFlag() exactly once per page guarantees no extraneous requests are made.
  • When you invoke useFlags() more than once per page your inputs might differ on each invocation. And so your flags might evaluate to different values.

How to resolve this warning

Call useFlags() only in your page components. If child components need access to the flags, pass the return value down to them using props.

You can alternatively pass the return value via Context if you dislike passing props. I would personally recommend passing it via props instead though.