Dev guideAPI Reference
Dev guideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

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.

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

ArgumentTypeDescription
flagKey (required)StringThe key of the feature flag
options (optional)ObjectIncludes 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)ObjectIncludes 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:

KeyTypeDescription
decisionOptimizelyDecisiondecision result for the flag key.
clientReadyBooleanIndicates whether the ReactSDKClient instance is ready
didTimeoutBooleanIndicates 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 enumIf set:
OptimizelyDecideOption.DISABLE_DECISION_EVENTPrevents 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_ONLYReturn 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_SERVICEWhen 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_REASONSReturn 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_VARIABLESExclude flag variable values from the decision result. Use this option to minimize the returned decision by skipping large JSON variables.