Using Feature Flags in a React.js Application

In this article, I’m going to be demonstrating how to integrate ConfigCat's Feature Flag service in React. I will build a simple, pretty easy-to-understand application that simulates a race between three cars. Let’s get started!

What are Feature Flags exactly, and why are they used?

A feature flag, as its name suggests, is a switch that allows certain features to be turned on or off whenever it’s needed in the development or production state of the application. Feature flags are useful in a variety of use cases: releasing a feature gradually, displaying an application extension only for users in a specific country, or only for a limited number of users.

How will the app use the Feature Flag?

I’m going to present a working demo of ConfigCat’s feature management system by enabling the “Race” feature on some cars and see which one reaches the finish line first. The feature flag will work like a semaphore: when the flag holds a truthy value the light turns green and the cars will race, or otherwise they will hold still.

Note: In case you want to follow along from the beginning, here's the full app.

Hooking up ConfigCat to React

But first thing’s first - creating a new React app with $ npx create-react-app and installing the configcat-js SDK:

$ npm install configcat-js

And simply importing it wherever it’s needed:

import * as configcat from 'configcat-js';

Feature flags can be used for the entire application or just for a specific component, in this case I’m going to be using it in the Cars component which is used in App.js. First, I need to create a ConfigCat client:

let configCatClient = configcat.createClientWithAutoPoll(mySdkKey, {
  pollIntervalSeconds: 20,
  configChanged: () => {
    console.log('My feature flag value has changed!');
  },
});

In the code above I’ve used the createClientWithAutoPoll method with the following parameters:

• mySdkKey, which is a string that links the application to ConfigCat and can be seen in the dashboard. I strongly advise storing this elsewhere, so it’s not accessible in the source code.
• pollIntervalSeconds, which overwrites the default polling interval.
• configChanged, a callback that is notified each time the flag is altered. I’m going to leave a log inside it for now so every time something changes we can see it in the console.

Now if I run my application, open the console on the side and change the feature flag value in the ConfigCat dashboard, I’ll get a log letting me know that my value has changed. Great! My feature flag is now fully working, but what if I want to know its value and do something based on it as well?

Using the feature flag value

The initial state of this application is the following: when the flag is not enabled, there are 3 cars aligned on a road, ready to race each other to the finish line. To let them race, I’m going to add a CSS class to each car which will animate the vehicles when the flag is switched on.

There are multiple options for receiving the value, but for the sake of simplicity I’m using the asynchronous approach with no user targeting. To check out the other options, you can find them here.

let configCatClient = configcat.createClientWithAutoPoll(mySdkKey, {
  pollIntervalSeconds: 20,
  configChanged: () => {
    console.log('My feature flag value has changed!');
  },
});

configCatClient
  .getValueAsync('isMyFirstFeatureEnabled', false)
  .then((value) => {
    setRaceMode(value);
  });

The getValueAsync function is called with the feature flag name and the default value. In the example above, the value is assigned to a variable with the help of React’s useState() hook and now raceMode is holding the flag’s value.

Ideally, I want the raceMode variable to get the value right when it’s changed, without refreshing the page. Remember the configChanged callback? Let’s move the value handling code into a function to avoid duplicates and use it inside configChanged as well.

const handleValue = () => {
  configCatClient
    .getValueAsync('isMyFirstFeatureEnabled', false)
    .then((value) => {
      setRaceMode(value);
    });
};
let configCatClient = configcat.createClientWithAutoPoll(mySdkKey, {
  pollIntervalSeconds: 20,
  configChanged: () => {
    handleValue();
    console.log('My feature flag value has changed!');
  },
});

handleValue();

Now let’s get to the fun part. Let’s pass raceMode down to each Car through props, alongside the car image, and also handle it in the Car component:

<div className="cars-container">
  {images.map((image) => (
    <Car carImage={image} key={image.link} raceMode={raceMode}></Car>
  ))}
</div>

Based on its value there’s going to be different styling for the cars. With a little string interpolation magic, the CSS class applied is now dynamically changed every time the feature flag is changed. I’m not going into the CSS animations because it’s not my purpose for this article. In the dashboard, I’m going to switch on the flag value to on, wait for the specified poll interval and see that the light turned green. The cars are now racing! I’m betting on the red one.

Summary

As a quick rewind, what were the key steps in this demo? First, I installed the ConfigCat javascript SDK, then I created a client that links the app to the feature flag service. Next, I fetched the flag value and handled it with the help of the useState hook in React. Finally, when the flag holds a truthy value, some CSS classes are added to the cars’ containers and a race is simulated.

Conclusion

Feature flags can be used in a variety of ways in all kinds of applications. ConfigCat’s feature flag solution is so easy to use that even non-technical team members can easily use them, with its 10 minutes trainable user interface. I hope you've found this article useful, and if you want to try and implement a feature flag with React yourself, the source code from this demo is available in this public repository on GitHub.