Using Feature Flags in React

Feature flags are a technique used in software development to enable or disable certain features of an application. They allow developers to control the release of new features or modifications to existing features, providing a way to gradually roll out new functionality or experiment with different versions of a feature. Feature flags also enable developers to quickly turn off features if something goes wrong or if a feature needs to be temporarily disabled. This can help reduce the risk of deploying new code, increase agility, and improve the overall quality of the software.

In this tutorial, we show how to use AppFlags to implement feature flags in your React application.

Add the AppFlags React SDK to your project

Install the appflags-react dependency in your project.

For example, if you are using npm:

npm install appflags-react

Initialize AppFlags in your app

Initialize the AppFlags client as soon as your application launches for the best performance. The client initialization is async and will not block your application from loading.

import AppFlags from "appflags-react";

const user = {
    key: "UNIQUE_USER_KEY" // some string unique to the user
}
AppFlags.initialize("YOUR_CLIENT_KEY", user);

Retrieve a feature flag using a React hook

Inside a React component, use the useFlag hook to retrieve a feature flag.

import {useFlag} from "appflags-react";

function ExampleComponent() {
    const flag = useFlag("flag_key");
}

The AppFlags client takes up to 100ms to initialize on page load. Until initialized, the useFlag hook will return undefined. Once initialized, useFlag returns the flag immediately. This is fast enough to be imperceptible to your users.

Example: Using a feature flag to enable a new feature

A common use of feature flags is toggling on a new feature.

Below is an example React component that uses a feature flag named new_feature to toggle a new feature.

function ExampleComponent() {
    const newFeatureFlag = useFlag("new_feature");
    
    if (newFeatureFlag && newFeatureFlag.value) {
        return <NewFeature/>
    } else {
        return null;
    }
}

Example: Using a feature flag to switch between an old and new version of a feature

You can use flags to toggle between old and new versions of a feature.

Below is an example component that uses a feature flag named show_new_version to switch between an old and a new version of a feature.

function ExampleComponent() {
    const showNewVersionFlag = useFlag("show_new_version");

    if (showNewVersionFlag === undefined) {
        return null;
    }

    if (showNewVersionFlag.value) {
        return <NewVersion/>
    } else {
        return <OldVersion/>;
    }
}

Example: Using a feature flag with a data payload to configure your app

Feature flags can also contain data payloads that you can use to configure your app.

Below is an example component that uses a feature flag named button_text to set the text for a button.

function ExampleButton() {
    const buttonTextFlag = useFlag("button_text");
    
    return (
        <button>{buttonTextFlag?.value}</button>
    );
}

Example project

An example project for using AppFlags in React can be found here: https://github.com/AppFlags/example-react

Conclusion

As you can see in these examples, feature flags are a powerful tool that you can use to control the release of new features or modifications to existing features in your React application.

AppFlags Blog

Using Feature Flags in React