React hooks

The React SDK provides the following React hooks:

useFeature hook

Retrieve the status of a feature flag and its variables. This can be useful as an alternative to the OptimizelyFeature component or to use feature flags & variables inside code that is not explicitly rendered.

Arguments

Returns

Returns the following array:

Example

The following example shows using the useFeature hook to render something if a feature flag is enabled:

import { useEffect } from 'react';
import { useFeature } from '@optimizely/react-sdk';

function LoginComponent() {
  const [isEnabled, variables] = useFeature(
    'feature1',
    { autoUpdate: true },
    {
      /* (Optional) User overrides */
    }
  );
  useEffect(() => {
    document.title = isEnabled ? 'login1' : 'login2';
  }, [isEnabled]);

  return (
    <p>
      <a href={isEnabled ? '/login' : '/login2'}>{variables.loginText}</a>
    </p>
  );
}

useExperiment hook

Retrieves the variation key for an experiment, optionally auto updating the variation key based on underlying user or datafile changes. This can be useful as an alternative to the OptimizelyExperiment component or to use an experiment inside code that is not explicitly rendered.

📘

Note

The useExperiment hook causes a decision event and counts as an Impression.

Arguments

Returns

Returns the following array:

Example

The following example shows using the useExperiment hook to render something based on the returned experiment variation:

import { useEffect } from 'react';
import { useExperiment } from '@optimizely/react-sdk';

function LoginComponent() {
  const [variation, clientReady] = useExperiment(
    'experiment1',
    { autoUpdate: true },
    {
      /* (Optional) User overrides */
    }
  );
  useEffect(() => {
    document.title = variation === 'login1' ? 'login1' : 'login2';
  }, [variation]);

  return (
    <p>
      <a href={variation === 'login1' ? '/login1' : '/login2'}>Click to login</a>
    </p>
  );
}