Flags not available on initial render when using asyncWithLDProvider with useFlags

[mether]

Is this a support request? This issue tracker is maintained by LaunchDarkly SDK developers and is intended for feedback on the SDK code. If you're not sure whether the problem you are having is specifically related to the SDK, or to the LaunchDarkly service overall, it may be more appropriate to contact the LaunchDarkly support team; they can help to investigate the problem and will consult the SDK team if necessary. You can submit a support request by going here or by emailing support@launchdarkly.com.

Note that issues filed on this issue tracker are publicly accessible. Do not provide any private account information on your issues. If your problem is specific to your account, you should submit a support request as described above.

Describe the bug A clear and concise description of what the bug is.

Hey there!

When using asyncWithLDProvider with useFlags in a child component, the flags object is empty on the initial render i.e. not initialized

To reproduce Steps to reproduce the behavior.

I reproduced the bug in a codesandbox and compared useFlags vs useLDClient()?.allFlags() to demonstrate the issue

https://codesandbox.io/s/heuristic-cache-lu7j72

Steps:

• Create a new React application
• Initialize asyncWithLDProvider at the app entry point and wrap around a component
• Inside the component add const flags = useFlags() and console.log(flags)
• Inspect the console and refresh the page
• Notice that the initial render log is an empty object (not initialized)
• Notice that the second render log is contains the flags (is initialized)

I also noticed that if you use useLDClient()?.allFlags() it will return the flags on the initial render, which I will likely use as a workaround for now

Expected behavior A clear and concise description of what you expected to happen.

When using asyncWithLFProvider I expect useFlags to already have the flags available

This expected behaviour is outlined in the docs:

After initialization is complete, your flags and the client are available at the start of your React app lifecycle

• Initializing using asyncWithLDProvider

Logs If applicable, add any log output related to your problem.

See codesandbox and open up the console

SDK version The version of this SDK that you are using.

Latest 2.29.1

Language version, developer tools For instance, Go 1.11 or Ruby 2.5.3. If you are using a language that requires a separate compiler, such as C, please include the name and version of the compiler too.

See codesandbox for dependencies

OS/platform For instance, Ubuntu 16.04, Windows 10, or Android 4.0.3. If your code is running in a browser, please also include the browser type and version.

MacOS 12.6

Additional context Add any other context about the problem here.

[kinyoklion]

Hello @mether,

Thank you for the report.

Filed internally as 174659

Thanks, Ryan

[kinyoklion]

I see the problem, our asyncWithLDProvider is currently setting the initial values in an effect, instead of setting the initial value in the useState call. As a result they miss the first render. We will work on a fix for that.

Thanks, Ryan

[mether]

Ahh that makes sense

Cheers for the update Ryan!

[kinyoklion]

@mether This has been fixed in the 2.29.2 release.

Thanks, Ryan

[mether]

Cheers Ryan, just confirming that the fix worked for me 👍

I'll go ahead and close this ticket, thanks for the speedy resolution!