Updating usage from older versions

Code examples

This section provides code examples for how we recommend leveraging our new Decision and Event Tracking APIs. All existing methods and implementation are still included and supported and will only be removed after deprecation marking and with a future Major version.

We recommend adopting the new Decide, Decide All and Track Event methods as more flexible and easier to use replacements for cases where you currently use isFeatureEnabled, getFeatureVariable, getAllFeatures or Track calls within your implementation.

Refer to an earlier version of the SDK reference guides for earlier methods.

The following are some examples of how to migrate older methods to newer methods.

// -------------------------------
// Optimizely Feature
// -------------------------------
// old method using Feature component
function MyFeature() {
  return (
    <OptimizelyFeature feature="flag1">
      {(isEnabled, variables) => <div>{isEnabled} - {variables}</div>}
    </OptimizelyFeature>
  );
}

// old method using Feature hook
function MyFeature() {
  const [isEnabled, variables] = useFeature('flag1');
  return <div>{isEnabled} - {variables}</div>;
}

// new method
function MyFeature() {
  const [decision] = useDecision('flag1');
  return <div>{decision.enabled} - {decision.variables}</div>;
}

// -------------------------------
// Optimizely Experiment
// -------------------------------
// old method using Experiment component
function MyExperiment() {
  return (
    <OptimizelyExperiment experiment='experiment1'>
      <OptimizelyVariation variation='firstvariation'>
        <div>First Variation</div>
      </OptimizelyVariation>
      <OptimizelyVariation variation='secondvariation'>
        <div>Second Variation</div>
      </OptimizelyVariation>
    </OptimizelyExperiment>
  );
}

// old method using Experiment hook
function MyExperiment() {
  const [variation] = useExperiment('experiment1');
  return (
    <>
      {variation === 'firstvariation' && <div>First Variation</div>}
      {variation === 'secondvariation' && <div>Second Variation</div>}
    </>
  );
}

// new method
function MyExperiment() {
  //decide hook uses flag key. New Api does not support flag-less experiments
  const [decision] = useDecision('flagfor_experiment1');
  return (
    <>
      {decision.variationKey === 'firstvariation' && <div>First Variation</div>}
      {decision.variationKey === 'secondvariation' && <div>Second Variation</div>}
    </>
  );
}

// -------------------------------
// Track 
// ------------------------------
// unlike other SDKs, no change from old method (optimizely_client.track)

Activate method and A/B Tests

Like the existing Is Feature Enabled method, the Decide methods are based on feature flag keys and do not support standalone A/B tests or Multi-armed Bandits. We are working to unify the data models and interfaces for our application longer term to mitigate the need to maintain multiple different access methods. In the meantime, you can still use the Activate and Get Variation methods for standalone A/B tests in your legacy projects alongside the Decide methods.