JSInterview30:Part 2-Feature flag based development

Title image

Introduction

One of the challenging questions asked in the Frontend interview rounds of Atlassian is:

How to create a feature flag component in React that consumes a feature’s API and conditionally renders UI based on the value of the feature

Feature flags are a powerful technique that allows developers to modify the behavior of a software system without changing the code. They can be used for various purposes, such as testing new features, performing A/B experiments, or controlling access to premium functionality.

In this article, we will learn how to create a feature flag component in React.

Steps

1. Create a React project
We will use create-react-app to bootstrap our React project. Run the following command in your terminal:

npx create-react-app react-feature-flag

2. Create a feature flag hook

We will create a custom hook that will allow us to access and update the feature flag values stored in the local storage. Local storage is a simple and convenient way to store key-value pairs in the browser

To create the feature flag hook, create a new file called “FeatureFlag.js”:-

import React, { useState, useEffect } from "react";

// A custom hook to access and update the feature flag values in the local storage
const useFeatureFlag = (key, defaultValue) => {
  // Get the initial value from the local storage or use the default value
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : defaultValue;
  });

  // Sync the state with the local storage
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  // Return the state and a setter function
  return [value, setValue];
};

// A feature flag component that renders its children only if the feature flag is enabled
const FeatureFlag = ({ feature, children }) => {
  // Use the feature flag hook to get the value and the setter function
  const [enabled, setEnabled] = useFeatureFlag(feature, false);

  // Render a checkbox to toggle the feature flag value
  return (
    <div className="feature-flag">
      <label>
        <input
          type="checkbox"
          checked={enabled}
          onChange={(e) => setEnabled(e.target.checked)}
        />
        {feature}
      </label>
      {/* Render children only if the feature flag is enabled */}
      {enabled && children}
    </div>
  );
};

export default FeatureFlag;

In this code, we are using the `useFeatureFlag` hook to get the value and the setter function for the feature flag. We are also rendering a checkbox to toggle the feature flag value. This is for demonstration purposes only, you can use any UI element you want to control the feature flag value. Finally, we are using a conditional rendering to render the children of the component only if the feature flag is enabled.

4. Use the feature flag component in the app

Now that we have a feature flag component, we can use it in our app to show or hide different features. For example, let’s say we have two features that we want to test: a banner and an info message. We can use the feature flag component to wrap them and give them names, such as `show-banner` and `show-info-message`. To do that, open the App.js file and replace the code with the following:

import React from "react";
import FeatureFlag from "./FeatureFlag";
import "./App.css";

// A banner component that displays a welcome message
const Banner = () => {
  return <div className="banner">Welcome to our awesome app!</div>;
};

// An info message component that displays a random joke
const InfoMessage = () => {
  const joke =
    "What do you call a fish wearing a bowtie? Sofishticated.";
  return <div className="info-message">{joke}</div>;
};

// The app component that uses the feature flag component
const App = () => {
  return (
    <div className="app">
      {/* Use the feature flag component to show or hide the banner */}
      <FeatureFlag feature="show-banner">
        <Banner />
      </FeatureFlag>
      {/* Use the feature flag component to show or hide the info message */}
      <FeatureFlag feature="show-info-message">
        <InfoMessage />
      </FeatureFlag>
    </div>
  );
};

export default App;

In this code, we are using the FeatureFlag component to wrap the Banner and the InfoMessage components and give them feature flag names.

You can see that there are two checkboxes with the feature flag names, but no features are displayed. This is because the default values of the feature flags are false. If you check the checkboxes, you should see the features appear.

Project Demo

You can also see that the feature flag values are persisted in the local storage. If you refresh the page, the features will remain the same as before.

Demo link:- StackBlitz

Conclusion

In this article, we learned how to create a feature flag component in React without flagsmith, using only local storage and some custom hooks. We also saw how to use the feature flag component to show or hide different features in our app.