linkedin insight
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
DynamoDB multi-tenant architecture for secure data isolation.
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
Cursor IDE generating a Figma design draft from a Jira ticket - visualizing AI‑assisted design workflow.
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
AWS DevOps Agent automating AI-powered on-call incident response
6-8 min
August 07, 2026

AWS DevOps Agent: How AI is Automating On-Call Incident Response

If you've ever been on call during a production outage, you know how stressful it can be. Alerts start firing, dashboards light up, and suddenly you're jumping between monitoring tools...

Read More
Next.js pre-build script for detecting missing images before deployment
6-10 min
August 06, 2026

Catch Missing Images Before Deploy: A Simple Pre-Build Script for Next.js

How Omax Tech added a lightweight image validation gate to Next.js 15 builds on Vercel...

Read More
Storybook MCP + Amazon Bedrock + Strands: Teaching your LLM to build UI from your real design system catalog
10-15 min
August 04, 2026

Teach your LLM your design system: Storybook MCP + Amazon Bedrock + Strands

How to stop models inventing buttons and make them build UI from your real component catalog. Most "AI UI" demos look great until you paste the markup into a real product. The fix is not a smarter prompt...

Read More
Configure Self Hosted GitLab Repository Mirroring
6-8 min
July 30, 2026

Configure Self Hosted GitLab Repository Mirroring

Self hosted GitLab Repository Mirroring is a powerful feature that automatically synchronizes repositories between GitLab and external Git providers...

Read More
Illustration of Event Sourcing concepts for scalable software architecture and distributed systems.
4-8 min
July 20, 2026

Event Sourcing: A Foundation Guide

Event Sourcing is an architectural pattern where every state change is recorded as an immutable event rather than updating a database row in place...

Read More
AWS cloud security best practices with developer coding environment and cloud technology infrastructure
6-10 min
July 15, 2026

AWS Security Best Practices Every Business Should Follow

As more organizations migrate their applications and critical workloads to AWS, securing cloud environments has become a business priority rather than just an IT responsibility...

Read More
Futuristic cloud computing illustration with glowing data and AI-powered server floating in a digital neon environment.
6-10 min
June 22, 2026

AWS Migration Checklist: A Practical Roadmap for Modern Businesses

Migrating businesses to AWS offers many benefits, including cost optimization, improved security, and greater scalability. However, a successful migration requires careful planning and execution. Otherwise, organizations may experience...

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.