Unleash: Integrating Feature Flags in React Applications

Unleash: Integrating Feature Flags in React Applications

Software Development
Aug 29, 2024
5-6 min

Share blog

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.

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

Use the following credentials to login:

javascript
1username: admin
2password: unleash4all };

Creating an API access token

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

Image

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.

Image

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.

javascript
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):

javascript
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:

Image

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:

Image

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:

javascript
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:

Image

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.

Blogs

Discover the latest insights and trends in technology with the Omax Tech Blog.

View All Blogs
Omax | Blog | The Right Way to Migrate from MySQL to AWS Aurora DSQL
7-8 min
August 25, 2026

The Right Way to Migrate from MySQL to AWS Aurora DSQL

Migrating a production database is one of the highest-risk changes you can make to an application. Moving from MySQL to AWS Aurora DSQL raises the stakes further...

Read More
Omax | Blog | From Memory Nightmare to Serverless: Bundling Files into a ZIP with AWS Lambda
8-10 min
August 25, 2026

From Memory Nightmare to Serverless: Bundling Files into a ZIP with AWS Lambda

A straightforward 'download all these files as one ZIP' request that worked perfectly on my laptop and... fell over the first day it met real production load. Here's the debugging story, the scaling options I ruled out, and why AWS Lambda was the right answer.

Read More
Omax | Blog | Clean Code vs. Overengineering: Where Should Developers Draw the Line?
10-12 min
August 21, 2026

Clean Code vs. Overengineering: Where Should Developers Draw the Line?

Clean code reduces unnecessary complexity; overengineering invents it. A practical guide to using context, evidence, and the cost of change to know when to stop adding abstractions...

Read More
Omax | Blog | Kafka vs RabbitMQ vs AWS EventBridge: Choosing the Right Architecture Based on Business Requirements
10-12 min
August 21, 2026

Kafka vs RabbitMQ vs AWS EventBridge: Choosing the Right Architecture Based on Business Requirements

Compare Kafka, RabbitMQ, and AWS EventBridge based on scalability, routing, event streaming, replay, infrastructure, and business requirements to choose the right architecture...

Read More
Omax | Blog | AI Integrations for QA Engineers
15-20 min
August 20, 2026

AI Integrations for QA Engineers

Learn how QA engineers can connect AI with Jira, GitHub, Slack, Notion and other tools to improve testing, bug tracking, reporting and QA productivity...

Read More
Omax | Blog | The Ultimate Guide to Amazon SES Setup with GoDaddy DNS
8-10 min
August 18, 2026

The Ultimate Guide to Amazon SES Setup with GoDaddy DNS

Learn how to set up Amazon SES with GoDaddy DNS. Complete step-by-step guide covering Easy DKIM, SPF, DMARC, custom MAIL FROM, and exiting the SES Sandbox...

Read More
Omax | Blog | AWS DevOps Agent Setup Guide with EC2
8-10 min
August 17, 2026

AWS DevOps Agent Setup Guide with EC2

Learn how to set up AWS DevOps Agent with EC2, CloudWatch, IAM, and Agent Spaces for AI-assisted monitoring, incident investigation, and root-cause analysis...

Read More
Omax | Blog | Multi-Tenancy Patterns in DynamoDB: Silo, Pool, and Bridge Models
6-10 min
August 13, 2026

Multi-Tenancy Patterns in DynamoDB: Silo, Pool, and Bridge Models

If you've already made the jump from a relational database to DynamoDB see our guide on moving relational data from SQL to DynamoDB...

Read More
Omax | Blog | We stopped leaving the IDE to design. Here’s our Cursor → Figma flow
8-10 min
August 10, 2026

We stopped leaving the IDE to design. Here’s our Cursor → Figma flow

Cursor drafts fast, catches gaps early, and still clips fields and breaks layouts. Here's the real pros-and-cons breakdown of our workflow...

Read More

Ready to Work With Us?

Most engagements start with a 20-minute conversation. No pitch, no pressure - just an honest discussion about what you're building and whether we're the right fit.