useFlags hook shows updates for flags that are not subscribed to, causing unwanted rerendering.

[clayembry]

Describe the bug
I am using the asyncWithLDProvider flags config attribute to subscribe to flag1. I have a React component using the useFlags hook to check the value of flag1. When I go to LaunchDarkly and change the value of flag2, I see flag2 being returned from useFlags which causes my component to rerender even though I am not subscribed to flag2.

To reproduce
Here is the code I used to reproduce the problem.

index.tsx

(async () => {
    const LDProvider = await asyncWithLDProvider({
        clientSideID: process.env.REACT_APP_LAUNCHDARKLY_CLIENT_KEY,
        user: { anonymous: true },
        flags: {
            'flag1': false,
        },
    });

    ReactDOM.render(
        <LDProvider>
            <App />
        </LDProvider>,
        document.getElementById('agent-support-portal')
    );
})();

app.tsx

const AppComponentWrapper = () => {
    const flags = useFlags();

    console.log('RENDERING App');
    console.log(flags);

    return <h1>Hello World</h1>;
};

When I first render the app, in the browser console I see:
RENDERING App
{flag1: true}

If I go to LaunchDarkly and change the value of any other client-side flag, like turning on flag2, I see a new line in my browser console:
RENDERING App
{flag1: true, flag2: true}

If I turn off flag2, I see another new line in my browser console:
RENDERING App
{flag1: true, flag2: false}

Expected behavior
When I make changes to flag2, or any other flag I am not subscribed to, useFlags should not show that flag and my component should not rerender. My component should only rerender if one of the flags I am subscribed to using asyncWithLDProvider is changed.

SDK version
2.20.0

Language version, developer tools
React 16.9.0, Typescript 3.7.2

OS/platform
MacOS 10.15.6, Chrome 84.0.4147.105

Additional context
This is a big problem in our app because our org has dozens of client-side flags being used for different apps. Our app is just subscribed to a single flag. Our app also makes a lot of graphql queries when it first renders and we have a few hundred users using the app. So when someone changes a flag value for one of the other apps, it causes our app to rerender for every user at the same, which creates a huge spike in load on our back end system. But our app should not need to rerender at all since the flag we are subscribed to did not change.

[clayembry]

I think I have rough fix for this issue. In https://github.com/launchdarkly/react-client-sdk/blob/master/src/asyncWithLDProvider.tsx#L48 if you replace lines 48-57 with this, the useFlags hook behaves the way I would expect in conjunction with the flags property of asyncWithLDProvider.

 ldClient.on('change', (changes: LDFlagChangeset) => {
                let subscribedFlagsChanged = false;
                const flattened: LDFlagSet = {};
                for (const key in changes) {
                    if (flags === undefined || flags[key] !== undefined) {
                        // tslint:disable-next-line:no-unsafe-any
                        const flagKey = reactOptions.useCamelCaseFlagKeys ? camelCase(key) : key;
                        flattened[flagKey] = changes[key].current;
                        subscribedFlagsChanged = true;
                    }
                }
                if (subscribedFlagsChanged) {
                    setLDData(prev => ({ ...prev, flags: { ...prev.flags, ...flattened } }));
                }
            });

[bwoskow-ld]

Hi @clayembry ,

Thanks for the bug report and also for the fix code snippet. I was looking at the code a few minutes ago at the same time that you added your most recent comment, and agree that the fix is along those lines -- where flags needs to be referenced before blindly populating flattened.

Do you mind submitting a pull request for the fix? That'll help get this fix resolved faster, and then we can cut a patch release for you.

[clayembry]

Sure. I'll submit a pull request with the fix. Thanks for having a look.

[bwoskow-ld]

Thanks again for the contribution! This is now available in https://github.com/launchdarkly/react-client-sdk/releases/tag/2.20.1