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
|
ExampleuseDecision
useDecisionimport { 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
OptimizelyDecideOptionThe following table lists theOptimizelyDecideOption 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. SeeInitialize the React Native SDK.
The following example shows how you can set options individually on theuseDecision hook, or as global defaults when you instantiate the Optimizely client. SeeInitialize 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 clientconst 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 19 days ago