A/B Experiments (Stable Bucketing)

HOW IT IS WIRED

Real code from the GAS template

The code below is drawn from hooks/useExperiment.ts in the gas-template repository. This is the code your generated app gets, not pseudocode, not a description of intent.

// hooks/useExperiment.ts (gas-template)
// Stable variant assignment: FNV-1a hash -> upsert ignoreDuplicates -> read back.

export function useExperiment(name: string, variants: string[]): string {
  const [variant, setVariant] = useState<string>(variants[0]);
  const variantsHash = useMemo(() => fnv1a32(variants.join('|')), [variants]);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      const userId = await getCurrentUserId();
      if (!userId) {
        // Anonymous: deterministic within-session bucket, not persisted.
        const bucket = assignBucket(null, name, variants.length);
        if (!cancelled) setVariant(variants[bucket]);
        return;
      }

      // AsyncStorage cache short-circuits the round-trip on subsequent mounts.
      const cacheKey = `${CACHE_PREFIX}${name}:${userId}`;
      const cached = await AsyncStorage.getItem(cacheKey).catch(() => null);
      if (cached && variants.includes(cached)) {
        if (!cancelled) setVariant(cached);
        return;
      }

      // ignoreDuplicates: whoever inserts first wins; concurrent mounts are safe.
      const candidate = variants[assignBucket(userId, name, variants.length)];
      await supabase.from('experiments').upsert(
        { user_id: userId, experiment_name: name, variant: candidate },
        { onConflict: 'user_id,experiment_name', ignoreDuplicates: true },
      );

      const { data: row } = await supabase
        .from('experiments').select('variant')
        .eq('user_id', userId).eq('experiment_name', name).maybeSingle();

      const resolved = row?.variant && variants.includes(row.variant)
        ? row.variant : candidate;
      await AsyncStorage.setItem(cacheKey, resolved).catch(() => undefined);
      if (resolved === candidate) {
        captureEvent(EVENTS.experiment_assigned, { name, variant: resolved });
      }
      if (!cancelled) setVariant(resolved);
    })();
    return () => { cancelled = true; };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [name, variantsHash]);

  return variant;
}

Source: goodspeed-apps/gas-template → hooks/useExperiment.ts