Hello everyone. I got stuck somewhere with loading...
# announcements
c
Hello everyone. I got stuck somewhere with loading features. I'll explain my problem here, any help is very much appreciated. So we have self hosted version of Growthbook, also the loading feature is customised:
Copy code
// Load feature definitions from GrowthBook API
  fetch(`${BASE_URL[environment]}`) // no key is passed it's added in server 
    .then((res) => res.json())
    .then((json) => {
      growthbook.setFeatures(JSON.parse(json.features)); // the response is a json
    })

// ------- Response format 

features: {
  'continue-button-color': {
    defaultValue: 'A',
  },
},
my problem now is that this growthbook.setFeatures is not working and when I call useFeature I don't receive any feature:
Copy code
const value = useFeature('continue-button-color');

value => {value: null, on: false, off: true, source: 'unknownFeature', ruleId: ''}
My app is a client-side react app and I initiate it on useEffect. It was working correctly before when I directly get features from hosted GB, but it won't work with this one. Even when I pass some customised data, it doesn't load features.
f
Is it possible that you’re calling useFeature before the setFeatures finishes?
you can add a debug log after setting features to make sure that’s working
might be a race condition
c
yeah, I just test it and that's the issue.
so the solution here would be wrapping the inner component with FeaturesReady ?
f
you can also use a useEffect hook for the useFeature which will update once the features load
b
the growthbook instance also has a boolean property
ready
you can check.
<FeaturesReady />
is essentially checking that but also has timeout functionality. note that
ready
will be truthy if either experiments or features are provided to the SDK context and does not require both.
c
Thank you both for the help 🙏
132 Views