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:

// 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:

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?

yeah, I just test it and that's the issue.

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

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.

Thank you both for the help 🙏