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), }; }); }