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

By using the higher-order component (HoC) `withOptimizely`, any component under the OptimizelyProvider can access the Optimizely [ReactSDKClient](docId\:FBkIiB4shao_1U30W5cAu), which exposes Optimizely information and APIs.

## Version

SDK v1.0.0

## Description

The `withOptimizely` component provides access to all standard SDK methods, such as the Decide method, if you do not want to use React components or hooks (such as useDecision) to interact with Optimizely. By providing the wrapped component with an `optimizely` prop, the `withOptimizely` higher-order component also makes usage of the these standard SDK methods more convenient.

The `optimizely` object is automatically associated with the user prop passed to the ancestor OptimizelyProvider. The result is that the id and attributes from that user object will automatically be forwarded to all appropriate SDK method calls. So, there is no need to pass the userId or attributes arguments when calling methods of the `optimizely` client object after using `withOptimizely`, unless you want to use a different userId or attributes than those given to OptimizelyProvider.

## Parameters

This table lists the required and optional parameters for the React SDK.

| Parameter     | Type            | Description                                               |
| ------------- | --------------- | --------------------------------------------------------- |
| **Component** | React.Component | Component which will be enhanced with the following props |

## Props provided

| Prop                       | Type                | Description                                                  |
| -------------------------- | ------------------- | ------------------------------------------------------------ |
| **optimizely**             | ReactSDKClient      | The client object which was passed to the OptimizelyProvider |
| **optimizelyReadyTimeout** | number \| undefined | The timeout which was passed to the OptimizelyProvider       |
| **isServerSide**           | boolean             | Value that was passed to the OptimizelyProvider              |

## Returns

A wrapped component with additional props as previously described.

## Example

```javascript
import { withOptimizely } from '@optimizely/react-sdk'

class MyComp extends React.Component {
  constructor(props) {
    super(props)
    const { optimizely } = this.props
    const decision = optimizely.decide('feat1')

    this.state = {
      decision.enabled,
      decision.variables,
    }
  }

  render() {
  }
}

const WrappedMyComponent = withOptimizely(MyComp)
```

## Track events using withOptimizely

Other Optimizely functionality that may be triggered by using this method.

```javascript
import { withOptimizely } from '@optimizely/react-sdk'

class SignupButton extends React.Component {
  onClick = () => {
    const { optimizely } = this.props
    optimizely.onReady().then(() => {
      optimizely.track('signup-clicked')
    })
    // rest of click handler
  }

  render() {
    <button onClick={this.onClick}>
      Signup
    </button>
  }
}

const WrappedSignupButton = withOptimizely(SignupButton)
```

:::hint{type="warning"}
**Important**
As mentioned above, the `optimizely` client object provided through `withOptimizely` is automatically associated with the user prop passed to the ancestor `OptimizelyProvider`. There is no need to pass userId or attributes arguments when calling track, unless you want to use different userId or attributes than those given to `OptimizelyProvider`.
:::

## Source

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