Feature flagging is a powerful technique for delivering features to users gradually, allowing you to test, iterate, and deploy new functionality without the risk of widespread failures. In this post, we'll take a deeper dive into how to implement a robust feature flagging system in JavaScript, covering best practices for managing flags, evaluating them securely, and ensuring smooth rollouts.
Step 1: Understand the Basics of Feature Flags
Feature flags (or feature toggles) are conditional checks in your application code that control whether a feature is enabled or disabled. Instead of deploying changes to users immediately, you can use flags to toggle features on or off in real-time, without requiring additional code deployments.
For example, imagine you have a new "dark mode" feature:
const flags = {
darkMode: true,
};
This flag can be checked in the UI code to decide whether to display the dark mode interface:
if (flags.darkMode) {
enableDarkMode();
}
Step 2: Define Flag States Dynamically
The flexibility of feature flags comes from being able to control their state dynamically. A flag can be set from a remote configuration server, allowing you to change feature availability at runtime. However, there are challenges in ensuring this works well with network failures or slow API responses.
To handle this, we can use a default flag set while attempting to load remote flags asynchronously:
const defaultFlags = {
darkMode: false,
};
async function loadFlags() {
try {
const response = await fetch('/api/feature-flags');
if (!response.ok) throw new Error('Failed to load flags');
return await response.json();
} catch (e) {
console.error('Using default flags due to error:', e);
return defaultFlags;
}
}
This ensures your app continues to work, even when the remote config service is temporarily unavailable.
Step 3: Store Flags in Local Storage for Persistence
One of the key features of a resilient flag system is persistence. Storing flag values in localStorage or IndexedDB ensures that flags are preserved across page reloads, reducing the impact of network failures or initial loading delays.
async function getFlags() {
const storedFlags = localStorage.getItem('featureFlags');
if (storedFlags) {
return JSON.parse(storedFlags);
}
const flags = await loadFlags();
localStorage.setItem('featureFlags', JSON.stringify(flags));
return flags;
}
This allows users to continue experiencing the correct features, even if they refresh the page, as the flags will be loaded from local storage.
Step 4: Implementing Gradual Rollouts with Bucketing
A powerful use case for feature flags is controlling the rollout of new features gradually. This allows you to test new functionality with a subset of users before a full-scale release. One way to achieve this is by implementing bucketing based on user identifiers, like their email address or user ID.
function getBucket(userId) {
return parseInt(userId.charCodeAt(0)) % 10;
}
function shouldEnableFeature(userId, flag) {
const bucket = getBucket(userId);
return flag === 'newFeature' && bucket < 5; // 50% of users get the feature
}
By adjusting the bucket size, you can control the percentage of users who see the new feature.
Step 5: Evaluating Flags in React or Other SPAs
In single-page applications (SPAs) like React, it's crucial to ensure that feature flags are evaluated globally, so they can be accessed across the app and trigger appropriate changes dynamically.
const FlagsContext = React.createContext({});
export function FlagsProvider({ children }) {
const [flags, setFlags] = useState({});
useEffect(() => {
getFlags().then(setFlags);
}, []);
return (
<FlagsContext.Provider value={flags}>
{children}
</FlagsContext.Provider>
);
}
This context-based approach ensures that your feature flags are available globally, without needing to pass them manually between components.
✅ Pros:
- 🎯 Enables feature rollouts with controlled exposure
- ⚡ Low impact on user experience, even when flags are evaluated asynchronously
- 🧪 Supports A/B testing and gradual rollouts
- 💾 Can store flags locally to ensure reliability across sessions
⚠️ Cons:
- ⚠️ Risks of stale or incorrect flags if not properly managed
- ❌ Requires good flag naming conventions and versioning to avoid conflicts
- 🔄 Live updates require mechanisms like polling or websockets
Summary
Feature flagging is a crucial tool for modern web development, providing flexibility and control over how features are released and tested. In this article, we’ve explored the fundamentals of feature flagging in JavaScript, including dynamic flag loading, persistence, gradual rollouts, and best practices for evaluating flags. With the right setup, you can ensure a smooth, fail-safe experience for your users, even when external services fail.
Want to go deeper? My full guide explains in detail how to:
- Use JavaScript expressions for safe feature flag evaluation
- Handle gradual feature rollouts and exposure
- Implement flag versioning, migration strategies, and more
- Design a feature flagging system that works offline and is resilient to failure
Feature Flag Engineering Like a Pro: From JS Expressions to Global Rollouts — just $10 on Gumroad.
If this was helpful, you can also support me here: Buy Me a Coffee ☕