FeatureSignals

A/B Testing with the React SDK

Learn how to set up an A/B test using FeatureSignals and the React SDK to measure which variant performs better.

Prerequisites

  • FeatureSignals server running
  • A React application (Create React App, Next.js, Vite, etc.)
  • React SDK installed (npm install @featuresignals/react)

Step 1: Create a Multi-Variant Flag

bash
curl -X POST https://api.featuresignals.com/v1/projects/{projectID}/flags \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"key": "pricing-page-layout", "name": "Pricing Page Layout Test", "type": "string", "variants": [
    {"key": "control", "value": "control", "name": "Control"},
    {"key": "variant-a", "value": "variant-a", "name": "Feature Comparison"},
    {"key": "variant-b", "value": "variant-b", "name": "Simplified"}
  ]}'

Step 2: Set Up the Provider

tsx
import { FeatureSignalsProvider } from '@featuresignals/react';

function App() {
  return (
    <FeatureSignalsProvider
      apiKey={process.env.REACT_APP_FS_CLIENT_KEY}
      context={{ userID: currentUser.id }}
    >
      <Router><Routes /></Router>
    </FeatureSignalsProvider>
  );
}

Step 3: Use the Flag

tsx
import { useFlag } from '@featuresignals/react';

function PricingPage() {
  const layout = useFlag('pricing-page-layout', 'control');

  return (
    <div className="pricing-page">
      <h1>Choose Your Plan</h1>
      {layout === 'control' && <CurrentPricingLayout />}
      {layout === 'variant-a' && <ComparisonTableLayout />}
      {layout === 'variant-b' && <SimplifiedLayout />}
    </div>
  );
}

Step 4: Track Conversions

tsx
import { useTrack } from '@featuresignals/react';

interface Plan { id: string; name: string; price: number }

function PricingCard({ plan }: { plan: Plan }) {
  const track = useTrack();

  const handleSubscribe = async () => {
    await subscribeToPlan(plan.id);
    track('pricing-conversion', { plan: plan.id, revenue: plan.price });
  };

  return (
    <div className="pricing-card">
      <h3>{plan.name}</h3>
      <p>${plan.price}/mo</p>
      <button onClick={handleSubscribe}>Subscribe</button>
    </div>
  );
}

Tips for Reliable A/B Tests

  • Sample size: Run tests long enough to reach statistical significance (1,000+ conversions per variant)
  • One change at a time: Avoid running overlapping tests on the same page
  • Consistent assignment: Always pass a stable userID
  • Monitor guardrail metrics: Watch error rates and page load times alongside conversion metrics

Next Steps