Statsig - How to get true value from feature gate?

Question

I am trying to implement StatSig(Refer: https://docs.statsig.com/) feature into my react(Nextjs) application. I have created new feature gate changeComponentUI and Rule has been added as Environment Tier -> Any of - staging, development. From client side I am trying retrieve the data as const statsigFeatureOn = useGate('changecomponentui').value, here I am always getting false value even if it is ON.

In app.js I have initialized like,

<StatsigProvider
   sdkKey={"client-PsdasdASQW6556aIOPASASsqwewqeGSsad"}
   user={{ userId, }}
   options={{ environment: { tier: 'staging' } }}
   waitForInitialization={true}
 >
    <Component {...args} />
</StatsigProvider>

In browser's Network tab I am getting -

Request Payload as,

{"user":{"userID":"","statsigEnvironment":{"tier":"staging"}},"statsigMetadata":{"sessionID":"433h67a3-416c-4914-82fd-e3c2b12f7n05","sdkType":"react-client","sdkVersion":"0.5.1","stableID":"8d122318-6d18-2322-889a-83c10e44e46"}}

Output is (Preview),

{
"gates": {
    "+ZpxDXVQ/Rbhf02jl1Yv91VU+X+c0Gq/DZM+CmjPJgc=": false,
    "uwglh6w2Nas8RufxC82qrsVAohod9gsGpvaT6/1l7ts=": false,
    "sKSndsyjj+9MYUFlHPcdavbtA38g1+PjhofnyTDSxU8=": false,
    "w9AtEJ/+vqrqb1kh8KPvhN2Rd32mkwfR+gxvlesY4ac=": true,
    "gUZn3VlwEVdqBs7NcXGWHpBueNz0rlZGTufpLeB8Fug=": false
},
"feature_gates": {
    "+ZpxDXVQ/Rbhf02jl1Yv91VU+X+c0Gq/DZM+CmjPJgc=": {
        "name": "+ZpxDXVQ/Rbhf02jl1Yv91VU+X+c0Gq/DZM+CmjPJgc=",
        "value": false,
        "rule_id": "",
        "secondary_exposures": []
    },
    "uwglh6w2Nas8RufxC82qrsVAohod9gsGpvaT6/1l7ts=": {
        "name": "uwglh6w2Nas8RufxC82qrsVAohod9gsGpvaT6/1l7ts=",
        "value": false,
        "rule_id": "",
        "secondary_exposures": []
    },
    "sKSndsyjj+9MYUFlHPcdavbtA38g1+PjhofnyTDSxU8=": {
        "name": "sKSndsyjj+9MYUFlHPcdavbtA38g1+PjhofnyTDSxU8=",
        "value": false,
        "rule_id": "default",
        "secondary_exposures": []
    },
    "w9AtEJ/+vqrqb1kh8KPvhN2Rd32mkwfR+gxvlesY4ac=": {
        "name": "w9AtEJ/+vqrqb1kh8KPvhN2Rd32mkwfR+gxvlesY4ac=",
        "value": true,
        "rule_id": "6ZcQ0LOgAi2kSd5QgbtJzJ",
        "secondary_exposures": []
    },
    "gUZn3VlwEVdqBs7NcXGWHpBueNz0rlZGTufpLeB8Fug=": {
        "name": "gUZn3VlwEVdqBs7NcXGWHpBueNz0rlZGTufpLeB8Fug=",
        "value": false,
        "rule_id": "default",
        "secondary_exposures": []
    }
},
"configs": {},
"dynamic_configs": {},
"sdkParams": {},
"has_updates": true,
"time": 1631164754145
}

How can I get true value here? Also in output there is one object with true value but I am not getting it is for which feature gate's data.

Please help me to solve this issue.

According to this link, you will have always false during first render. (https://docs.statsig.com/client/reactSDK#usage). Check what is happening with your variable during the render. — illia chill, Sep 09 '21 at 08:25
I removed `waitForInitialization` and tried also made it as false and tried for both its returning false only. — Shruthi R, Sep 09 '21 at 09:02

Alex Coleman · Answer 1 · 2021-09-14T17:56:20.147

Make sure you are using the exact ID from the console. In this case, you might need to do const statsigFeatureOn = useGate('changecomponentui').value if the feature name is "ChangeComponentUI" but the id is "changecomponentui". I believe all ID's are currently lowercase, but maybe camel case is a good reason not to do that (or to be case-insensitive)

(Edit) The following code snippet works for me in next.js after creating a gate by the same steps:

import React from "react";
import { StatsigProvider, useGate } from "statsig-react";

export default function App(): JSX.Element {
  return (
      <StatsigProvider
        sdkKey={"client-(redacted)"}
        user={{ userID: "" }} // Fixed from userId, but since userID didn't matter both worked in this case
        options={{ environment: { tier: "staging" } }}
        waitForInitialization={true}
      >
        <TestComponent />
      </StatsigProvider>
  );
}

function TestComponent() {
  const statsigFeatureOn = useGate("changecomponentui").value;
  return <div>{String(statsigFeatureOn)}</div>;
}

Even I have tried with lowercase `gate_name: changecomponentui` but it is false only. — Shruthi R, Sep 13 '21 at 03:47
You can also double check that you're using the right feature name by hashing the name yourself and seeing if it matches any of the gates you found in the network tab (ex. `crypto.createHash('sha256').update('changecomponentui').digest('base64')` gives `'exlgY9MCkgnKzEmg+N8ouK2ODC4Z52W5lB9aE0tUK2Q='` which doesn't seem to match any. Is this definitely the gate name shown in the console? Or is there anything else noteworthy about your setup? — Alex Coleman, Sep 14 '21 at 17:54

Statsig - How to get true value from feature gate?

1 Answers1