Feature Toggles for React Frontends Using Flagsmith
Tags: react, frontend
Published: 2022-09-29 14:30:20

Feature Toggles (often also referred to as Feature Flags) are a powerful technique that allows teams to modify system behavior without changing code. They allow you to manage components and compartmentalize risk. But before we jump into the how, let’s take a brief walk into why.

## Why use Feature Toggles?

It’s 2023; I don’t have to talk about why you should be using a version control system ([VCS](https://en.wikipedia.org/wiki/Version_control)). That being said, **Git** is the (almost) obvious choice. In my experience, there are two major strategies for managing **Git branches**.

Git flow is a legacy Git workflow that was originally a disruptive and novel strategy for managing Git branches.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image6_4ef2b14b363c9291662a02d558866ed1.png" alt="A git flow diagram."/><figcaption>[Git flow in a nutshell](https://nvie.com/posts/a-successful-git-branching-model/)</figcaption></figure>

### So, Should Everyone Use Git flow?

In my experience, Git flow is more suitable for packaged software (a product that you release on occasion).

When you have feature branches, release branches, a master branch, a development branch, a hotfix branch, and git tags, they all have to be tracked, understood and accounted for in your build and release process. More than that, you need to constantly keep track of which branch is which. With `git-flow`, the number of things you’re keeping track of increases even more, because there are three other branches (of varying lifetimes) that merge into `develop`: feature branches, release branches and hot fixes. Now, the potential for merge conflicts is not linear; these branches potentially triple the opportunities for merge conflicts.

If your team is a startup or an internet-facing website or web application, you might have multiple releases in a day. When you’re working at scale, you don't want those merge conflicts to get in the way of delivery. [Amazon deploys roughly every 11.6 secs](https://www.reddit.com/r/devops/comments/g8ktuu/how_come_amazon_deploys_23000_times_a_day_what/).

 > Git-flow and [continuous integration](https://www.atlassian.com/continuous-delivery/continuous-integration) are, by definition, incompatible.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image10_1b4b0337df0b815ea7b2d4e0fff50619.jpg" alt="Comic that says, &quot;There&#x27;s got to be a better way.&quot;"/></figure>

### **Is There a Simpler Way?**

GitHub flow/trunk-based development is a lightweight, branch-based workflow. The GitHub flow is useful for everyone, not just developers.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image13_1efad805f6d737c4d4848b12705956b6.png" alt="A GitHub flow diagram."/><figcaption>GitHub flow in a nutshell</figcaption></figure>

The primary problem associated with `git flow` is managing long-lived branches. With trunk-based development, we only have one deployable branch, aka `master/main`. As the other branches are short-lived (literally a few hours), we can achieve continuous integration. So our code is always deployable at any instant. Perfect for web development. Or is it?

This looks great in theory, but then how do we:

- Develop long-running features?
- Test experiments before rolling them out to everyone?
- Refactor code without breaking everything?
- Do performance improvements without compromising user experience?
- Improve functionality without making it worse?


The answer is feature toggles. :)

## How Do You use Feature Toggles?

We will be focusing on `react-js` as our authoring view library for managing feature toggles. The simplest implementation of React feature flags is a boolean variable:

```
const flag = true | false
```

This tiny flag will introduce a branch in the code and allow us to render a different component. The concept of a React feature flag really is that simple.

### Scenario 1

Let’s say we want to enable certain components only for a specific country. The simplest implementation is as follows:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image8_a1e9bde22948a73e5bb9ab47b9d78b78.png" alt="A code snippet with feature toggles."/><figcaption>Country-based toggle</figcaption></figure>

[Save this code](https://user-a00e97da-3485-43fd-bbec-75dcb17f675d-fhcmbheklq-uc.a.run.app/?p=50b64e9377)

_The condition_ `user.country === 'IN'` _is essentially a feature toggle._

Evaluating the condition in order to render a component is now a responsibility of `MyComponent`. Imagine the scenario wherein multiple components need to change based on country. You can argue that the computation can be abstracted out to a utility method. Something like `const isIndia = (user) => user.country === 'IN'`.

### Scenario 2

Let’s say we have a new UX and want user feedback on it. The simplest implementation is as follows:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image1_cebee51dfac4ba3a98d8e127a6f6780c.png" alt="A code snippet that implements feature toggles."/><figcaption>Target user-based toggle</figcaption></figure>

[Save this code](https://user-a00e97da-3485-43fd-bbec-75dcb17f675d-fhcmbheklq-uc.a.run.app/?p=07574d9c5d)

Every time we need to add a user to the set of targeted users, the code needs to change. You can argue that we could fetch the list of users using some API, but the evaluation of the condition viz. `targetedUsers.includes(user.id)` sits in the code.

### Scenario 3

Let’s say we have a brand new feature, but the underlying APIs are not completely ready for it to work. We definitely do not want our code to rot in a branch while the APIs are being finished, but we sure as hell cannot release it. Here's how we could implement feature toggles for it:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image11_59975ce34f35b1d3cb3a52b0324b057c.png" alt="A React code snippet."/><figcaption>New feature toggle</figcaption></figure>

[Save this code](https://user-a00e97da-3485-43fd-bbec-75dcb17f675d-fhcmbheklq-uc.a.run.app/?p=cb224bbc9c)

`isBrandNewFeatureEnabled` is just a boolean flag; it doesn’t need any other variables to be evaluated. Whenever the APIs are ready, we can test the feature in lower environments like `qa` or `stage`. When we’re happy with it, turning on the feature toggles in production should be a piece of cake. You can argue that such a small boolean flag can be kept in an environment variable, but updating the environment variable would require a redeployment. :(

### Evaluating Feature Toggles

There are many other use cases for feature toggles. The point that I am trying to highlight is that the evaluation criteria of a feature flag can and will be very diverse. Having that logic in the source code just slows us down. Also, any changes to the evaluation criteria have to go into the source code, then via the build pipeline to publish a fresh deployment. You have to think about those odd days when you toggle a feature on and the world breaks down. Would you be willing for your build pipeline to finish the rollback while a rogue feature is out killing your users’ experience? Heck no. You want the ability to turn things off in an instant.

 > Evaluation of feature toggles is mostly a business use case. It should be handled as a configuration and not as code.

We can solve any problem by introducing an [extra level of indirection](https://en.wikipedia.org/wiki/Fundamental_theorem_of_software_engineering).

## Feature Toggle Implementation

To solve this, we’ll delegate the responsibility of managing the lifecycle of feature toggles to an external service. There are two popular implementations for feature flags:

1. [Flagsmith](https://flagsmith.com/)
1. [Launch Darkly](https://launchdarkly.com/)


There are many others, but their underlying methods of integration are roughly the same.

Any feature flag service has three main constructs. First, a way to initialize the client SDK which would involve passing the `API-key`. Second, a way to identify the user who will then be used for the flag evaluation. Lastly, a way to get the value of the feature flag.

 > We should not couple our implementations to that of an external provider. This is literally abstraction 101!

So, we will create a very thin layer of abstraction. This will allow us to write components without worrying too much about feature toggles. It will also allow us to change to a different feature flag provider without much hassle.

In this article, we will focus on Flagsmith React. Let's get cracking!

### Setting up Flagsmith

Head over to [Flagsmith](https://app.flagsmith.com/signup) and create an account. We're going to create an Organization and a Project.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image14_f461a5ef8bb19125fcc670019c3dbfb0.png" alt="Creating a project in Flagsmith."/><figcaption>Creating a project in Flagsmith</figcaption></figure>

Next, we will create a simple boolean feature flag to start:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image5_bc982f4f8d9cff5f311973a232a3ce1e.png" alt="Creating feature toggles in Flagsmith."/><figcaption>Creating a feature flag in Flagsmith</figcaption></figure>

Then, we will create a sample app [using create-react-app ](https://code.pieces.app/blog/alternatives-to-create-react-app)and add `react-native-flagsmith` as a dependency. That's all we need!

To start, we will create our own `Provider` using `provider-pattern` to encapsulate `flagsmith`. This should look like this:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image2_6c7691a41a28fb5e4d89cab0ce8fd9fc.png" alt="A Flagsmith code snippet."/><figcaption>Feature flag provider</figcaption></figure>

[Save this code](https://user-a00e97da-3485-43fd-bbec-75dcb17f675d-fhcmbheklq-uc.a.run.app/?p=ff444e9b4b)[ ](https://user-a00e97da-3485-43fd-bbec-75dcb17f675d-fhcmbheklq-uc.a.run.app/?p=ff444e9b4b)

`REACT_APP_FLAGSMITH_ID` is a client-specific id that you can use on the URL when you look at features or under environment settings. The default environment is development. In an actual production setup, we will have multiple environments. This way, you can control which features are on/off across different environments.

There are three things that we are doing here. One, we are allowing Flagsmith to identify the user. For the sake of simplicity, we have mocked the user information; in the real world, we would fetch this user information from some API. We are passing this information to Flagsmith so that we can create [user segments](https://docs.flagsmith.com/basic-features/managing-segments) in the future. This allows us to dynamically enable/disable features for certain users based on their attributes. (We’ll get to this later.)

The second thing we are doing is fetching all of the flags that are enabled for this environment. As we have also identified the user before fetching the flags, the response of `getAllFlags` is going to be enabled/disabled flags for the identified user.

The last thing we are doing here is setting the flag data in a map that can be used by the consumers.

Let's go back a little to this piece of code:

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image11_5983f7956954dcb3c669cff4a33414b2.png" alt="A React code snippet with feature toggles."/><figcaption>New feature toggle</figcaption></figure>

[Save this code](https://user-a00e97da-3485-43fd-bbec-75dcb17f675d-fhcmbheklq-uc.a.run.app/?p=cb224bbc9c)

Every component where we do the feature flag evaluation is going to have a similar signature:

```
flag === true ? compA : compB1
```

So, the skeleton is duplicated. We end up with unnecessary wrapper components just to branch out. Let's abstract that out in a small utility component.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image4_ebb9c408996bc342ca468de3370370db.png" alt="An abstracted utility component."/><figcaption>Feature toggle</figcaption></figure>

[Save this code](https://user-a00e97da-3485-43fd-bbec-75dcb17f675d-fhcmbheklq-uc.a.run.app/?p=e39a41942f)

All we are doing here is wrapping up the evaluation of feature flags for React. We already have a context provider that has all of the flags, and we’ve added a context consumer to consume those values. The rest is self-explanatory.

Let's see how this all stitches together.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image7_6e711f90733695f1c6533d081f928f57.png" alt="A React code snippet that demonstrates feature toggles with Flagsmith."/><figcaption>Everything together</figcaption></figure>

[Save this code](https://user-a00e97da-3485-43fd-bbec-75dcb17f675d-fhcmbheklq-uc.a.run.app/?p=331f479f5d)

The wrapper component `FeatureToggle` makes it easy to add `Active/InActive` components. So at any point in [the DOM](https://code.pieces.app/blog/understanding-dom-and-virtual-dom-and-how-they-work-with-react), if we feel like adding a branch, all we do is add the `FeatureToggle` component. The rest of the code is isolated from all of the Flagsmith code.

_As everything is encapsulated, for local environments we can easily switch to using a stub service for feature toggles. I will leave that to your imagination._

The real benefit of a feature flag provider is that we can enable/disable flags for certain users. We had parked this a while back— let's pick it back up.

## Implementing User Segmentation for Feature Toggles

 > User segmentation is the process of separating users into distinct groups or segments based on shared characteristics.

Let's take an example wherein we want to enable our feature only for users based in India. Assuming we have the country information as a part of the identification process, this should be straightforward. All we need to do is to create a user segment in Flagsmith.

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image3_32b9eda62be18ec8020332a250b865af.png" alt="Creating a user segment in Flagsmith."/><figcaption>Creating a user segment</figcaption></figure>

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image12_1040501d2ba016df82b2f31f89855133.png" alt="Editing a user segment in Flagsmith."/><figcaption>Enabling a feature for a user segment</figcaption></figure>

Now even if the feature is disabled globally, the flag would resolve to `true` for all of the users in that user segment. Isn't that cool? And we didn't have to touch a single line of code!

What about those use cases where you don’t have the required attributes to add to Flagsmith for identification? Let’s say we want to enable a feature for all users whose age is `<18`. As we do not have age as an attribute, we can’t create a segment out of it. This can be achieved as a choreography in two steps. Assuming we have a way to know the age of a particular user that we fetch using our API, all we need to do is update this line of code:

```
await flagsmith.identify(user.id, {
email: user.email,
country: user.country,
age: user.age
});
```

The primary key for a user in Flagsmith is the first attribute of the `identify` method. Anytime we add additional traits, Flagsmith auto-merges the identified user. The second step would be to add a user segment and then update the feature flag accordingly.

This should cover the majority of use cases. If you want to perform A/B testing based on the volume of users, that's easy to configure as well. Have a read through the [A/B testing](https://docs.flagsmith.com/advanced-use/ab-testing) documentation.

## [With Great Power Comes Great Responsibility](https://en.wikipedia.org/wiki/With_great_power_comes_great_responsibility)

Feature flags in React have a tendency to multiply rapidly, particularly when they are first introduced. They are useful and cheap to create, so we often create many. Feature toggles require a robust engineering process, solid technical design, and mature toggle life-cycle management. Without these three key considerations, the use of feature toggles can be counter-productive.

If you don't think this can happen, read about [Knight Capital Group's $460 million dollar mistake](https://dougseven.com/2014/04/17/knightmare-a-devops-cautionary-tale/).

Remember that the main purpose of toggles is to perform releases and experiments with minimum risk. Once a release is complete, toggles need to be removed. In order to keep the number of feature flags manageable, a team must be proactive in removing feature flags that are no longer needed. Some teams have a rule of always adding a toggle removal task to the team's backlog when a toggle is first introduced. We can also apply a lean approach to reducing inventory by placing a limit on the number of feature flags a system is allowed to have at any one time. Once that limit is reached, if someone wants to add a new toggle they will first need to do the work to remove an existing flag.

**References:**

- [Feature Toggles, aka Feature Flags](https://martinfowler.com/articles/feature-toggles.html)
- [Trunk-based Development](https://harness.io/blog/trunk-based-development)
- [Continuous Integration](https://www.atlassian.com/continuous-delivery/continuous-integration)