useDecision hook for the React Native SDK
The useDecision hook retrieves the decision result for a flag key for the Optimizely Feature Experimentation React Native SDK.
Minimum SDK version – v2.5+
useDecision hook
Retrieves the decision result for a flag key, optionally auto-updating that decision based on underlying user, datafile, or forced decision changes.
Arguments
Argument | Type | Description |
---|---|---|
| String | The key of the feature flag |
| Object | Includes the following:
|
| Object | Includes the following:
|
Returns
Returns the following array:
Key | Type | Description |
---|---|---|
| Decision result for the flag key. | |
| Boolean | Indicates whether the |
| Boolean | Indicates whether the
|
Example useDecision
useDecision
import { useEffect } from 'react';
import { View, Button } from 'react-native';
import { useDecision } from '@optimizely/react-sdk';
function LoginComponent() {
const [decision, clientReady] = useDecision(
'flag1',
{ autoUpdate: true },
{
/* (Optional) User overrides */
}
);
useEffect(() => {
document.title = decision.enabled ? 'New Feature flag' : 'Old Feature flag';
}, [decision]);
const onLoginPress = () => {
if (decision.variationKey === 'login1') {
navigateToLogin1();
} else if (decision.variationKey === 'login2') {
navigateToLogin2();
}
};
return (
<View>
<Button onPress={onLoginPress}>Login</Button>
</View>
);
}
OptimizelyDecideOption
OptimizelyDecideOption
The following table lists the OptimizelyDecideOption
enum with an explanation what happens if you set them. In addition to setting these options individually for a decide method, you can also set them as global defaults when you instantiate the Optimizely client. See Initialize the React Native SDK.
The following example shows how you can set options individually on the useDecision
hook, or as global defaults when you instantiate the Optimizely client. See Initialize React Native SDK.
import { useEffect } from 'react';
import { View, Button } from 'react-native';
import {
createInstance,
OptimizelyProvider,
useDecision,
OptimizelyDecideOption,
} from '@optimizely/react-sdk';
// Instantiate an Optimizely client
const optimizelyClient = createInstance({
sdkKey: 'Your_SDK_Key', // Replace with your SDK key
defaultDecideOptions: [OptimizelyDecideOption.DISABLE_DECISION_EVENT],
});
function LoginComponent() {
const [decision, clientReady] = useDecision(
'flag1',
{
autoUpdate: true,
decideOptions: [
OptimizelyDecideOption.ENABLED_FLAGS_ONLY,
OptimizelyDecideOption.IGNORE_USER_PROFILE_SERVICE,
],
},
{
/* (Optional) User overrides */
}
);
useEffect(() => {
document.title = decision.enabled ? 'New Feature flag' : 'Old Feature flag';
}, [decision]);
const onLoginPress = () => {
if (decision.variationKey === 'login1') {
navigateToLogin1();
} else if (decision.variationKey === 'login2') {
navigateToLogin2();
}
};
return (
<View>
<Button onPress={onLoginPress}>Login</Button>
</View>
);
}
function App() {
return (
<OptimizelyProvider optimizely={optimizelyClient} user={{ id: 'user123' }}>
<LoginComponent />
</OptimizelyProvider>
);
}
Updated 3 days ago