launchdarkly / react-client-sdk

LaunchDarkly Client-side SDK for React.js
Other
79 stars 67 forks source link

Re-rendering LDProvider causes all `useFlags` consumers to re-render #222

Open dwilt opened 8 months ago

dwilt commented 8 months ago

Describe the bug If a parent of <LDProvider> re-renders for whatever reason, this causes the value of Provider to change which causes all consumers of useFlags to re-render. To fix this, you need to memoize the object being passed into value because it's a new object on every re-render. Read more here

To reproduce I've put together a basic codesandbox which shows this issue: https://codesandbox.io/s/laughing-wave-8lqwg9?file=/src/MyComponent.tsx

Click the "update counter" button. This updates state of the parent component. You'll notice that MyComponent, although it's memoized and has no props, still re-renders because of the useFlags hook inside of it. If you comment out useFlags, you'll see it no longer re-renders.

Expected behavior useFlags consumers shouldn't re-renders just because the LDProvider re-renders

SDK version 3.0.9

yusinto commented 8 months ago

Thanks for submitting this. We will investigate and provide an update soon. Filed internally 222693.