diff --git a/src/asyncWithLDProvider.test.tsx b/src/asyncWithLDProvider.test.tsx
index 48e9de7..aaa9bef 100644
--- a/src/asyncWithLDProvider.test.tsx
+++ b/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(
+
+ {(value) => Received: {JSON.stringify(value.flags)}}
+ ,
+ );
+ unmount();
+ const { getByText } = render(
+
+ {(value) => Received: {JSON.stringify(value.flags)}}
+ ,
+ );
+ const receivedNode = getByText(/^Received:/);
+
+ expect(receivedNode).toHaveTextContent('{"testFlag":false,"anotherTestFlag":false}');
+ });
});
diff --git a/src/asyncWithLDProvider.tsx b/src/asyncWithLDProvider.tsx
index 3b28ec4..2d380e5 100644
--- a/src/asyncWithLDProvider.tsx
+++ b/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,12 +40,12 @@ 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(() => {
@@ -53,11 +53,11 @@ export default async function asyncWithLDProvider(config: AsyncProviderConfig) {
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),
};
});
}