Modify Provider to keep the latest flags even when it is remounted

src/asyncWithLDProvider.test.tsx

@@ -227,4 +227,31 @@ describe('asyncWithLDProvider', () => {
 
     expect(receivedNode).toHaveTextContent('{"testFlag":false}');
   });
+
+  test('Provider keeps the latest flags even when it is remounted', async () => {
+    mockInitLDClient.mockImplementation(() => ({
+      ldClient: mockLDClient,
+      flags: rawFlags,
+    }));
+    mockLDClient.on.mockImplementationOnce((e: string, cb: (c: LDFlagChangeset) => void) => {
+      cb({ 'test-flag': { current: false, previous: true }, 'another-test-flag': { current: false, previous: true } });
+    });
+    const options: LDOptions = {};
+    const LDProvider = await asyncWithLDProvider({ clientSideID, context, options });
+
+    const { unmount } = render(
+      <LDProvider>
+        <Consumer>{(value) => <span>Received: {JSON.stringify(value.flags)}</span>}</Consumer>
+      </LDProvider>,
+    );
+    unmount();
+    const { getByText } = render(
+      <LDProvider>
+        <Consumer>{(value) => <span>Received: {JSON.stringify(value.flags)}</span>}</Consumer>
+      </LDProvider>,
+    );
+    const receivedNode = getByText(/^Received:/);
+
+    expect(receivedNode).toHaveTextContent('{"testFlag":false,"anotherTestFlag":false}');
+  });
 });

src/asyncWithLDProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, ReactNode } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { LDFlagChangeset } from 'launchdarkly-js-client-sdk';
 import { AsyncProviderConfig, defaultReactOptions } from './types';
 import { Provider } from './context';
@@ -40,24 +40,24 @@ export default async function asyncWithLDProvider(config: AsyncProviderConfig) {
     targetFlags,
   );
 
-  const initialFlags = options?.bootstrap && options.bootstrap !== 'localStorage' ? options.bootstrap : fetchedFlags;
+  let currentFlags = options?.bootstrap && options.bootstrap !== 'localStorage' ? options.bootstrap : fetchedFlags;
 
   const LDProvider = ({ children }: { children: ReactNode }) => {
     const [ldData, setLDData] = useState(() => ({
-      unproxiedFlags: initialFlags,
-      ...getFlagsProxy(ldClient, initialFlags, reactOptions, targetFlags),
+      unproxiedFlags: currentFlags,
+      ...getFlagsProxy(ldClient, currentFlags, reactOptions, targetFlags),
     }));
 
     useEffect(() => {
       function onChange(changes: LDFlagChangeset) {
         const updates = getFlattenedFlagsFromChangeset(changes, targetFlags);
         if (Object.keys(updates).length > 0) {
           setLDData(({ unproxiedFlags }) => {
-            const updatedUnproxiedFlags = { ...unproxiedFlags, ...updates };
+            currentFlags =  { ...unproxiedFlags, ...updates };
 
             return {
-              unproxiedFlags: updatedUnproxiedFlags,
-              ...getFlagsProxy(ldClient, updatedUnproxiedFlags, reactOptions, targetFlags),
+              unproxiedFlags: currentFlags,
+              ...getFlagsProxy(ldClient, currentFlags, reactOptions, targetFlags),
             };
           });
         }