Client-side feature flags with React, FeatureHub and Catch & Release mode

Imagine you are a customer.

Imagine you are in the middle of your checkout flow and suddenly it changes on you, parts of the page update without you having done anything.

Imagine you are configuring a new product in your online store and your workflow changes mid-process leaving you in a state of confusion as to where things have gone. This especially becomes more complicated when your new feature is spread across multiple pages.

Imagine you are in the middle of typing a document, and deep into your thought process, zoned in and the editing experience changes in some key fashion.

Feature flags are wonderful things for de-risking updates, but the mid-workflow update process when it comes to the UI process is often not well tested or understood.

With FeatureHub — open source feature management and experimentation platform — you can resolve this by using Catch & Release mode. It will allow you to stash the feature state updates, providing a consistent feature view in the UI until you release them. It will still alert your code that new feature changes are flowing and you can alert the user of this information. So you can prepare your users and let them know that they are about to switch to a new feature or experience.

Catch & Release also significantly decreases the development time of new features because you don’t have to deal with mid-workflow changes in your application and test for such edge-cases.

Let’s see how can this be done with FeatureHub and Typescript/Javascript SDK in case of a React app

Catch and Release mode means that as updates come into the Feature Repository from your FeatureHub servers, they are “on hold”. Importantly the local Feature Repository has these changes but no events will be triggered for them unless you choose to “release” the changes.

Implementation instructions:

1. Follow our first blog and get yourself up and running with FeatureHub and Typescript/Javascript SDK

2. Add the following code to the initializeFeatureHub() function

What has just happened above?

First two lines allow us to add a listener for the entire FeatureHub repository, which means that if any feature changes its state — it will trigger an event. The key is to remember that this is not for a particular feature but for all of the features registered in the repository for a given environment.

The third line allows us to turn catch & release mode “on” which means feature states won’t be updated unless you tell in your code to “release” those updates.

4. To release feature states and receive the latest updates from the repository, simply add this line:

fhConfig.repository().release();

As an example, you can add a button that will indicate the new state is available and have an onClick function to release the feature state and check for the desired feature to update.

For the full example refer to FeatureHub examples on GitHub

Conclusion

In this blog we have demonstrated a client-side way of implementing feature flags with FeatureHub using Typescript/Javascript SDK + React JS example. Remember that with FeatureHub you have full control of how you want to roll out your features, whether it be “real-time” listener updates, imperative “GET” requests or “Catch & Release” mode.