> ## Documentation Index
> Fetch the complete documentation index at: https://statsig-4b2ff144-kill-dead-node-pages.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Migrating to @statsig/react-bindings

> Learn how to migrate from the legacy statsig-react package to the new @statsig/react-bindings

<Warning>
  ### DEPRECATED

  Migrate soon! Official support for statsig-react ended Jan 31, 2025.
</Warning>

<Note>
  Also refer to our [migration from js-client guide](/client/javascript-sdk/migrating-from-statsig-js), which lists other impacts on statsig-react installations.
</Note>

Breaking Changes:

* Our [initialization pattern](/client/javascript-sdk/migrating-from-statsig-react#initialize) has changed, along with [waitForInitialization and initializeComponent](/client/javascript-sdk/migrating-from-statsig-react#waitforinitialization-and-initializingcomponent)
* Bootstrapping has changed, now requiring a new hashing parameter: [Bootstrapping the StatsigClient](/client/javascript-sdk/migrating-from-statsig-react#bootstrapping-the-statsigclient)

### Initialize

In the old `statsig-react` package, all values needed to be given to the StatsigProvider, which internally would setup the Statsig client instance. This approach lead to issues in managing state between the Statsig client and the StatsigProvider, making it fragile and likely to break if you ever tried using the Statsig client directly.

The new approach is to run everything through the Statsig client instance, and just pass that to the StatsigProvider.

<CodeGroup>
  ```jsx statsig-react (Legacy) theme={null}
  import { StatsigProvider } from "statsig-react";

  function App() {
    return (
      <StatsigProvider
        sdkKey="<STATSIG_CLIENT_SDK_KEY>"
        user={{ userID: "a-user" }}
        waitForInitialization={true}
        // StatsigOptions (Not Required)
        options={{
          environment: { tier: "staging" },
        }}
      >
        <div className="App">{/* Rest of App ... */}</div>
      </StatsigProvider>
    );
  }
  ```

  ```tsx New theme={null}
  import { StatsigProvider } from '@statsig/react-bindings';
  import { StatsigClient } from '@statsig/js-client';

  // Create the client
  const client = new StatsigClient(
    '<STATSIG_CLIENT_SDK_KEY>',
    { userID: 'a-user' },
    {
      environment: { tier: 'staging' },
    }
  );

  function App() {
    return (
      <StatsigProvider client={client} loadingComponent={<div>Loading...</div>}>
        <div className="App">{/* Rest of App ... */}</div>
      </StatsigProvider>
    );
  }
  ```
</CodeGroup>

<Tip>
  View the full example on [GitHub](https://github.com/statsig-io/js-client-monorepo/blob/main/samples/react/src/samples/react-precomp/sample-react-precomp-initialize.tsx)
</Tip>

### waitForInitialization and initializingComponent

In the older versions of the `StatsigProvider`, it was possible to set the `waitForInitialization` to block children from rendering until after the latest
values were fetched from Statsig and if a `initializeComponent` was set, this was displayed while the latest values were fetched.

It was also possible to set `waitForInitialization` to `false`, meaning the StatsigProvider would render immediately, before values were ready. This was not recommended as it meant values could change between checks, resulting in unexpected layout changes.

**Where did waitForInitialization go?**

In the newer `StatsigProvider` this is no longer an option as we want to prevent developers from unintentionally allowing values to change mid-session.
It is still possible to get the same behavior as setting `waitForInitialization` to false, but we recommend against it.

Read the [Initialization Strategies](/client/javascript-sdk/init-strategies) guide to learn how to replicate the `waitForInitialization=false` behavior, as well as the recommended approaches to synchronous initialization.

### Bootstrapping the StatsigClient

If you are using a Statsig Server SDK to bootstrap the Statsig Client used by your React app, you may need to make some updates to how your server SDK generates values.
One of the optimizations we made with the `@statsig/js-client` SDK was to remove the `sha256` library for hashing gate/experiment names.
Instead, we use a `djb2` hash. This does not change any of the bucketing logic, only the obfuscation method used for the payload.

By default, all server SDKs generate `sha256` hashes of gate/experiment names in the `getClientInitializeResponse` method.
You will need to set the hash algorithm parameter to that method call to `"djb2"` instead in order to bootstrap this new client SDK.
One of the benefits to this hashing algorithm is it will make the entire payload smaller as well, so its a net win on package size, speed, and payload size for the SDK.

For example, if you are bootstrapping from the Statsig Node SDK, you will need to do:

```js theme={null}
statsig.getClientInitializeResponse(
  user,
  '[client-key]',
  {
    hash: 'djb2', // <- New Hashing Algorithm
  },
);
```

### Updating the User

<CodeGroup>
  ```jsx statsig-react (Legacy) theme={null}
  import { useContext, useState } from "react";
  import { StatsigUser, StatsigProvider, StatsigContext } from "statsig-react";

  function UpdateUserButton() {
    const { updateUser } = useContext(StatsigContext);

    return <button onClick={() => updateUser({ userID: "b-user" })}>Update</button>
  }

  function App() {
    const [user, setUser] = useState<StatsigUser>({ userID: "a-user" });

    return (
      <StatsigProvider
        sdkKey="<STATSIG_CLIENT_SDK_KEY>"
        user={user}
        setUser={setUser}
      >
        <UpdateUserButton />
      </StatsigProvider>
    );
  }
  ```

  ```tsx New theme={null}
  import { StatsigProvider, useClientAsyncInit } from '@statsig/react-bindings';
  import { StatsigClient } from '@statsig/js-client';

  const client = new StatsigClient('<STATSIG_CLIENT_SDK_KEY>', { userID: 'a-user' });

  function UpdateUserButton() {
    const { client } = useClientAsyncInit(client);

    const handleUpdate = async () => {
      await client.updateUserAsync({ userID: 'b-user' });
    };

    return <button onClick={handleUpdate}>Update</button>;
  }

  function App() {
    return (
      <StatsigProvider client={client}>
        <UpdateUserButton />
      </StatsigProvider>
    );
  }
  ```
</CodeGroup>

<Tip>
  View the full example on [GitHub](https://github.com/statsig-io/js-client-monorepo/blob/main/samples/react/src/samples/react-precomp/sample-react-precomp-update-user.tsx)
</Tip>