A/B tests in React: a feature-flag SDK plus discipline around exposure tracking and SSR.

Pick an SDK

Don't roll your own — bucketing math and analytics integration are non-trivial.

Basic shape

// providers
import { GrowthBookProvider, useFeatureValue } from '@growthbook/growthbook-react';

const gb = new GrowthBook({
  apiHost: '...',
  clientKey: '...',
  enableDevMode: import.meta.env.DEV,
  attributes: { id: user.id, country: user.country },
});

<GrowthBookProvider growthbook={gb}>
  <App />
</GrowthBookProvider>

// at usage site
function Checkout() {
  const variant = useFeatureValue('checkout-cta', 'control');
  return variant === 'b' ? <NewCTA /> : <OldCTA />;
}

SSR / hydration safety

The biggest pitfall: server renders the control, client hydrates with the variant → flicker + mismatch.

Solutions:

• Resolve the variant on the server (cookie-based user id) and pass it through.
• Edge middleware (Next.js middleware.ts) rewrites the request based on bucketing.
• For static pages, generate both variants and serve one based on edge.

// Next.js middleware example
export function middleware(req: NextRequest) {
  let id = req.cookies.get('uid')?.value;
  if (!id) { id = crypto.randomUUID(); }
  const variant = hash(id, 'experiment-1') < 0.5 ? 'a' : 'b';
  const res = NextResponse.next();
  res.cookies.set('uid', id);
  res.cookies.set('exp-1', variant);
  return res;
}

Exposure tracking

You must log when a user is exposed to a variant — not when the experiment is configured.

useEffect(() => {
  analytics.track('experiment_exposure', {
    name: 'checkout-cta',
    variant,
  });
}, [variant]);

Most SDKs auto-fire exposure when the variant is read.

Metric design

• Primary metric: the thing you predicted would change (conversion rate).
• Guardrail metrics: things that shouldn't get worse (load time, error rate).
• Sample size + duration: calculate before launch, don't peek early.
• Significance: most SDKs run sequential testing or report p-values directly.

Engineering hygiene

• Default to control: when SDK fails to load, render control.
• Kill switch: feature flags decoupled from rollout %, so you can disable instantly.
• Cleanup: remove flag once shipped. Don't let dead branches accumulate.
• Don't A/B test in interview unless asked: experiments slow shipping for small teams.

Component pattern

function ExperimentSwitch({
  name, variants,
}: { name: string; variants: Record<string, ReactNode> }) {
  const variant = useFeatureValue(name, 'control');
  return <>{variants[variant] ?? variants.control}</>;
}

// usage
<ExperimentSwitch name="checkout-cta" variants={{
  control: <OldCTA />,
  b: <NewCTA />,
}} />

Anti-patterns

• Bucketing client-side without SSR awareness → flicker.
• Bucketing on browser fingerprint that changes → users flip variants.
• Running 10 experiments at once on the same page → interactions confound.
• Forgetting to clean up shipped experiments → forever-flags.