withOptimizely HOC and optimizely onReady state.

[oleksii-ivanov]

Hi, is it correct behaviour that when we use
withOptimizely HOC we always should check props.optimizely for ready state before use ?
I mean

const Menu = props => {
  useEffect(() => {
    // we use 
    props.optimizely.onReady().then(() => {
     console.log(props.optimizely.isFeatureEnabled('feature'));
    });
    
    // instead of using 
    console.log(props.optimizely.isFeatureEnabled('feature'));
  }, []);

  return </>;
};

export default withOptimizely(Menu);

I'm asking because in documentation there is an example without onReady check.
And If we do like in example we've got next error:
OPTIMIZELY: Optimizely object is not valid. Failing isFeatureEnabled.

Also my concern is that when we using OptimizelyFeature component we don't need to do additional checking but for withOptimizely we should. .

[oMatej]

It looks like the code used inside the OptimizelyFeature component also uses the onReady method (https://github.com/optimizely/react-sdk/blob/master/src/Feature.tsx#L89-L112), so most probably your assumption is correct and you should also use that.

[jamesopti]

@oleksii-ivanov Technically speaking, you're correct. It's best to ensure that the optimizely client instance is ready before calling any of the core API methods. However, since the consumer is responsible for passing in the SDK instance, it's possible that your own code ensure's it's ready before instantiating the top level <OptimizelyProvider optimizely={optimizely} >. Then you can assume that the client instance is ready (this is how our experiment and feature components work when isServerSide is true)

We've recently introduced hooks for the experiment and feature APIs that handle the ready checking for you though. These might be more ergonomic for your use case here:

import { useFeature } from '@optimizely/react-sdk';
...
const Menu = props => {
  const [feature1Enabled, variables] = useFeature('feature1');
  console.log(feature1Enabled);

  return <></>;
};

export default Menu;

[Danny-Driscoll]

Closing, see #125 for additional info on latest ways of handling initialization with or without a local datafile for immediate rendering.