# Migration from 3.X to 4.X and higher

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

The primary changes include:

* FlagshipProvider props
* useFlagship hook
* useFsFlag hook
* Flagship SDK Status

For more details, see the [change log](https://github.com/flagship-io/flagship-react-sdk/releases)

## FlagshipProvider props

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

* In version 4.X and higher, when initializing a visitor, the [hasConsented](/server-side/sdks/react/react-js-reference.md#visitordata) option within the [visitorData](/server-side/sdks/react/react-js-reference.md#visitordata) props is now required. In contrast, this option was optional in version 3.X.
* The `isNewInstance` props has been replaced with shouldSaveInstance.
* The `enableClientCache`props has been replaced with reuseVisitorIds
* The `statusChangedCallback` has been replaced with [`onSdkStatusChanged`](/server-side/sdks/react/react-js-reference.md#onsdkstatuschanged).
* The [`onSdkStatusChanged`](/server-side/sdks/react/react-js-reference.md#onsdkstatuschanged) is triggered with the current [status](/server-side/sdks/react/react-js-reference.md#fssdkstatus) of the SDK, leading to the removal of the `onInitStart` and `onInitDone` callbacks.

{% tabs %}
{% tab title=" v4.X and higher" %}

```jsx
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>
  </>
);
```

{% endtab %}

{% tab title="v3.X" %}

```jsx
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>
  </>
);
```

{% endtab %}
{% endtabs %}

## useFlagship hook

### sendHits method

In version 4.X and higher, the [useFlagship](/server-side/sdks/react/react-js-reference.md#useflagship-hook) hook's methods `hit.send` and `hit.sendMultiple` have been superseded by the method [sendHits](/server-side/sdks/react/react-js-reference.md#sendhits-method) .

{% tabs %}
{% tab title="v4.X and higher" %}

```jsx
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>
  );
};
```

{% endtab %}

{% tab title="v3.X" %}

```jsx
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>
  );
};
```

{% endtab %}
{% endtabs %}

### `GetFlag` method update

In version 4.X and higher, the approach to setting a flag's default value has been modified. The default value is no longer set using the [getFlag](/server-side/sdks/react/react-js-reference.md#getflag-method) method of `useFlagship` instance. Instead, it is now set using the [getValue](/server-side/sdks/react/react-js-reference.md#getvalue-method) of [flag](/server-side/sdks/react/react-js-reference.md#getflag-method) instance.

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

{% tabs %}
{% tab title="v4.X and Higher" %}

```typescript

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

{% endtab %}

{% tab title="v3.X" %}

```typescript

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

{% endtab %}
{% endtabs %}

## useFsFlag hook

The default value is no longer set using the the second parameter of [useFsFlag](#usefsflag-hook). Instead, it is now set using the [getValue](/server-side/sdks/react/react-js-reference.md#getvalue-method) of [flag](/server-side/sdks/react/react-js-reference.md#ifsflag-interface) instance.

Here's how you can set the default value of a flag in each versions

{% tabs %}
{% tab title="v4.X and higher" %}

```typescript

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

{% endtab %}

{% tab title="v3.X" %}

```typescript

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

{% endtab %}
{% endtabs %}

## Renamed Types and APIs

### Flag Status

In the version **5.x** and higher, the `FetchFlagsStatus` type has been renamed to `FlagsStatus` for clarity.

### Flagship SDK Status

In version 4.X and higher, the `statusChangedCallback` has been replaced with [`onSdkStatusChanged`](/server-side/sdks/react/react-js-reference.md#onsdkstatuschanged) and the enum `FlagshipStatus` has been superseded by [`FSSdkStatus`](/server-side/sdks/react/react-js-reference.md#fssdkstatus).

The table below matches the `FlagshipStatus` enum keys from version 3.X to the corresponding [`FSSdkStatus`](/server-side/sdks/react/react-js-reference.md#fssdkstatus) keys in version 4.X.

| V4.X and higher       | 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            |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/server-side/sdks/react/react-js-migration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.