Disclaimer: This website requires Please enable JavaScript in your browser settings for the best experience.

The availability of features may depend on your plan type. Contact your Customer Success Manager if you have any questions.

Dev guideRecipesAPI ReferenceChangelog
Dev guideAPI ReferenceRecipesChangelogUser GuideGitHubDev CommunityOptimizely AcademySubmit a ticketLog In
Dev guide

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

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 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)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 an array with the following:

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.

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

OptimizelyDecideOption enumIf set
OptimizelyDecideOption.DISABLE_DECISION_EVENTPrevents the SDK from dispatching an impression event when serving a variation. This disables decision tracking on the Optimizely Experiment Results page and the decision notification listener.
OptimizelyDecideOption.ENABLED_FLAGS_ONLYReturns decisions only for flags that are currently enabled. Used with the decide all method and decide for keys method.

When this option is not set, the Android SDK returns all decisions regardless of whether the flag is enabled.
OptimizelyDecideOption.IGNORE_USER_PROFILE_SERVICEBypasses 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.
OptimizelyDecideOption.INCLUDE_REASONSAdds log messages to the reasons field of the decision. Critical errors are always returned, even if this option is not set.
OptimizelyDecideOption.EXCLUDE_VARIABLESExcludes 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 the useDecision hook, or as global defaults when you instantiate the Optimizely client. See Initialize React 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', // 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>
  );
}