---
title: OptimizelyProvider for the React SDK
slug: feature-experimentation/docs/optimizelyprovider-react-prior-to-v4
docTags: 
createdAt: 2026-08-05T20:39:51.000Z
---

Wrap your React application at the root with OptimizelyProvider to give your entire React application access to Optimizely Feature Experimentation's APIs.

## Version

SDK v1.0.0

## Description

The OptimizelyProvider leverages React’s Context API to allow access to the ReactSDKClient to useDecision hook.

## Props

The following table lists the required and optional props for the OptimizelyProvider Component in React.

| Parameter                      | Type                                                                                                                   | Description                                                                                                                                        |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **optimizely**                 | ReactSDKClient                                                                                                         | Optimizely instance created from calling \`createInstance\`                                                                                        |
| **user**                       | object: \`\{\ id: string;\ attributes?: \{ OptimizelyPro\\: string \| number \| boolean \| null\ }\ }\` \| Promise\`\` | The user id and user attributes to be passed to the SDK for every feature flag, A/B test, or track call, or a Promise for the same kind of object. |
| **timeout**\ \*optional\*      | number                                                                                                                 | The amount of time for \`useDecision\` hook to return \`null\` flag Decision while waiting for the SDK instance to become ready before resolving.  |
| **isServerSide**\ \*optional\* | boolean                                                                                                                | must pass true here for server-side rendering                                                                                                      |

## Examples

If the root component of your application was `<App>`, wrap your App with the OptimizelyProvider component. Pass the result of calling `createInstance` to the `optimizely` prop and set the `user` object with `id` and `attributes` identifying the user:

```javascript
import React from 'react';
import {
  createInstance,
  OptimizelyProvider,
} from '@optimizely/react-sdk'

const optimizely = createInstance({
  sdkKey: '<Your_SDK_Key>',
})

class AppWrapper extends React.Component {
  render() {
    return (
      <OptimizelyProvider
        optimizely={optimizely}
        user={
          {
            id: 'user123',
            attributes: {
              'device': 'iPhone',
              'lifetime': 24738388,
              'is_logged_in': true,
            }
          }
        }>
        <App />
      </OptimizelyProvider>
    )
  }
}
```

## Source files

The language/platform source files containing the implementation for React is [index.ts](https://github.com/optimizely/react-sdk/blob/master/src/index.ts).