DEV Community

Cover image for Using LaunchDarkly's Feature Flags with React to Display Real Time Information
Roseanna Mcfarlane
Roseanna Mcfarlane

Posted on

Using LaunchDarkly's Feature Flags with React to Display Real Time Information

Have you ever needed to update information on a web page on short notice but found the whole process complicated, slow and error prone? Editing the code, re deploying...wouldn't it be great if you could do that in a simple admin console without changing any code?
Well you can with LaunchDarkly!

LaunchDarkly is a service that allows users to easily implement feature flags in their projects. Feature flags can be used to modify user defined features in a running app through the LaunchDarkly admin console.

This is incredibly powerful in cases where you would like to add a feature to a product but want to control it after deployment, avoiding the need for a re-deploy if you discover things don't go as planned.

Gif of girl failing to knock down all dominoes

Feature flags can also be used to roll out features to a specified percentage of users or users that meet certain requirements, allowing for super simple canary launches.

Aside from devops and feature rollouts there are many other real world use cases for LaunchDarkly.
In this post we’ll cover how you could use LaunchDarkly to display the results of a certain well-known sporting event (who shall not be explicitly named, but it's related to something Super 🏈) where there is no available API and the information needs to be manually updated.

LaunchDarkly helps you decouple deployment from release and also provides a mechanism for non-technical people to manage the behaviour of your running service.

gif of excited lady

So grab a drink and sit down with me as we explore the power of feature flags.
This example uses Create React App to spin up an empty project and Netlify for hosting. ❤️

Let's start with the quickstart tutorial. This takes you through the first steps of creating a feature flag.

Image showing the tutorial sections

First create a feature flag and choose a name. Then choose which application language you plan to use and select the environment it will be used for.

As this example is using React, I chose to use an integration which supports the use of LaunchDarkly with React LD-React.
It follows idiomatic React patterns and uses the websocket LaunchDarkly API so feature flag changes will be pushed to client without the need for a page refresh.

Note

Something to note with the use of the client side SDK is that you MUST manually enable feature flags for use client-side by checking a box in the settings section within the LaunchDarkly admin console. see below Otherwise you may find yourself scratching your head for a while asking yourself 'but whyyyyy?. Well, that's why.

Image of checkbox for enabling client side SDK usage

The code snippet below shows a flag that is a simple boolean variable called showCountDown. It toggles a countdown React component on and off.

{
  this.props.flags.showCountDown ? (
    <H1Title>
      <Countdown date={"Sun, 03 Feb 2019"} />
    </H1Title>
  ) : (
    <div />
  );
}

This second flag is called a multivariate flag. It allows a user to define a number of variations which return a string value rather than a bool.
It has eight variations to represent all the teams competing in the sports event this example was based on. Go the Gliders!

Picture showing the LaunchDarkly admin console with the multi variate flag

Something you may notice when you have your first flag working is the page information is updated without reloading the page. This is great in the event of someone waiting for a page to update without refreshing it regularly. It ensures they will have the correct information immediately.

Gif of man making a rainbow with his hands

Aside from feature flags, LaunchDarkly also provides support for A/B testing and tracking goals.
Being able to display certain info/features for specific groups and then getting analytics on user interactions is very useful.

So go ahead and implement those flags! I would love to hear about how you're using feature flags in your applications.

For a closer look at the project check out the repo here or visit the live version.

Happy hacking.

Discussion (6)

Collapse
mahmoudjbor profile image
MahmoudJbor

Nice article, feature flagging are great, the only issue with these flags, is that in case you have really big features, it will add overhead to manage the code, it will increase the tech dept, because if you release a feature to all customers it will be meatless to have to versions of the same feature and one of them isn't called at all!

Collapse
roseanna profile image
Roseanna Mcfarlane Author

Thank you :) Yes it's true that it comes down to a cost benefit analysis. Ie, Is the use of feature flags worth the added code and overhead. It will be a case by case basis for sure and dependent on the project scope etc.

Collapse
cjoy profile image
Chris Joy

Good read. Btw I think LaunchDarkly uses Server-Sent Events (not WebSockets)

Collapse
thatzacdavis profile image
Zachary Davis

I can't believe you have to manually enable it for client-side usage. Thank you so much!

Collapse
levlaz profile image
Lev Lazinskiy

Hey Zachary, just FYI you can change this in the project setting to make flags available to the client-side by default.

In practice, we see that most users have significantly more backend flags than frontend flags. The main benefit of not sending these to the frontend are it lowers the payload size which makes everything faster.

Collapse
levlaz profile image
Lev Lazinskiy

Thanks for this great overview of LD!