Hello everyone. I got stuck somewhere with loading...
# announcements
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.
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
yeah, I just test it and that's the issue.
so the solution here would be wrapping the inner component with FeaturesReady ?
you can also use a useEffect hook for the useFeature which will update once the features load
the growthbook instance also has a boolean property
you can check.
<FeaturesReady />
is essentially checking that but also has timeout functionality. note that
will be truthy if either experiments or features are provided to the SDK context and does not require both.
Thank you both for the help 🙏