Update from older versions of the React SDK

This section provides code examples for how Optimizely recommends leveraging the new Decision and Event Tracking APIs. All existing Full Stack (Legacy) methods and implementation are still supported. See Optimizely Feature Experimentation - application & migration documentation for the latest updates.

Optimizely recommends adopting the new Decide, Decide All, and Track Event methods as a more flexible and easier-to-use replacement where you currently use isFeatureEnabled, getFeatureVariable, getAllFeatures, or Track calls within your implementation.

The following are examples of how to migrate the Full Stack (Legacy) methods to Feature Experimentation 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)