Stop 20 · Advanced TopicsTopics · 11/14

Feature Flags

Part of the Frontend Developer Roadmap

In short

What if you could ship code on Monday but switch the feature on only on Friday, for just 5% of users, and switch it off in seconds if it breaks? That's feature flags.

Toggles that let you enable or disable features at runtime without deploying new code — used for gradual rollouts, A/B testing, and safely shipping incomplete work.

The jaadu flips a wall switch, turning on an air conditioner that blows cool air.

Think of it like this

The switchboard in your room

The wiring for the AC is already in the wall. You just flip the switch when summer comes, and flip it off if it trips. Feature flags let code sit in production, wired up but switched off until you're ready.

Watch it happen

Who sees the new checkout?

Riya
Arjun
App
isOn()

open checkout

1/6Riya opens the checkout page.

The big ideas

What you need to know

Deploy is not release

Code can be live in production but hidden behind a flag until you decide to turn it on.

Gradual rollouts

Turn a feature on for 1%, then 10%, then everyone, watching errors at each step.

Kill switch

If a feature breaks, turn the flag off instead of rushing a rollback deploy.

Clean up old flags

Once a feature is fully on, delete the flag and the old code path, or flags pile up.

See it in code

Walk through the code

ts
1function bucket(userId: string): number {2  let h = 0;3  for (const ch of userId) h = (h * 31 + ch.charCodeAt(0)) >>> 0;4  return h % 100; // 0 to 99, same every time for this user5}6 7const flags = { newCheckout: { enabled: true, rollout: 10 } };8 9export function isOn(name: keyof typeof flags, userId: string) {10  const f = flags[name];11  return f.enabled && bucket(userId) < f.rollout;12}

1/3Turn a user ID into a stable number from 0 to 99.

Hashing the user ID means the same 10% always see the new checkout, so nobody flips between versions. Services like LaunchDarkly, GrowthBook or Flagsmith do this for you, plus a dashboard.

Save yourself the pain

Common mistakes

Oops

Using Math.random() on every page load to decide who sees a feature.

Do this instead

Base it on a stable value like the user ID, so each person gets the same experience every time.

Oops

Hiding a secret or paid feature only with a frontend flag.

Do this instead

Frontend flags are visible in the code. Check access on the server too.

Your mission

Roll out a feature slowly

~25 min

Quick check

A new feature behind a flag starts causing errors for 10% of users. What's the fastest safe response?

Go deeper

  1. 1Add a simple boolean feature flag (even hardcoded) gating one feature in a project.
  2. 2Read how a feature-flag service (LaunchDarkly, GrowthBook) manages flags remotely.
  3. 3Learn why flags let teams ship code to production before a feature is fully 'launched'.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge