UI not rendering when calling Statsig.updateUser

I am using the Statsig React sdk to check a gate an show some UI if the gate returns true. When I initialize with a user id that passes the gate, everything works as I would expect and the UI is rendered.

The issue I am having is that I cannot get the UI to change when I call Statsig.updateUser. Is this a bug or am I doing something wrong?

I have a test gate setup to pass for a specific user id ("user-that-passes").

Here is the most basic setup I can get to reproduce this issue.

function Test() {
  return (
    <>
      <button
        onClick={() => Statsig.updateUser({ userID: "user-that-passes" })}
      >
        Update
      </button>
      <p>{Statsig.checkGate("test_gate") ? "Pass" : "Fail"}</p>
    </>
  );
}

function App() {
  return (
    <StatsigProvider
      sdkKey="intentionally blank"
      user={{ userID: "user-that-fails" }}
      waitForInitialization={true}
    >
      <Test />
    </StatsigProvider>
  );
}

If I click the button that calls Statsig.updateUser, nothing happens and the gate still fails.

Is anyone able to help me here?

Thank you

Sorry to hear you are having issues.

We automatically call updateUser when the user object changes. The intent is that you hold onto a user object using useState(..) and that just update that state when you want to trigger an update.

This is outlined in the docs here https://docs.statsig.com/client/reactSDK#updating-the-statsiguser

We are also working on a hook to update the user to help clear up the confusion around this, and it should be in the next release. I'll follow up when it has been released.

Let me know if this does not solve your problem and I can help dig further.