react-sdk OptimizelyProvider issue

[anayak-alphasense]

Hey Team,

I am using Optimizely/react-sdk version 2.8.1 for my AB testing purpose, It looks like the OptimizelyProvider that I am getting out of it is a class component due to which I am not able to use other hooks when I wrap my application inside OptimizelyProvider, can someone please assist to get a functional component version of the same.

[anayak-alphasense]

can some pls help me here ? How can I get the functional version of OptimizelyProvider ?

[milindagrawal]

@anayak-alphasense Use OptimizelyContext for functional component.

const { optimizely } = useContext(OptimizelyContext)

[anayak-alphasense]

Hi Milind, Thanks for your response.

I don't see any usage of OptimizelyContext, how can I use it ? do I need to use it in-place of OptimizelyProvider or while creating the optimizely instance like

const optimizely = createInstance({ sdkKey: 'key', datafileOptions: { autoUpdate: true, updateInterval: 1000 }, });

[milindagrawal]

Sorry, I misread your previous message. I thought you are asking how we can use OptimizelySdkClient inside a functional component. Apologies for that!

About using OptimizelyProvider, I don't see an issue in using it for functional component. All you need is just wrap your parent component within Provider, no matter if the child component is functional/class.

const optimizelyClient = createInstance({
  sdkKey: <key>,
})

const init = () => {
    return (
      <OptimizelyProvider optimizely={optimizelyClient} user={{ id: userId }}>
        <App />
      </OptimizelyProvider>
    );
}

const App = () => {
    const { optimizely } = useContext(OptimizelyContext)

    optimizely?.track('Hello')

    return <div>hi</div>
}

[anayak-alphasense]

Hi Milind,

Yes, I am doing the same but my all the test cases of child components are getting failed because after wrapping them OptimizelyProvider they are not searchable and failing with below error.

[milindagrawal]

My best guess would be that, we are doing some mistake while mocking "OptimizelyProvider". If that's not the case then I am sorry as I won't be able to help further.

[opti-jnguyen]

Hi @anayak-alphasense - thanks for raising up this issue!

Although you cannot use hooks directly within a class component, you can have the class component render a functional component which uses hooks. Perhaps if you apply that to your use case it will resolve your issue?

Screenshot of workaround example:

If you need additional support, would be happy to help further if you are able to post a pseudo-code gist of your implementation.

[Tamara-Barum]

Closing ticket as answer was provided