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

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

## Minimum SDK version

v4.0.0+

For versions 3.x and earlier, see [React SDK prior to v4](docId\:qRvVn4ymy4t0bPqQGggsf).

## Description

The `OptimizelyProvider` leverages React's Context API to provide the Optimizely client and user context to hooks like `useDecide`, `useOptimizelyClient`, and `useOptimizelyUserContext`.

## Props

The following table lists the required and optional props for the `OptimizelyProvider` component:

| Prop                | Type                                                   | Required | Description                                                                                                                                                                                                                                                                                                               |
| ------------------- | ------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `client`            | `Client`                                               | Yes      | Instance created from `createInstance`.                                                                                                                                                                                                                                                                                   |
| `user`              | `{ id?: string; attributes?: UserAttributes } \| null` | No       | User info object — `id` and `attributes` will be used to create the user context for all decisions and event tracking. Pass `null`, `undefined`, or omit while user info is being fetched — hooks will return `{ isLoading: true }` until a resolved user is provided. For VUID-only mode (no user ID), pass `user={{}}`. |
| `timeout`           | `number`                                               | No       | Maximum time (in milliseconds) to wait for the SDK to become ready before hooks resolve with a loading state. Default: `30000`.                                                                                                                                                                                           |
| `qualifiedSegments` | `string[]`                                             | No       | Pre-fetched ODP audience segments for the user. Use `getQualifiedSegments` to obtain these segments server-side.                                                                                                                                                                                                          |
| `skipSegments`      | `boolean`                                              | No       | When `true`, skips background ODP segment fetching. Default: `false`.                                                                                                                                                                                                                                                     |

:::hint{type="info"}
**Note**
If user information is not yet available, you can render `<OptimizelyProvider>` without it — hooks will return `{ isLoading: true }` until a resolved user is provided. For VUID-only mode (no user ID), pass `user={{}}`. User `Promise` is not supported in v4.
:::

## Examples

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

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

const optimizely = createInstance({
  projectConfigManager: createPollingProjectConfigManager({
    sdkKey: '<Your_SDK_Key>',
  }),
  eventProcessor: createBatchEventProcessor(),
});

function AppWrapper() {
  return (
    <OptimizelyProvider
      client={optimizely}
      user={{
        id: 'user123',
        attributes: {
          device: 'iPhone',
          lifetime: 24738388,
          is_logged_in: true,
        },
      }}
    >
      <App />
    </OptimizelyProvider>
  );
}
```

### Async user loading

If user information must be fetched asynchronously, you can render the Provider immediately with `user={null}`. Hooks will return `{ isLoading: true }` until a resolved user is provided:

```javascript
import { useState, useEffect } from 'react';
import { OptimizelyProvider } from '@optimizely/react-sdk';
import { fetchUser } from './user';

function AppWrapper() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser().then(setUser);
  }, []);

  return (
    <OptimizelyProvider client={optimizely} user={user}>
      <App />
    </OptimizelyProvider>
  );
}
```

### VUID-only

For VUID-only mode (no user ID), pass an empty object as the `user` prop. The SDK uses an auto-generated visitor UID for decisions and event tracking:

```javascript
import {
  createInstance,
  createPollingProjectConfigManager,
  createBatchEventProcessor,
  createOdpManager,
  createVuidManager,
  OptimizelyProvider,
} from '@optimizely/react-sdk';

const optimizely = createInstance({
  projectConfigManager: createPollingProjectConfigManager({
    sdkKey: '<Your_SDK_Key>',
  }),
  eventProcessor: createBatchEventProcessor(),
  odpManager: createOdpManager(),
  vuidManager: createVuidManager({
    enableVuid: true,
  }),
});

function App() {
  return (
    <OptimizelyProvider client={optimizely} user={{}}>
      <MyComponent />
    </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).