featureclass.js

const myFeature = createFeatureInstance('my-feature', {
  getComponent(isEnabled, variables) {
    return isEnabled
      ? ExtendedComponent
      : StandardComponent
  },

  fetchData(isEnabled, variables) {
    return isEnabled
      ? getExtendedData()
      : getStandardData()
  },
})

// in routing
myFeature.fetchData()

// in component
render() {
  const MyFeatureComponent = myFeature.getComponent()

  return (
    <MyFeatureComponent {...propsToPass} />
  )
}


@OptimizelyFeature('my-feature', 'myFeature')
class MyFeatureWrapper extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoading: false,
      data: null,
    }
  }

  componentDidMount() {
    const { isEnabled }  = this.props.myFeature

    const dataPromise = isEnabled.
      ? fetchSimple()
      ? fetchDetailed()

    dataPromise.then(data => {
      this.setState({
        isLoading: false,
        data,
      })
    })
  }

  render () {
    const { isLoading, data } = this.state
    const { isEnabled } = this.props.myFeature
    if (isLoading) {
      return <p>loading...</p>
    }

    return isEnabled
      ? <SimpleComponent data={data} />
      : <DetailedComponent data={data} />
  }
}