How to set up React A/B testing

A/B tests help you make your React app better by comparing changes for their impact on key metrics. To show you how to set one up, we will create a basic React app with Vite, add PostHog, create an experiment, and implement it to A/B test content in our app.

Creating a React app with Vite

First, create our React app using Vite and go into the newly created react-ab-test folder.

npm create vite@latest react-ab-test -- --template react
cd react-ab-test
npm install

Next, remove the boilerplate code in src/App.jsx to simplify it to only a title and button we encourage users to press.

// src/App.jsx
import './App.css'

function App() {
  return (
    <div className="App">
      <h1>We are testing this button:</h1>
      <button>Click me!</button>
    </div>
  )
}

export default App

Finally, run npm run dev and go to http://localhost:5173/ to see our new homepage.

Adding PostHog

To use PostHog to manage and track our A/B test, we must install and set it up. We do this by installing the posthog-js library to get access to the React SDK.

npm install posthog-js

Once installed, import PostHog into src/main.jsx and set up a client using our project API key and host from your project settings.

We can then initialize PostHog and wrap our app in the React PostHogProvider to access PostHog in any component.

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'

posthog.init(
  <ph_project_api_key>, 
  {
    api_host: https://us.i.posthog.com,
  }
)

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <PostHogProvider client={posthog}>
      <App />
    </PostHogProvider>
  </React.StrictMode>
)

Use the React usePostHog hook in our src/App.jsx file to capture a custom event when the button is clicked. This will be the goal metric for our A/B test.

// src/App.jsx
import './App.css'
import { usePostHog } from 'posthog-js/react'

function App() {
  const posthog = usePostHog()

  const handleClick = () => {
    posthog.capture('button clicked')
  }

  return (
    <div className="App">
      <h1>We are testing this button:</h1>
      <button onClick={handleClick}>Click me!</button>
    </div>
  )
}

export default App

Once done, go back to your app, click the button, and you should see a button clicked event captured into your PostHog instance.

Creating an experiment

With PostHog set up, your React app is ready for the A/B test.

To create one, go to the experiments tab in PostHog and click New experiment. Add a name, feature flag key (like home-button-test), choose product experiment, person participant type, and press Save as draft.

On the detail page, scroll down and click Add primary metric, choose single-use, trend metric type, and then select the button clicked event.

You can customize it further with a description, secondary metrics, or more variants (for multivariate testing).

Implementing the experiment

With our experiment created, it's time to add it to our React app. To do this, check the home-button-test flag using the useFeatureFlagVariantKey hook and show our changed content if it returns the value "test."

// src/App.jsx
import './App.css'
import { useFeatureFlagVariantKey, usePostHog } from 'posthog-js/react'

function App() {
  const posthog = usePostHog()
  const flagValue = useFeatureFlagVariantKey('home-button-test')

  const handleClick = () => {
    posthog.capture('button clicked')
  }

  return (
    <div className="App">
      <h1>We are testing this button:</h1>
      {flagValue === 'test' ? (
        <button onClick={handleClick}>Sign up for free!</button>
      ) : (
        <button onClick={handleClick}>Click me!</button>
      )}
    </div>
  )
}

export default App

Alternatively, you can use the React feature component as shown in the How to set up React feature flags tutorial.

To test that it works, temporarily override the feature flag with the test value in your App component:

//...
// Add this line to test the variant, then remove it before going to production
posthog.featureFlags.overrideFeatureFlags({'home-button-test': 'test'})
const flagValue = useFeatureFlagVariantKey('home-button-test')
//...

After confirming both sides of the A/B test work, remove the featureFlags.override call, go back to your experiment in PostHog, and click Launch. The A/B test is then running to get results on which version is best.

Further reading

• How to bootstrap feature flags in React with Vite and Express
• How to do holdout testing
• How to set up analytics in React

Subscribe to our newsletter

Product for Engineers

Read by 45,000+ founders and builders.

Subscribe

We'll share your email with Substack