This shows the basics of how to use @happykit/flags. You can find more detailed examples for the different use cases in the navigation.
In this example where @happykit/flags is used for a static site, you'll notice three different renders
- the earliest one (Render #1) is the initial render, using the fallback flags (no fallback is configured in this demo)
- the second one (Render #2) is the rehydration from the cache, whose outcome depends on whether you have visited the demo page before
- the last one (Render #3) is the final settlement with the flags loaded from the server
Notice that the settled flag only switches to true after the flags were loaded from the server and are thus guaranteed to be up to date.
If you are doing capturing important information or causing heavy work like code splitting depending on feature flags, it's best to wait until settled turns true. You can then kick the work of confidently.
Render #1 (Current render){ flags: null, data: null, error: null, fetching: false, settled: false, visitorKey: null }