Overview

This guide assists developers in transitioning from Flagship 3.X to Flagship 4.X.

The primary changes include:

• FlagshipProvider props

• useFlagship hook

• useFsFlag hook

• Flagship SDK Status

For more details, see the change log

FlagshipProvider props

Below are the options that have been changed from version 3.X to 4.X:

• In version 4.X, when initializing a visitor, the hasConsented option within the visitorData props is now required. In contrast, this option was optional in version 3.X.

• The isNewInstance props has been replaced with shouldSaveInstance.

• The enableClientCacheprops has been replaced with reuseVisitorIds

• The statusChangedCallback has been replaced with onSdkStatusChanged.

• The onSdkStatusChanged is triggered with the current status of the SDK, leading to the removal of the onInitStart and onInitDone callbacks.

import React from "react";
import { FlagshipProvider } from "@flagship.io/react-sdk";

const App = () => (
  <>
    <FlagshipProvider
      envId="YOUR_ENV_ID"
      apiKey="YOUR_API_KEY"
      visitorData={{
        hasConsented: true, // This is now mandatory
      }}
    >
      {/* ... */}
    </FlagshipProvider>
  </>
);

import React from "react";
import { FlagshipProvider } from "@flagship.io/react-sdk";

const App = () => (
  <>
    <FlagshipProvider
      envId="YOUR_ENV_ID"
      apiKey="YOUR_API_KEY"
      visitorData={{}} // 'hasConsented' was optional
    >
      {/* ... */}
    </FlagshipProvider>
  </>
);

useFlagship hook

sendHits method

In version 4.X, the useFlagship hook's methods hit.send and hit.sendMultiple have been superseded by the method sendHits .

import React from "react";
import { useFlagship, HitType } from "@flagship.io/react-sdk";

export const MyReactComponent = () => {
  const fs = useFlagship()
  
  return (
    <button
      onClick={()=>{
        fs.sendHits({
          type: HitType.PAGE,
          documentLocation: "https://localhost",
        })
      }}>
      Send a hit
    </button>
  );
};

import React from "react";
import { useFlagship, HitType } from "@flagship.io/react-sdk";

export const MyReactComponent = () => {
  const fs = useFlagship()
  
  return (
    <button
      onClick={()=>{
        fs.hit.send({
          type: HitType.PAGE,
          documentLocation: "https://localhost",
        })
      }}>
      Send a hit
    </button>
  );
};

GetFlag method update

In version 4.X, the approach to setting a flag's default value has been modified. The default value is no longer set using the getFlag method of useFlagship instance. Instead, it is now set using the getValue of flag instance.

Here's how you can set the default value of a flag in versions 4.X and 3.X:

...
const fs = useFlagship()
const flag = fs.getFlag("myFlagKey");
const flagValue = flag.getValue("default-value");

...
const fs = useFlagship()
const flag = fs.getFlag("myFlagKey", "default-value");
const flagValue = flag.getValue();

useFsFlag hook

The default value is no longer set using the the second parameter of useFsFlag. Instead, it is now set using the getValue of flag instance.

Here's how you can set the default value of a flag in versions 4.X and 3.X:

...
const flag = useFsFlag("myFlagKey");
const flagValue = flag.getValue("default-value");

...
const flag = useFsFlag("myFlagKey", "default-value");
const flagValue = flag.getValue();

Flagship SDK Status

In version 4.X, the statusChangedCallback has been replaced with onSdkStatusChanged and the enum FlagshipStatus has been superseded by FSSdkStatus.

The table below matches the FlagshipStatus enum keys from version 3.X to the corresponding FSSdkStatus keys in version 4.X.

V4.X	V3.X
SDK_NOT_INITIALIZED	NOT_READY
SDK_NOT_INITIALIZED	NOT_INITIALIZED
SDK_INITIALIZING	STARTING
SDK_INITIALIZING	POLLING
SDK_PANIC	READY_PANIC_ON
SDK_INITIALIZED	READY