Hi! I'm setting up a PoC for client-side React and...
# ask-questions
Hi! I'm setting up a PoC for client-side React and running into a strange issue. My feature values are serving correctly for one render cycle after setup but then falling back to the default again. I've been troubleshooting it this afternoon and found that
is being set back to false. The configuration looks simple enough, so I'm not sure where I'm going wrong here. Any advice would be appreciated
Inside `src/pages/_app.tsx`:
Copy code
const gb = new GrowthBook({
    apiHost: "<https://cdn.growthbook.io>",
    clientKey: "<our_key>",
    enableDevMode: query["debug_experiments"] === "true",
    trackingCallback: (experiment, result) => {
      // TODO: Use your real analytics tracking system
      console.log("Viewed Experiment", {
        experimentId: experiment.key,
        value: result.value,
and then
Copy code
useEffect(() => {
    // Load features from the GrowthBook API
      .then(() => {
        // Redacted loggedOutId logic
        console.log("Setting GB attributes");
          id: loggedOutId,
          path: asPath.split("?")[0],
      .catch(err => {
        console.log("ERROR LOADING FEATURES", err);
  }, []);
are you using nextjs?
you’re probably hitting some server side/client side rendering issues
we just released some examples on how to handle this
That seems believable. The page is static ISR/ODB so we were trying to set this up with Growthbook fetching the feature config client-side (to avoid needing to rebuild). I see the example for static has it on the server side, while the
there looks like what we want. But the only difference that I see compared to what I tried is the use of
, so I'm not sure why that configuration isn't working for us
There's nowhere in the SDK code that sets the
flag back to false. My guess is that it's creating a 2nd instance of GrowthBook and that one isn't calling
👀 1
Yep good call, that seems to be the issue. I'm not sure why our
is getting re-rendered immediately but that's overwriting the
instance that had its attributes & features set inside a
. I should be able to figure that out on my end - thanks for the advice!
Since you are using ISR anyway on that page, you could also do a hybrid approach where you get features at build-time, and then the client takes over and renders in the latest feature values if they've changed since then. It can help avoid some flickering since without that, all features start as "OFF" in the initial HTML. There's an example in that repo of this approach - https://github.com/growthbook/examples/blob/main/next-js/pages/static-hybrid.tsx
Yeah I was looking at that, could be promising for our use case. For now I just want to get the minimal proof of concept up to help make the case for GrowthBook, but I'll definitely look into it more if we've got the green light. Thanks!
For posterity in case this happens to anyone else - we didn't realize that
is actually intended to render twice in many cases. I must've been going through the setup without paying full attention, as actually following the steps correctly and initializing the GrowthBook instance outside of the
component works perfectly fine. The problem only happens when running
_const_ gb = _new_ GrowthBook({
inside of
. Sorry about that and thanks for getting me an answer so quickly!
🙌 1