Migrating From statsig-react

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.

statsig-react (Legacy)

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

New

...

Bootstrapping the SynchronousProvider

If you are using a server SDK to bootstrap your eact app, you will need to make some updates to how your server SDK generates values. One of the optimizations we made with this new js-client SDK was to remove the sha256 library for hashing gate/experiment names. Instead, we use a djb2 hash. 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 a nodejs app, you will need to do:

statsig.getClientInitializeResponse(
  user,
  '[client-key]',
  {
    hash: 'djb2',
  },
);

Updating the User

statsig-react (Legacy)

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

New

...