How to Integrate Feature Flags in React Applications Using Flagsmith

Gichuhi Wachira holds a Bachelor of Science degree in Computer Science and works as a front-end developer and technical writer with over two years of writing experience.
He writes about various web and cloud technologies, as well as programming concepts, for MUO. Besides writing or tinkering with new technologies, he spends his time outdoors.

Feature flags are an essential tool, helping to streamline the build and release of software updates. You can use them to target a specific group of users or your entire user base.

Essentially, they let you introduce significant changes, without disrupting the workflow of your production application, in real-time and on demand. You can do this by using feature toggles as an alternative to extensive code modifications and deployments.

Software development is, without doubt, a continuous and iterative process. Unless everyone abandons a project, someone will keep developing it, introducing new changes.

Ideally, CI/CD pipelines let you push consistent code changes to production. Nonetheless, these processes come at the cost of requiring substantial deployment effort.

However, using feature flags, you can release an update to some or all of your user base just by toggling a setting.

There are several situations where feature flags are applicable, including:

Flagsmith provides a great solution for feature flags, including an open-source version and a cloud service. This guide will use its cloud solution to integrate feature flags in a React application.

To get started:

Now, to complete the setup, you need the client-side environment key.

To obtain the client-side environment key:

You can find this project's code in its GitHub repository.

Now, go ahead, and scaffold a React project using the create-react-app command. Alternatively, you can use Vite to set up a basic React project. Please note that this guide will use Vite to create the React application.

Next, install Flagsmith's SDK in your project. This SDK is compatible with various JavaScript frameworks.

npm install flagsmith

Now, create a .env file in the root directory of your project folder and add the client-side environment key as follows:

VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID=""

To test out Flagsmith's feature flags capabilities, you'll build a simple component that will render a list of e-commerce products from a DummyJSON API.

Each product in the list comes with various attributes, such as title, price, product description, and an overall product rating. The intention is to apply the feature flag to the product rating value. Once you've implemented the flag, you'll be able to control the feature by toggling a button on Flagsmith's cloud service.

In the src directory, create a new folder and name it, components. Inside this folder add a new Products.jsx and include the following code.

First, make the following imports:

import "./style.component.css";
import React, { useState, useEffect } from "react";
import flagsmith from 'flagsmith';

Next, create the functional component, define the initial state variables, and add the JSX elements.

export default function Products() {
const [products, setProducts] = useState([]);
const [showProductRating, setShowProductRating] = useState(false);
const environmentID = import.meta.env.VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID;

return (
<>





);
}

Now, define a useEffect hook that will make HTTP requests to the dummy JSON API to fetch the products' data. You can use the Fetch API or Axios to consume the API.

Within the functional component, add the code below:

useEffect(() => {
const fetchProducts = async () => {
await fetch("https://dummyjson.com/products")
.then((res) => res.json())
.then((json) => setProducts(json.products));
}
fetchProducts();
}, []);

The fetchProducts function will run once the component mounts. It fetches the products' data and subsequently updates the state of the products variable.

Finally, you can map through the array of products and render them on the browser.

Right below the product-list class div, include the following code:

{ products.slice(0,6).map((product) => (

{product.title}
Price: ${product.price}
{product.description}

Rating: {product.rating}

))}

With that, you can comfortably fetch and display a list of product items from the dummy JSON API.

To integrate and initialize Flagsmith's SDK in the React application, right below the fetchProducts function call inside the useEffect hook, add the code below.

flagsmith.init({
environmentID:environmentID,
cacheFlags: true,
enableAnalytics: true,
onChange: (oldFlags, params) => {
setShowProductRating(flagsmith.hasFeature('product_rating'));
}
});

By including this function, you enable feature flag management with caching and analytics in the React app.

The function utilizes a callback to dynamically manage how it displays product ratings based on the state of the product_rating feature flag. This should be either true (enabled), when toggled on in the cloud service, or false (disabled) when toggled off.

Finally, update the product rating h3 element in the return code block with this statement.

 {showProductRating && Rating: {product.rating}}

With this update, once you toggle on the feature, it updates the showProductRating variable to true. As a result, the product rating will appear alongside the other attributes. However, if you toggle the feature off, the showProductRating variable will be false, and the product rating will not appear.

Lastly, update the App.jsx file to import the product component.

import "./App.css";
import Products from "./components/Products";

function App() {
return (


Product Catalogue



);
}

export default App;

Finally, run your application, and head over to your browser to view the application.

npm run dev

To test this feature, go back to your Feature's Settings page on Flagsmith, and toggle off the product rating feature.

Since the application is running on localhost, reload it in the browser to view the updated changes. The product rating which was initially present will disappear. If you toggle the feature back on and reload the page again, it will reappear.

Feature flags have become a game-changer tool for managing feature releases in applications. They seamlessly integrate into the development workflow, minimizing risks associated with rolling out new updates.

They're also powerful, giving everyone—even end users—the power to enable or disable features without diving into complex code.