useDecision hook for the React SDK
The useDecision hook retrieves the decision result for a flag key for the Optimizely Feature Experimentation React SDK.
Minimum SDK version – v2.5+
useDecision hook
useDecision hookRetrieves 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 an array with the following:
Key | Type | Description |
|---|---|---|
| Decision result for the flag key. | |
| Boolean | Indicates whether the |
| Boolean | Indicates whether the
|
ExampleuseDecision
useDecisionimport { useEffect } from 'react';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]); return ( <p> <a href={decision.variationKey === 'login1' ? '/login' : '/login2'}>Click to login</a> </p> );}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 SDK.
enum | If set |
|---|---|
| Prevents the SDK from dispatching animpression event when serving a variation. This disables decision tracking on theOptimizely Experiment Results page and thedecision notification listener. |
| Returns decisions only for flags that are currently enabled. Used with thedecide all method anddecide for keys method. When this option is not set, the Android SDK returns all decisions regardless of whether the flag is enabled. |
| Bypasses the user profile service (both lookup and save) for the decision. When this option is not set, user profile service overrides audience targeting, traffic allocation, and experiment mutual exclusion groups. |
| Adds log messages to the reasons field of the decision. Critical errors are always returned, even if this option is not set. |
| Excludes flag variable values from the decision result. Use this option to minimize the returned decision by skipping large JSON variables. |
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 SDK.
import { useEffect } from 'react';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]); return ( <p> <a href={decision.variationKey === 'login1' ? '/login' : '/login2'}>Click to login</a> </p> );}function App() { return ( <OptimizelyProvider optimizely={optimizelyClient} user={{ id: 'user123' }}> <LoginComponent /> </OptimizelyProvider> );}Updated 19 days ago