State of child-components is not updated if OptimizelyProvider's props are changed.

[VasylBoyko]

There is no possibility to update datafile or userId of OptimizelyProvider.
Use cases: if user is logged in, datafile is changed.

const optimizelyRevision = 0;
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            optimizely: null
        };
    }

    componentDidMount() {
        this.getOptimizelyData();
        //Check for updates each 5 min
        setInterval(this.getOptimizelyData, 5 * 60 * 1000);
    }

    getOptimizelyData = () => {
        fetch(optimizelyDatafileUrl).then(resp => resp.json()).then((optimizelyDatafile) => {
            const revision = parseInt(optimizelyDatafile.revision, 10);
            if (!Number.isNaN(revision) && revision > optimizelyRevision) {

                // Newer Datafile available!

                optimizelyRevision = revision;
                const optimizely = optimizelySDK.createInstance({
                    datafile: optimizelyDatafile,
                });

                this.setState({
                    optimizely
                });
            }
        });
    }

    onLogin = (userId) {
        this.setState({
            userId
        });
    }

    render () {
        const { optimizely, userId } = this.state;

        return optimizely && <OptimizelyProvider optimizely={optimizely} userId={userId}>
            <OptimizelyFeature feature="FEATURE_FLAG">
                {featureEnabled => (featureEnabled
                    ? <div>Enabled</div>
                    : <div>Disabled</div>
                )}
            </OptimizelyFeature>
        </OptimizelyProvider>
    }
}

According to https://docs.developers.optimizely.com/rollouts/docs/instantiate-a-client

 Any time you retrieve an updated datafile, just re-instantiate the same client.

I've re-instantiated client but value of featureEnabled is not changed.

imho, OptimizelyFeature (and other...) component should have something like that:

static getDerivedStateFromProps(nextProps, prevState) {
        const { feature, optimizely } = nextProps;
        let newState = null;

        if (prevState.optimizely !== optimizely) {
            const isEnabled = optimizely.isFeatureEnabled(feature);
            const variables = optimizely.getFeatureVariables(feature);
            newState = {
                canRender: true,
                isEnabled,
                variables,
                optimizely
            };
        }
        return newState;
    }

[asaschachar]

Hi @VasylBoyko. Thanks for bringing this up. In initially designing the React SDK, we thought that people would only need a new datafile or set a userId upon every browser reload, so we didn't actually expect people to implement their own fetching of the datafile like you have done with getOptimizelyData since the React SDK Provider fetches the datafile once when loading. We also didn't expect the desire to re-instantiate the SDK for this reason.

We're actively working on a change so that the SDK can be configured to poll on a set interval as you have set in your sample for 5 min. But it's good feedback that there is not a way to update the userId on the provider either.

We'll leave this ticket open and we'll take your feedback as we start to make some design changes to the React SDK. Thanks again for bringing this up.

cc: @jordangarcia @mjc1283

[jordangarcia]

Hi @VasylBoyko. Thanks for the feedback. We are currently in the process of updating the ReactSDK to support this behavior out of the box.

Things planned in 0.3.0

• Allow polling for datafile updates out of the box
• Ability to change the user object via optimizely.setUser({ id, attributes })
• The ReactSDK can be configured to block rendering until both the dataflie and userId is resolved
• Calling setUser after rendering with a new user will re-evaluate feature flags and re-render

Would these planned changes, fulfill all your needs?

[VasylBoyko]

Sounds good, guys!
When we can expect to see new version? Can you propose some temporary workaround? (Currently I almost implemented some kind of simplified withOptimizely HoC and OptimizelyFeature, but I prefer to use original ones ;) ... should I complete them or is better to wait for a few days?)

Btw, you've done great work! Code quality of your SDK is really awesome.

Also I have some thoughts about sdk, some improvements:

• Currently we have an ability to pass sdkKey or dataFile. I think we should use sdkKey only, but to resolve issue for SSR, we should be able to overwrite fetchDatafile of /js-web-sdk/src/DatafileLoaders.ts by any custom function which accept url and returns Promise. In practice it can be axios.get, fecth from node-fetch, etc...

const optimizely = optimizelySDK.createInstance({
  sdkKey: 'GaXr9RoDhRcqXJm3ruskRa',
  datafileLoader: isServerSide 
         ? (url) => Promise( (resolve, reject) {... resolve(dataFile) ...}) } 
         : null
});

• having optimizely.setUser is good for js SDK, but for React SDK using of 'raw' optimizely should be hidden somewhere inside of reactSDk, f.e.in OptimizelyProvider...
  Only OptimizelyProvider should import '@optimizely/js-web-sdk' and (if optimizely is not provided in props) constructor should create optimizely instance :

export class OptimizelyProvider extends React.Component {
constructor(props: OptimizelyProviderProps) {
    super(props);

    const { optimizely, userId, userAttributes, sdkKey, dataLoader } = props;
    this.sdkWrapper = createUserWrapper({
      instance: optimizely || optimizelySDK.createInstance({ sdkKey, dataLoader }),
      userId,
      userAttributes,
    });
  }
...
}

So user's code become much cleaner:

import {
  OptimizelyProvider,
  OptimizelyExperiment,
  OptimizelyVariation,
  OptimizelyFeature,
} from '@optimizely/react-sdk'

class App extends React.Component {
  render() {
    <OptimizelyProvider
      sdk={key}
      datafileLoader={utils.fetch}
      timeout={500}
      pollInterval={5*60*1000}
      userId={window.userId}
      userAttributes={{ plan_type: 'bronze' }}
    >

vs

import {
  OptimizelyProvider,
  OptimizelyExperiment,
  OptimizelyVariation,
  OptimizelyFeature,
} from '@optimizely/react-sdk'
import * as optimizelySDK from '@optimizely/js-web-sdk'

const optimizely = optimizelySDK.createInstance({
  sdkKey: 'your-optimizely-sdk-key',
})

class App extends React.Component {
  render() {
    <OptimizelyProvider
      optimizely={optimizely}
      timeout={500}
      userId={window.userId}
      userAttributes={{ plan_type: 'bronze' }}
    >

• Props changes should be processed by getDerivedStateFromProps (especially changes optimizely and userId).

Hope these ideas will be useful for you.
Thanks. Best regards.

[VasylBoyko]

Hey @jordangarcia , @asaschachar
Any news on this issue?

[asaschachar]

Hi @VasylBoyko. We just pushed out the changes underneath a beta tag https://github.com/optimizely/fullstack-labs/blob/master/packages/react-sdk/CHANGELOG.md#030-beta1

In the next couple of weeks, we should be removing the beta label and updating the documentation to reflect the changes.

Hope this helps.

[VasylBoyko]

@asaschachar
Great,

but I can't found here:

export { OptimizelyProvider } from './Provider'
export { OptimizelyFeature } from './Feature'
export { withOptimizely, WithOptimizelyProps } from './withOptimizely'
export { OptimizelyExperiment } from './Experiment'
export { OptimizelyVariation } from './Variation'

export {
  logging,
  errorHandler,
  setLogger,
  setLogLevel,
  enums,
  eventDispatcher,
} from '@optimizely/optimizely-sdk'

export { createInstance, ReactSDKClient } from './client'

announced

• Allow polling for datafile updates out of the box
• Ability to change the user object via optimizely.setUser({ id, attributes })
• The ReactSDK can be configured to block rendering until both the dataflie and userId is resolved
• Calling setUser after rendering with a new user will re-evaluate feature flags and re-render

Is it not pushed to git yet?

[asaschachar]

Hi @VasylBoyko,

We'll have to make a few updates to the documentation once this beta is released. The datafile polling updates can be configured with the following datafileOptions property passed to the createInstance method:

const optimizely = createInstance({
  sdkKey: 'CioLPpsSREvaDTzRDVAUpQ',
  datafileOptions: {
    autoUpdate: true,    // Indicates to poll for updates in the datafile
    updateInterval: 1000,  // polling interval in milliseconds
  },
  logLevel: 'debug',
})

Once you create the optimizely instance, you'll have access to a method called setUser:

const optimizely = createInstance({
  sdkKey: 'CioLPpsSREvaDTzRDVAUpQ',
})

optimizely.setUser({
  id: 'user123',
  attributes: {
    'customerId': 123,
    'isVip': true,
  }
})

Thanks for your suggestions on the datafileLoader and simpler initialization. We'll get back to you on whether we plan to implement those improvements in the future as well.