Using Split Flags with React to Control Feature Deployments

Split flags, feature flags, or toggles are a powerful technique to allow teams to modify system behavior without changing code. Implementing Split flags as a pattern is a way to manage code complexity and deliver new features to users using CI/CD (continuous integration/continuous delivery) pipelines, reducing the time to value and decreasing the risk of deploying buggy, error-ridden code to production.

There are 4 different types of Split flags for different use cases:

1. Release flags: These are temporary Split flags, providing developers the ability to ship untested code as new features that might never be turned on. It also allows in-progress code (developed as part of a feature branch) to be merged back into the master branch or control branch before the CI/CD runs. 
2. Experiment flags: These flags are utilized to perform A/B or multivariate testing. This is a highly dynamic flag and is only functional until the experiment result are generated before the flag is removed
3. Ops flags: These flags are used to control operational elements of the software application’s behaviors. These flags are usually short-lived and can be introduced when rolling out a new feature that has unclear performance implications, providing the team the ability to disable this feature very quickly after the deployment has completed.
4. Permission flags: These flags are generally long-lasting and are used to manage the features to specific users such as a feature that only premium users can access.

3 ways to implement Split/feature flags inside react projects:

Split flags are used as a part of deploying software updates via CI/CD pipelines without disrupting existing functionality. There are different ways to implement feature flags in your React app. We’ll review three of them:

1. Create the Split flags method yourself from scratch
2. Use open-source libraries
3. Use a cloud-based solution (Split flag as a service)

Create the Split flags method yourself from scratch

You can create your own Split flag method, for free, and switch flags on and off directly in JavaScript. Let’s dive into this method creating a simple use case.

1. Adding new feature flags

You need to create a React project using the create-react-app command or following the commands:

npx create-react-app new-app
cd new-app
npm start

Once you have your project created the first step will be to create a splitFlag.js file with an array of JSON objects where we specify the following format

[{
	name: 'feature A',
	description: 'New experimental feature',
	active: false
}]

Each Split/feature flag must have a unique name that refers to the feature name, usually in camelCase format, a short description of the functionality, and an active property to determine whether the toggle is on or off. 

 We can use localStorage in order to store the split/feature flags. Define a function to initialize the Split Flags, called initFeatures. Then call this function in the startup logic we use to start the application. In this case, the startup logic is the App function as shown in the code snippet below:

const initFeatures = () => {
    if (!localStorage.getItem('flags')) {
    	localStorage.setItem('flags', JSON.stringify([
       	 {name: 'admin', description: 'Feature to admin the application', active: false},
       	 {name: 'readOnly', description: 'Show only read-only view, active: false},
       	 {name: 'reports', description: 'Enable Reports feature', active: false}
   	 ]));
    }
};
 
const App = () => {
    initFeatures();
    ...
}

2. Create the Split/Feature Flag component in our App.

We need to create a High Order Component (HOC) to use the Split/Feature flags in our app. This HOC will receive two props: name and children.

The name will be our Split/Feature flag name.

The children will be the component we want to render.

In this new HOC, the first thing we need to do is to get the Split/Feature Flags from our localStore. Using the name we passed via Props, we can check whether or not the Flag is active.

If the flag is active (it means the active property is set to true) we render the children otherwise we render null:$cod

const Feature = ({name, children}) => {
    const features = JSON.parse(localStorage.getItem('flags'));
    const feature = features.find(feature => feature.name === name);
 
    if (feature && feature.active) {
   	 return children;
    }
 
    return null;
};
 
export default Feature;

3. Using the Feature Component in our app.

Once we have our Feature Component in place we can use it by importing it in the file we want and passing the name of the component using our Split/Feature flag pattern, like the following code snippet:

import Feature from './feature';
 
const App = () => {
 initFeatures();
 return (
    <div className='App'>
 	 <Feature name='admin'>
   	 <Admin />
 	 </Feature>
    </div>
 );
};
export default App;

Implement Split/Feature flag with Open Source in React

There are several open-source libraries you can use to implement the Split/Feature flag. These can be found on the npm website by searching for the term: “feature flag.” This will lead you to different open-source packages that have their own readme that show you how to use them. Here are a few examples of these packages:

• React-Feature-Flags
• Feature-Toggle-API
• React Unleash Flags
• Flagged

The advantages of using open-source libraries are they are free and easy to use, and quick to set up. You will need to consume the libraries into your application, and call the functions created, passing and return variables to understand the state of your feature flag. 

However, there are also disadvantages of open-source feature flag libraries, such as the fact that maintenance and improvements are not guaranteed. Additionally, the libraries might not suit your needs completely. So you might end up needing to refactor to add features specific to your application.

Implement Split/Feature flag with a cloud-based solution

There are cloud-based solutions that allow you to implement the Feature/Split flag pattern in your React application, such as split.io, which is a service that provides React integration. Please review this video to implement it in your project.

The advantage of using a cloud-based solution is that we have a user interface that provides an easy way to manage our Feature flag, we can turn it on/off remotely and the changes will be reflected in the application without creating a new version of it.

On the other hand, we have to adapt our codebase to consume the Cloud Service Solution. This service is also not free. 

Conclusion

Feature toggling is a powerful technique that allows features within a frontend to be integrated often and early already during development. It reduces the risk of big releases and embraces customer feedback. However, like anything else, it is not a silver bullet and requires discipline and lightweight processes across all parts of the organization. Knowing when and how to apply feature toggles is crucial. We recommend you consider adopting feature toggling with your team.