---
title: Example usage of the React SDK
slug: feature-experimentation/docs/example-usage-react-prior-to-v4
docTags: 
createdAt: 2026-08-05T20:39:55.000Z
---

## Prerequisites

Before using the client to evaluate flag rules, including A/B tests and flag deliveries, you must complete the following:

1. [Install the React SDK](docId\:OsNSGFOXKPpeDeiPTai5w).
2. [Initialize the React SDK](https://docs.developers.optimizely.com/feature-experimentation/docs/initialize-sdk-react).

## Example React SDK implementation

This example walks through the following three key steps:

1. Evaluate a flag with the key `product_sort` using the [Decision hook](docId\:lG9fwJNrH3MiLZniFQeAs). This also sends a [decision event](docId\:bvlIoqXYIOcaxtMeh1tJU) to Optimizely to record that the user was exposed to the experiment.
2. Run code based on the flag result. The SDK evaluates your flag rules and determines which variation the user is in. You can either:
   - Check the flag's enabled state and read a configuration variable (`sort_method`) to determine which experience the user gets.
   - Check the flag variation directly and run the corresponding control or treatment code.
3. Track a conversion event called `purchased` to measure the experiment's impact. The [Track method](docId\:FBkIiB4shao_1U30W5cAu) ties the purchase back to the A/B test and sends it to Optimizely through the [event dispatcher](docId:1fRi9je_4IwqzoRETVb3K) so it shows up on your [results page](docId:_K6n7h_MZ8b0xn6yWPrrq).

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

const optimizely = createInstance({
  sdkKey: 'YOUR_SDK_KEY', // TODO: Update to your SDK Key
})

function Button(props) {
  const handleClick = () => {
    const { optimizely } = props;    
    optimizely.track('purchased')
  };
  return <button onClick={handleClick}>Purchase</button>;
}

const PurchaseButton = withOptimizely(Button)

function ProductSort() {
  const [ decision ] = useDecision('product_sort');
  const variationKey = decision.variationKey;
  const isEnabled = decision.enabled;
  const sortMethod = decision.variables['sort_method'];
  return (
    <div>      
      { /* If variation is null, display error */ }
      { variationKey === null && <div className="error">{ decision.reasons }</div> }

      { /* If feature is enabled, do something with the Sort Method variable */ }
      { isEnabled && <div>The Sort method is {sortMethod}</div> }
      
      { /* Show relevant component based on the variation key */ }
      { variationKey === 'control' && <div>Control Component</div> }
      { variationKey === 'treatment' && <div>Treatment Component</div> }
      
      { /* Show Purchase Button to track Purchase event */ }
      <PurchaseButton />
    </div>
  )
}

function App() {
  return (
    <OptimizelyProvider optimizely={optimizely} user={{ id: 'user123' }}>
      <ProductSort />
    </OptimizelyProvider>
  );
}

export default App;
```