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
`flagKey` (required)	String	The key of the feature flag
`options` (optional)	Object	Includes the following: `autoUpdate` (boolean) - If true, this hook updates the flag decision in response to datafile or user changes. Default: `false`. `timeout` (number) - Client timeout as described in the `OptimizelyProvider` documentation. Overrides any timeout set on the ancestor `OptimizelyProvider`. `decideOptions` (OptimizelyDecideOption) - Array of `OptimizelyDecideOption` enums. See OptimizelyDecideOption.
`overrides` (optional)	Object	Includes the following: `overrideUserId` (string) - Override the userId to be used to obtain the decision result for this hook. `overrideAttributes` (optimizely.UserAttributes) - Override the user attributes to be used to obtain the decision result for this hook.

Argument

Type

Description

flagKey (required)

String

The key of the feature flag

options (optional)

Object

Includes the following:

autoUpdate (boolean) - If true, this hook updates the flag decision in response to datafile or user changes. Default: false.
timeout (number) - Client timeout as described in the OptimizelyProvider documentation. Overrides any timeout set on the ancestor OptimizelyProvider.
decideOptions (OptimizelyDecideOption) - Array of OptimizelyDecideOption enums. See OptimizelyDecideOption.

overrides (optional)

Object

Includes the following:

overrideUserId (string) - Override the userId to be used to obtain the decision result for this hook.
overrideAttributes (optimizely.UserAttributes) - Override the user attributes to be used to obtain the decision result for this hook.

Returns

Returns the following array:

Key	Type	Description
`decision`	`OptimizelyDecision`	Decision result for the flag key.
`clientReady`	Boolean	Indicates whether the `ReactSDKClient` instance is ready
`didTimeout`	Boolean	Indicates whether the `ReactSDKClient` instance became ready within the allowed timeout range. `clientReady` can be `true` even if `didTimeout` is also true. This indicates that the client became ready after the timeout period.

Key

Type

Description

decision

OptimizelyDecision

Decision result for the flag key.

clientReady

Boolean

Indicates whether the ReactSDKClient instance is ready

didTimeout

Boolean

Indicates whether the ReactSDKClient instance became ready within the allowed timeout range.

clientReady can be true even if didTimeout is also true. This indicates that the client became ready after the timeout period.

Example `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`

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 5 days ago