We deploy 20 times a day to production. Our secret? Feature flags that let us ship incomplete features, test in production, and roll back instantly. But here's the thing - most feature flag implementations are terrible. They slow down your app, create technical debt, and turn your codebase into a maze of if-statements. After building and rebuilding our feature flag system three times, we finally got it right. ## Why Most Feature Flag Systems Fail Our first attempt looked like this: ```javascript // The naive approach if (process.env.REACT_APP_NEW_VIDEO_PLAYER === "true") { return ; } else { return ; } ``` Problems hit immediately: - Rebuild needed for every flag change - No way to test without deploying - All users get the same experience - Can't roll back without another deploy ## The Journey to a Real System ### Version 1: Config File (Failed) ```javascript // config/features.json { "newVideoPlayer": true, "advancedAnalytics": false, "betaUploader": true } // In code import features from './config/features.json'; if (features.newVideoPlayer) { // ... } ``` This failed because: - Still needed deploys to change flags - No user targeting - No percentage rollouts - Config got out of sync across servers ### Version 2: Database Flags (Better, but...) ```javascript // Fetch flags from API const [flags, setFlags] = useState({}); useEffect(() => { fetch("/api/feature-flags") .then((res) => res.json()) .then(setFlags); }, []); if (flags.newVideoPlayer) { return ; } ``` Better, but new problems: - Extra API call on every page load - Latency before flags loaded - Flash of wrong content - Database queries for every flag check ### Version 3: The System That Actually Works Here's what we built: ## The Architecture ### 1. Edge-Cached Flag Delivery ```javascript // Flag configuration stored in DynamoDB { flagId: "new-video-player", enabled: true, rules: [ { type: "percentage", value: 50, seed: "user.id" }, { type: "userGroup", value: ["beta-testers", "employees"] }, { type: "attribute", attribute: "plan", operator: "in", value: ["pro", "enterprise"] } ], overrides: { "user-123": true, // Always on for specific user "user-456": false // Always off for specific user } } // Served via CDN with 60-second cache // Response time: <10ms globally ``` ### 2. The React Implementation ```javascript // hooks/useFeatureFlag.js import { useEffect, useState } from "react"; import { evaluateFlag } from "@/lib/feature-flags"; const flagCache = new Map(); const flagPromises = new Map(); export function useFeatureFlag(flagName, defaultValue = false) { const [enabled, setEnabled] = useState(() => { // Check cache first if (flagCache.has(flagName)) { return flagCache.get(flagName); } return defaultValue; }); useEffect(() => { // Deduplicate requests if (!flagPromises.has(flagName)) { flagPromises.set( flagName, fetch(`/api/flags/${flagName}`) .then((res) => res.json()) .then((flag) => { const result = evaluateFlag(flag, getUserContext()); flagCache.set(flagName, result); return result; }) ); } flagPromises.get(flagName).then(setEnabled); }, [flagName]); return enabled; } // Usage function VideoPlayer({ videoId }) { const useNewPlayer = useFeatureFlag("new-video-player"); if (useNewPlayer) { return ; } return ; } ``` ### 3. The Evaluation Engine ```javascript // lib/feature-flags/evaluator.js import murmurhash from "murmurhash"; export function evaluateFlag(flag, context) { if (!flag.enabled) return false; // Check overrides first if (flag.overrides && flag.overrides[context.userId]) { return flag.overrides[context.userId]; } // Evaluate rules for (const rule of flag.rules) { if (evaluateRule(rule, context)) { return true; } } return false; } function evaluateRule(rule, context) { switch (rule.type) { case "percentage": return evaluatePercentage(rule, context); case "userGroup": return context.groups?.some((g) => rule.value.includes(g)); case "attribute": return evaluateAttribute(rule, context); case "schedule": return evaluateSchedule(rule); default: return false; } } function evaluatePercentage(rule, context) { const seed = rule.seed || "default"; const hashInput = `${context.userId}-${seed}`; const hash = murmurhash.v3(hashInput); const percentage = (hash % 100) + 1; return percentage <= rule.value; } ``` ### 4. Server-Side Rendering Support ```javascript // For Next.js / SSR export async function getServerSideProps(context) { const flags = await evaluateAllFlags(context.req.user); return { props: { flags, }, }; } // Provider component export function FeatureFlagProvider({ children, serverFlags = {} }) { return ( {children} ); } ``` ## Real-World Patterns ### Pattern 1: Progressive Rollout ```javascript // Start with employees only { flagId: "new-checkout-flow", enabled: true, rules: [ { type: "userGroup", value: ["employees"] } ] } // Then 5% of users { rules: [ { type: "userGroup", value: ["employees"] }, { type: "percentage", value: 5 } ] } // Increase gradually: 5% → 25% → 50% → 100% ``` ### Pattern 2: A/B Testing ```javascript // hooks/useExperiment.js export function useExperiment(experimentName) { const variant = useFeatureFlag(`experiment-${experimentName}`); useEffect(() => { // Track exposure analytics.track("Experiment Viewed", { experiment: experimentName, variant: variant ? "treatment" : "control", }); }, [experimentName, variant]); return variant; } // Usage function PricingPage() { const showNewPricing = useExperiment("new-pricing-2024"); return showNewPricing ? : ; } ``` ### Pattern 3: Feature Flag Cleanup ```javascript // Flag lifecycle tracking { flagId: "holiday-promo-2024", enabled: true, createdAt: "2024-11-01", expiresAt: "2024-12-31", owner: "marketing-team", jiraTicket: "MKTG-1234", rules: [ { type: "schedule", startDate: "2024-11-24", endDate: "2024-11-27" } ] } // Automated cleanup script async function cleanupExpiredFlags() { const flags = await getAllFlags(); const now = new Date(); for (const flag of flags) { if (flag.expiresAt && new Date(flag.expiresAt) < now) { await archiveFlag(flag.flagId); await notifyOwner(flag.owner, flag); } } } ``` ### Pattern 4: Emergency Kill Switches ```javascript // Critical features get kill switches const VideoUploadKillSwitch = () => { const uploadEnabled = useFeatureFlag("video-upload-enabled", true); if (!uploadEnabled) { return ( Video uploads are temporarily disabled for maintenance. ); } return ; }; // Can disable instantly from dashboard if issues arise ``` ## The Dashboard That Makes It Work We built a custom dashboard for non-engineers: ```javascript // Flag management UI function FlagDashboard() { return (

); } // Visual rollout editor function RolloutEditor({ flag }) { const [percentage, setPercentage] = useState(flag.percentage || 0); return (

{percentage}% of users will see this feature

); } ``` ## Performance Optimizations ### 1. Flag Bundling ```javascript // Instead of 10 API calls const flag1 = useFeatureFlag("feature1"); const flag2 = useFeatureFlag("feature2"); // ... 8 more // Bundle into one call const flags = useFeatureFlags([ "feature1", "feature2", "feature3", // ... ]); ``` ### 2. Local Evaluation ```javascript // Flags downloaded once, evaluated locally const flagData = await fetch("/api/flags/all"); const evaluator = new FlagEvaluator(flagData); // No network calls for flag checks if (evaluator.isEnabled("new-feature", userContext)) { // ... } ``` ### 3. Smart Caching ```javascript // Service Worker for offline support self.addEventListener("fetch", (event) => { if (event.request.url.includes("/api/flags")) { event.respondWith( caches.match(event.request).then((response) => { return ( response || fetch(event.request).then((response) => { const clone = response.clone(); caches.open("flags-v1").then((cache) => { cache.put(event.request, clone); }); return response; }) ); }) ); } }); ``` ## Metrics That Matter After implementing feature flags: **Deployment Confidence:** - Rollback time: 8 minutes → 10 seconds - Production incidents: -70% - Feature delivery: 2x faster **Performance Impact:** - Flag evaluation: <1ms - Initial load: +50ms (acceptable) - Runtime overhead: Negligible **Developer Happiness:** - Ship incomplete features safely - Test in production (specific users) - No more feature branches lasting weeks ## Common Pitfalls ### 1. Flag Sprawl ```javascript // ❌ Bad: Flags everywhere if (useFeatureFlag("new-button-color")) { buttonColor = "blue"; } if (useFeatureFlag("new-button-size")) { buttonSize = "large"; } if (useFeatureFlag("new-button-text")) { buttonText = "Click Here!"; } // ✅ Good: Grouped features if (useFeatureFlag("new-button-design")) { return ; } ``` ### 2. Missing Cleanup ```javascript // Track flag usage function useFeatureFlag(flagName) { useEffect(() => { // Report usage for cleanup tracking reportFlagUsage(flagName, window.location.pathname); }, [flagName]); // ... rest of implementation } ``` ### 3. Poor Testing ```javascript // Make flags testable export function FeatureFlagProvider({ children, overrides = {} }) { const contextValue = { ...defaultFlags, ...overrides, // Allow test overrides }; return ( {children} ); } // In tests test("new video player", () => { render( ); expect(screen.getByTestId("new-player")).toBeInTheDocument(); }); ``` ## What I'd Do Differently 1. **Start with a proper system** - Not evolve from environment variables 2. **Build the dashboard first** - Non-engineers need to control flags 3. **Implement cleanup from day 1** - Flag debt is real 4. **Monitor flag performance** - Some flags slow things down ## The Bottom Line Feature flags transformed how we ship code. We went from monthly releases with stress to daily deploys with confidence. The key? A system that's fast, reliable, and actually gets used. If your feature flags require a developer to change them, you're doing it wrong. Start small, measure everything, and give control to the people who need it. Your on-call rotation will thank you.