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. CallinguseFlag()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.