Implementing feature flags in a React app allows you to enable or disable features dynamically without deploying new code. It helps in A/B testing, gradual rollouts, and toggling experimental features.

Here’s how to implement feature flags in React:

1️⃣ Simple Approach: Using Context API

A straightforward way to manage feature flags locally.

Step 1: Create a Feature Flags Context

import React, { createContext, useContext } from 'react';

// Define feature flags
const featureFlags = {
newDashboard: true,
betaFeature: false,
};

const FeatureFlagContext = createContext(featureFlags);

export const useFeatureFlag = (flag) => {
const flags = useContext(FeatureFlagContext);
return flags[flag];
};

export const FeatureFlagProvider = ({ children }) => (
<FeatureFlagContext.Provider value={featureFlags}>
{children}
</FeatureFlagContext.Provider>
);

Step 2: Wrap Your App with the Provider

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { FeatureFlagProvider } from './FeatureFlagContext';

ReactDOM.render(
<FeatureFlagProvider>
<App />
</FeatureFlagProvider>,
document.getElementById('root')
);

Step 3: Use Feature Flags in Components

import React from 'react';
import { useFeatureFlag } from './FeatureFlagContext';

const Dashboard = () => {
const isNewDashboardEnabled = useFeatureFlag('newDashboard');

return (
<div>
{isNewDashboardEnabled ? (
<h1>🚀 New Dashboard</h1>
) : (
<h1>🛠️ Old Dashboard</h1>
)}
</div>
);
};

export default Dashboard;

✅ Benefits:

• Simple to implement.
• Great for small projects or internal tools.

🚫 Limitations:

• Flags are hardcoded.
• No real-time updates.

2️⃣ Advanced Approach: Using External Services

For larger projects, consider services like LaunchDarkly, Split.io, or Unleash that provide real-time flag management.

Example: Using LaunchDarkly

1. Install SDK:

1. Initialize LaunchDarkly:

import { withLDProvider } from 'launchdarkly-react-client-sdk';

const AppWithLD = withLDProvider({
clientSideID: 'YOUR_CLIENT_SIDE_ID',
user: {
key: 'user_key',
},
})(App);

export default AppWithLD;

1. Use Feature Flags:

import { useFlags } from 'launchdarkly-react-client-sdk';

const FeatureComponent = () => {
const { newFeature } = useFlags();

return newFeature ? <NewComponent /> : <OldComponent />;
};

• Real-time flag updates.
• User targeting and A/B testing.
• Audit trails and analytics.

🚫 Limitations:

• Added cost.
• External dependency.

3️⃣ Toggle Features Based on Environment Variables

For simple use cases like enabling features in staging but not in production:

const isFeatureEnabled = process.env.REACT_APP_NEW_FEATURE === 'true';

const App = () => (
<div>
{isFeatureEnabled ? <NewFeature /> : <OldFeature />}
</div>
);

In .env:

🔥 Best Practices for Feature Flags

1. Clean Up Old Flags:
   Don’t let old flags pile up. Remove flags once a feature is fully rolled out.

2. Use Flagging for Experiments:
   Run A/B tests with feature flags to experiment safely.

3. Layered Flags:
   Use multiple flags for complex features (e.g., UI visibility + backend logic).

4. Fail-Safe Defaults:
   Design flags to fail gracefully if the flagging service is down.

5. Granular Targeting:
   Enable features for specific users or cohorts (e.g., beta testers).