Skip to content

fix: react context no longer changes on flag change #1081

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joker23 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

fix: react context no longer changes on flag change #1081

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
689c139
fix: react context no longer changes on flag change
joker23 Jan 30, 2026
816740c
fix: register changes to defaultValue as a way to trigger hook
joker23 Feb 2, 2026
54a25b3
chore: addressing PR comment
joker23 Feb 2, 2026
5669d5d
chore: removing unnecessary useEffect
joker23 Feb 3, 2026
eba484e
chore: using deep compare to address objects
joker23 Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions packages/sdk/react-native/__tests__/provider/LDProvider.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { render } from '@testing-library/react';
import React from 'react';

import { AutoEnvAttributes, LDContext, LDOptions } from '@launchdarkly/js-client-sdk-common';

import { useLDClient } from '../../src/hooks';
import LDProvider from '../../src/provider/LDProvider';
import setupListeners from '../../src/provider/setupListeners';
import ReactNativeLDClient from '../../src/ReactNativeLDClient';

jest.mock('../../src/ReactNativeLDClient');
jest.mock('../../src/provider/setupListeners');

const TestApp = () => {
const ldClient = useLDClient();
Expand All @@ -22,7 +21,6 @@ const TestApp = () => {
};
describe('LDProvider', () => {
let ldc: ReactNativeLDClient;
const mockSetupListeners = setupListeners as jest.Mock;

beforeEach(() => {
jest.useFakeTimers();
Expand All @@ -45,9 +43,7 @@ describe('LDProvider', () => {
};
},
);
mockSetupListeners.mockImplementation((client: ReactNativeLDClient, setState: any) => {
setState({ client });
});

ldc = new ReactNativeLDClient('mobile-key', AutoEnvAttributes.Enabled);
});

Expand Down
34 changes: 0 additions & 34 deletions packages/sdk/react-native/__tests__/provider/setupListeners.test.ts
View file
Open in desktop

This file was deleted.

166 changes: 115 additions & 51 deletions packages/sdk/react-native/src/hooks/variation/useTypedVariation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,31 @@
import { useEffect, useRef, useState } from 'react';

import { fastDeepEqual } from '@launchdarkly/js-client-sdk-common';

import type ReactNativeLDClient from '../../ReactNativeLDClient';
import useLDClient from '../useLDClient';
import { LDEvaluationDetailTyped } from './LDEvaluationDetail';

function getTypedVariation<T extends boolean | number | string | unknown>(
ldClient: ReactNativeLDClient,
key: string,
defaultValue: T,
): T {
switch (typeof defaultValue) {
case 'boolean':
return ldClient.boolVariation(key, defaultValue as boolean) as T;
case 'number':
return ldClient.numberVariation(key, defaultValue as number) as T;
case 'string':
return ldClient.stringVariation(key, defaultValue as string) as T;
case 'undefined':
case 'object':
return ldClient.jsonVariation(key, defaultValue) as T;
default:
return ldClient.variation(key, defaultValue);
}
}

/**
* Determines the strongly typed variation of a feature flag.
*
Expand All @@ -15,21 +40,75 @@ export const useTypedVariation = <T extends boolean | number | string | unknown>
defaultValue: T,
): T => {
const ldClient = useLDClient();
const [value, setValue] = useState<T>(() =>
ldClient ? getTypedVariation(ldClient, key, defaultValue) : defaultValue,
);
const valueRef = useRef<T>(value);

useEffect(() => {
// If the key changes, then we will need to make sure that the value is updated.
const initialValue = getTypedVariation(ldClient, key, defaultValue);
if (!fastDeepEqual(initialValue, valueRef.current)) {
valueRef.current = initialValue;
setValue(initialValue);
}

const handleChange = (): void => {
const newValue = getTypedVariation(ldClient, key, defaultValue);
if (!fastDeepEqual(newValue, valueRef.current)) {
valueRef.current = newValue;
setValue(newValue);
}
};
ldClient.on(`change:${key}`, handleChange);
Copy link
Member

@kinyoklion kinyoklion Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am tempted to say we should add a listener for context changes as well. Which then trigger a re-evaluation, but won't end up changing state if the value is the same.

I was doing some testing in flutter and that ended up being the sweet spot with providers to ensure that each context appeared correctly in an audience.

Copy link
Contributor Author

@joker23 joker23 Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is reasonable, but that might alter the API here since the original hook would only return the flag value. Not sure if it would be confusing if a state update is dispatched on context change without being able to get the actual changed value?

We can introduce a new hook for the context value (or say to use the react context with getContext()). Don't think there is a really good answer to this, honestly. You will have potentially varying behaviors depending on the flag value type because I think react will not dispatch an update if the setState is called on a value that is equivalent to the previous state value.

return () => {
ldClient.off(`change:${key}`, handleChange);
};
}, [key, defaultValue]);

return value;
};

function getTypedVariationDetail<T extends boolean | number | string | unknown>(
ldClient: ReactNativeLDClient,
key: string,
defaultValue: T,
): LDEvaluationDetailTyped<T> {
let detail: LDEvaluationDetailTyped<T>;
switch (typeof defaultValue) {
case 'boolean':
return ldClient.boolVariation(key, defaultValue as boolean) as T;
case 'number':
return ldClient.numberVariation(key, defaultValue as number) as T;
case 'string':
return ldClient.stringVariation(key, defaultValue as string) as T;
case 'boolean': {
detail = ldClient.boolVariationDetail(
key,
defaultValue as boolean,
) as LDEvaluationDetailTyped<T>;
break;
}
case 'number': {
detail = ldClient.numberVariationDetail(
key,
defaultValue as number,
) as LDEvaluationDetailTyped<T>;
break;
}
case 'string': {
detail = ldClient.stringVariationDetail(
key,
defaultValue as string,
) as LDEvaluationDetailTyped<T>;
break;
}
case 'undefined':
case 'object':
return ldClient.jsonVariation(key, defaultValue) as T;
default:
return ldClient.variation(key, defaultValue);
case 'object': {
detail = ldClient.jsonVariationDetail(key, defaultValue) as LDEvaluationDetailTyped<T>;
break;
}
default: {
detail = ldClient.variationDetail(key, defaultValue) as LDEvaluationDetailTyped<T>;
break;
}
}
};
return { ...detail, reason: detail.reason ?? null };
}

/**
* Determines the strongly typed variation of a feature flag for a context, along with information about
Expand All @@ -55,48 +134,33 @@ export const useTypedVariationDetail = <T extends boolean | number | string | un
defaultValue: T,
): LDEvaluationDetailTyped<T> => {
const ldClient = useLDClient();
const [detail, setDetail] = useState<LDEvaluationDetailTyped<T>>(() =>
ldClient
? getTypedVariationDetail(ldClient, key, defaultValue)
: { value: defaultValue, reason: null },
);
const detailRef = useRef<LDEvaluationDetailTyped<T>>(detail);

switch (typeof defaultValue) {
case 'boolean': {
const detail = ldClient.boolVariationDetail(key, defaultValue as boolean);

return {
...detail,
reason: detail.reason ?? null,
} as LDEvaluationDetailTyped<T>;
useEffect(() => {
// If the key changes, then we will need to make sure that the value is updated.
const initialDetail = getTypedVariationDetail(ldClient, key, defaultValue);
if (!fastDeepEqual(initialDetail, detailRef.current)) {
detailRef.current = initialDetail;
setDetail(initialDetail);
}
case 'number': {
const detail = ldClient.numberVariationDetail(key, defaultValue as number);

return {
...detail,
reason: detail.reason ?? null,
} as LDEvaluationDetailTyped<T>;
}
case 'string': {
const detail = ldClient.stringVariationDetail(key, defaultValue as string);
const handleChange = () => {
const newDetail = getTypedVariationDetail(ldClient, key, defaultValue);
if (!fastDeepEqual(newDetail, detailRef.current)) {
detailRef.current = newDetail;
setDetail(newDetail);
}
};
ldClient.on(`change:${key}`, handleChange);
return () => {
ldClient.off(`change:${key}`, handleChange);
};
}, [key, defaultValue]);

return {
...detail,
reason: detail.reason ?? null,
} as LDEvaluationDetailTyped<T>;
}
case 'undefined':
case 'object': {
const detail = ldClient.jsonVariationDetail(key, defaultValue);

return {
...detail,
reason: detail.reason ?? null,
} as LDEvaluationDetailTyped<T>;
}
default: {
const detail = ldClient.variationDetail(key, defaultValue);

return {
...detail,
reason: detail.reason ?? null,
} as LDEvaluationDetailTyped<T>;
}
}
return detail;
};
16 changes: 7 additions & 9 deletions packages/sdk/react-native/src/provider/LDProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, { PropsWithChildren, useEffect, useState } from 'react';
import { PropsWithChildren, useMemo } from 'react';

import ReactNativeLDClient from '../ReactNativeLDClient';
import { Provider, ReactContext } from './reactContext';
import setupListeners from './setupListeners';
import { Provider } from './reactContext';

type LDProps = {
client: ReactNativeLDClient;
Expand All @@ -19,13 +18,12 @@ type LDProps = {
* @constructor
*/
const LDProvider = ({ client, children }: PropsWithChildren<LDProps>) => {
const [state, setState] = useState<ReactContext>({ client });
// NOTE: this could only provide marginal benefits, if the provider is
// a child component of a parent that is re-rendering then this
// may still re-render the context value.
const clientContext = useMemo(() => ({ client }), [client]);

useEffect(() => {
setupListeners(client, setState);
}, []);

return <Provider value={state}>{children}</Provider>;
return <Provider value={clientContext}>{children}</Provider>;
};

export default LDProvider;
15 changes: 0 additions & 15 deletions packages/sdk/react-native/src/provider/setupListeners.ts
View file
Open in desktop

This file was deleted.