useDecision hook for the React SDK

This topic describes the useDecision hook, which retrieves the decision result for a flag key for the Optimizely Feature Experimentation React SDK.

Suggest Edits

Version

SDK v2.5 and higher

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 will update the flag decision in response to datafile or user changes. Default: false. `timeout` (number) - Client timeout as described in the OptimizelyProvider section. 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. Note: clientReady can be true even if didTimeout is also true. This indicates that the client became ready after the timeout period.

Example

The following example shows using the useDecision hook to render something based on the returned flag decision:

import { 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

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 SDK.

import { useEffect } from 'react';
import {
  createInstance,
  OptimizelyProvider,
  useDecision,
  OptimizelyDecideOption,
} from '@optimizely/react-sdk';

// Instantiate an Optimizely client
const optimizelyClient = createInstance({
  sdkKey: '<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>
  );
}

The following table shows details for OptimizelyDecideOption.

OptimizelyDecideOption enum	If set:
OptimizelyDecideOption.DISABLE_DECISION_EVENT	Prevents the visitor from firing an impression while still being served the variation, which disables displaying results of the Decide method on the Optimizely application's Results page. This setting can be why the Decision Event Dispatched enum is false in the returned `OptimizelyDecision` object or the DECIDE notification listener payload.
OptimizelyDecideOption.ENABLED_FLAGS_ONLY	Return decisions for enabled flags only. This is a valid option only for methods that decide multiple flags, like the Decide All method. This option is ignored if it is invalid. When this option is not set, the SDK returns all decisions regardless of whether the flag is enabled or not.
OptimizelyDecideOption.IGNORE_USER_PROFILE_SERVICE	When set, the SDK bypasses user profile service (UPS) (both lookup and save) for the decision. When this option is not set, UPS overrides audience targeting, traffic allocation, and experiment mutual exclusion groups.
OptimizelyDecideOption.INCLUDE_REASONS	Return log messages in the Reasons field of OptimizelyDecision object. Note that unlike info or debug messages, critical error messages are always returned, regardless of this setting.
OptimizelyDecideOption.EXCLUDE_VARIABLES	Exclude flag variable values from the decision result. Use this option to minimize the returned decision by skipping large JSON variables.

Updated 3 months ago