> For the complete documentation index, see [llms.txt](https://docs.abtasty.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.abtasty.com/server-side/sdks/react/archived-versions/archived-react-v4/archived-react-v4-migration-to-4x.md).

# 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](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:

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

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

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

## useFlagship hook

### sendHits method

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

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

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

### `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](doc:react-js-reference#getflag-method) method of `useFlagship` instance. Instead, it is now set using the [getValue](doc:react-js-reference#getvalue-method) of [flag](doc:react-js-reference#ifsflag-interface) instance.

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

```typescript

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

```typescript

...
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](/server-side/sdks/react/archived-versions/archived-react-v4/archived-react-v4-migration-to-4x.md). Instead, it is now set using the [getValue](doc:react-js-reference#getvalue-method) of [flag](doc:react-js-reference#ifsflag-interface) instance.

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

```typescript

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

```typescript

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

## Flagship SDK Status

In version 4.X, the `statusChangedCallback` has been replaced with [`onSdkStatusChanged`](doc:react-js-reference#onsdkstatuschanged) and the enum `FlagshipStatus` has been superseded by [`FSSdkStatus`](doc:react-js-reference#fssdkstatus).

The table below matches the `FlagshipStatus` enum keys from version 3.X to the corresponding [`FSSdkStatus`](doc:react-js-reference#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            |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.abtasty.com/server-side/sdks/react/archived-versions/archived-react-v4/archived-react-v4-migration-to-4x.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.