Initialize the React SDK

Use the createInstance method to initialize the React SDK and instantiate an instance of the ReactSDKClient class. Each client corresponds to the datafile representing the state of a project for a certain environment.

Version

SDK v3.0.0 and higher

Description

The createInstance method accepts a configuration object to configure Optimizely Feature Experimentation.

Some parameters are optional because the React SDK provides a default implementation, but you may want to override these for your production environments. For example, you may want to override these to set up an error handler and logger to catch issues, an event dispatcher to manage network calls and a User Profile Service to ensure sticky bucketing.

Parameters

The table lists the required and optional parameters in React (created by passing in a Config object. The Config class consists of these fields).

Returns

Instantiates an instance of the Optimizely Feature Experimentation class.

Example

In the React SDK, you can provide either sdkKey or datafile or both.

• When initializing with just the datafile, the SDK will use the given datafile.
• When initializing with just the SDK key, the datafile will be automatically downloaded.
• When initializing with both the SDK key and datafile, the SDK will use the given datafile to start, then download the latest version of the datafile in the background.

Instantiate using datafile

First, get a copy of the datafile from our server by including the following script in the of your web application. This script adds the datafile on the global window variable window.optimizelyDatafile

<script src="https://cdn.optimizely.com/datafiles/<Your_SDK_Key>.json/tag.js"></script>

Once you have a datafile, you can instantiate an Optimizely client.

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

const optimizely = createInstance({
  datafile: window.optimizelyDatafile,
})

Instantiate using SDK key

To instantiate using the SDK key, obtain the SDK key from your project's settings page, then pass sdkKey as a string property in the options object you pass to the createInstance method.

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

const optimizely = createInstance({
  sdkKey: '<Your_SDK_Key>',
});

When you provide the sdkKey, the SDK instance downloads the datafile associated with that sdkKey. When the download completes, the SDK instance updates itself to use the downloaded datafile. This initialize method relies on continuous Internet connectivity (in contrast, in the React Native SDK, you can initialize with an SDK Key even while your app is offline.)

Render an OptimizelyProvider with a client and user

To use React SDK components inside your app, render an OptimizelyProvider as the parent of your root app component. Provide your Optimizely instance as the optimizely prop and a user object:

import { OptimizelyProvider, createInstance  } from '@optimizely/react-sdk';

const optimizely = createInstance({
  datafile: window.datafile,
});

// using a function component
export default function App() {
 return (
   <OptimizelyProvider
     optimizely={optimizely}
     user={{id: '<Your_User_Id>'}}>
     <App />
   </OptimizelyProvider>
 );
}

// or a class component
class App extends React.Component {
  render() {
    return (
      <OptimizelyProvider
      	optimizely={optimizely}
  			user={{id: '<Your_User_Id>'}}>
        <App />
      </OptimizelyProvider>
    );
  }
}

Notes

Customize datafile management behavior

To customize datafile management behavior, provide a datafileOptions object property inside the options object passed to createInstance. The table lists the supported customizable options.

The following example shows how to customize datafile management behavior.

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

const optimizely = createInstance({
  sdkKey: '<Your_SDK_Key>',
  datafileOptions: {
    autoUpdate: true,
    updateInterval: 600_000, // 10 minutes in milliseconds
    urlTemplate: 'http://localhost:5000/datafiles/%s.json',
  },
});

Considerations when using development mode

If you have created your React application using Create React App or are using a different type of development environment that uses hot reloading, there is a possibility to experience unusual behavior.

When running your application in development mode with hot reloading, for example, when using npm start, you may see that the Optimizely Feature Experimentation SDK is initialized more than once. This may cause inconsistent behavior, such as the page re-rendering multiple times or users being bucketed into incorrect variations.

This is not a problem with the Optimizely Feature Experimentation React SDK. Instead, this happens when you wrap your application in React.StrictMode, which purposely renders the application twice in development mode to detect potential issues. To avoid this, please disable the strict mode for the top-level component and move it to the lower-level components.

When building your app for production usenpm run build and hosting it on a web server, the Optimizely Feature Experimentation React SDK is not initialized more than once.

OdpManager

👍

Beta

Advanced Audience Targeting is in beta. Apply on the Optimizely beta signup page or contact your Customer Success Manager.

OdpManager contains all the logic supporting Advanced Audience Targeting-related features, including audience segments.

The React SDK enables the Advanced Audience Targeting methods by default. But, the methods do nothing unless you have enabled and configured the Advanced Audience Targeting integration.

If necessary, to disable Advanced Audience Targeting altogether, set disabled: true in the odpOptions. See the following sample code for more information.

OdpSegmentManager

This module provides an interface to the remote ODP server for audience segment mappings.

It fetches all qualified segments for the given user context and returns them as a string array in the completion handler.

It also manages a segment's cache shared for all user contexts. The cache is in memory (not persistent), and rebooting the device or terminating the app resets it.

OdpEventManager

This module provides an interface to the remote ODP server for events.

It queues all pending events (persistent) and sends them (in batches of up to 10) to the ODP server when all resources are available, including network connection and ODP public key (in the SDK's datafile).

📘

Notes

• The React SDK tries to dispatch all events (stored in a persistent queue and retried on recoverable errors) but does not guarantee completion.
• The React SDK does not have direct access to OdpManager, OdpSegmentManager, nor OdpEventManager. These are managed by the underlying Javascript SDK. There are configuration options that can be set during the Optimizely client instantiation.

// You must first enable the Advanced Audience Targeting integration

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

const optimizely = createInstance({
  sdkKey: '<Your_SDK_Key>',
  //...other Config options
  // The most common Advanced Audience Targeting control is to explicitly disable the feature 
  odpOptions: {
  	disabled: true,
  },
  // Other options are as defined by OdpOptions in the Javascript SDK
  // https://github.com/optimizely/javascript-sdk/blob/master/lib/shared_types.ts
});

Source files

The language and platform source files containing the implementation for React SDK are available on GitHub.