Unleash: Integrating Feature Flags in React Applications

Introduction

Feature flags are a powerful asset in software development, allowing you to toggle features on or off without deploying new code. This flexibility serves various purposes, including:

• A/B Testing: Run A/B tests on new features to gauge user reactions before a full rollout.
• Incremental Rollouts: Gradually introduce new features to a subset of users before expanding availability.
• Environment-Specific Controls: Manage feature access across different environments like development, staging, and production.

The Unleash SDK for React streamlines the process of incorporating feature flags into your React applications with the following benefits:

• Simple Declarative Syntax: Define feature flags using a straightforward, declarative approach.
• Optimized Rendering: Enhance performance by deferring rendering until feature flags are fetched.
• Class and Functional Component Compatibility: Support for both class-based and functional components.

Installation

1. Setting up a self-hosted Unleash server: The easiest way to run Unleash locally is by using Git and Docker.

1git clone git@github.com:Unleash/unleash.git
2
3cd unleash
4
5docker compose up -d  };

2. Accessing the Unleash GUI: Once Docker is up and running, navigate to http://localhost:4242/. You’ll see a login screen.

Use the following credentials to login:

1username: admin
2password: unleash4all  };

Creating an API access token

Go to the “API Access” tab in the side navigation and click “New API Token.”

Provide a name for the token and choose the SDK type. Since this blog focuses on React, select the Client-side SDK. After choosing the environment, click “Create Token.” Be sure to save the token for future reference.

Unleash React SDK

With your token created, you’re set to integrate Unleash into your React application. Start by installing and configuring the client-side SDK to align with your server’s setup.

Installing package

Use either of the commands (as per your environment) to install the sdk.

1npm install @unleash/proxy-client-react unleash-proxy-client
2
3# or
4
5yarn add @unleash/proxy-client-react unleash-proxy-client  };

Configuration

Now import the sdk, configure and wrap your <App/> as following (typically in index.js/ts):

1import { createRoot } from 'react-dom/client';
2
3import { FlagProvider } from '@unleash/proxy-client-react';
4
5const config = {
6
7 url: '<unleash-url>/api/frontend',
8
9 clientKey: '<your-token>',
10
11 refreshInterval: 15,
12
13 appName: 'your-app-name',
14
15};
16
17const root = createRoot(document.getElementById('root'));
18
19root.render(
20
21  <React.StrictMode>
22
23    <FlagProvider config={config}>
24
25      <App />
26
27    </FlagProvider>
28
29  </React.StrictMode>
30
31);  };

Replace <unleash-url> with Unleash server url, in our case it’s http://localhost:4242 . Replace <your-token> with the token that we created in step 2 of installation. Replace your-app-name with your App’s name (it will be only used to identify your application).

Creating Feature-flag

On the dashboard (in projects tab) click on the default project. You’ll see a window like:

P.s. You might not see the “test” flag as I created it earlier.

Click on the “New feature flag” button. You will see a window like this:

Name your token, let the flag type and project remain the same. Toggle-on “Enable Impression data” and click on “Create feature flag”.

Congratulations! You have created your first feature flag. Now use it in your application.

Consuming feature flag

Head to your component/feature which you want to bind with the feature flag. And bind it as following:

1import { useFlag } from '@unleash/proxy-client-react';
2
3const TestComponent = () => {
4
5  const enabled = useFlag('travel.landing');
6
7  if (enabled) {
8
9    return <SomeComponent />;
10
11  }
12
13  return <AnotherComponent />;
14
15};
16
17export default TestComponent;  };

Now your Test component is bound with the feature flag. You can toggle your flag from the Unleash GUI (click the toggle button under development/production) and see the difference in your frontend:

Conclusion

Integrating feature flags into your React applications with the Unleash SDK provides significant benefits, including enhanced user experience through A/B testing and reduced risk with incremental rollouts. By utilizing feature flags, you can make your development process more adaptable and responsive to user feedback, allowing for real-time feature adjustments without the need for frequent redeployments. Unleash’s powerful integration features make it an essential tool for development teams aiming to implement feature flags smoothly and efficiently.