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
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 behavioruseFlags consumers shouldn't re-renders just because the LDProvider re-renders
Describe the bug If a parent of
<LDProvider>
re-renders for whatever reason, this causes thevalue
ofProvider
to change which causes all consumers ofuseFlags
to re-render. To fix this, you need to memoize the object being passed intovalue
because it's a new object on every re-render. Read more hereTo 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'smemo
ized and has no props, still re-renders because of theuseFlags
hook inside of it. If you comment outuseFlags
, you'll see it no longer re-renders.Expected behavior
useFlags
consumers shouldn't re-renders just because theLDProvider
re-rendersSDK version 3.0.9