HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityLog In

useDecision hook

This topic describes the useDecision hook, which retrieves the decision result for a flag key

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


Did this page help you?