Setting Up Feature Flags with React

Rate this content
Bookmark

As developers, we release features daily – but how do you ensure those features are working properly in production before you release them to all your users? If you ask me, the answer is feature flags! Feature flags are beneficial because they allow you to test your code in production, perform canary releases, and even conduct A/B testing. The power of React makes it easy to implement these flags. We will walk through how to easily create a feature flag in the UI, install dependencies with npm, and implement your feature flag in your react app.

7 min
14 May, 2021

AI Generated Video Summary

This Talk discusses setting up feature flags with React, which allows for controlled rollouts of new features. Feature flags provide more control without touching the source code and can target specific users or types of users. In React, feature flags can be created and configured using Split.io. Different treatments can be applied to determine if a feature should be shown. Feature flagging provides control and flexibility in development.

1. Setting up feature flags with React

Short description:

We're going to talk about setting up feature flags with React today. Let's say I am a front-end developer working on this to-do list app. And right now, users only have the ability to add tasks to the list. And I want to add the ability to delete tasks. And adding this feature requires back-end work as well because we need a new API endpoint. And I don't know if the back-end change is going to be ready in time. But here's what I've done so far. I have this conditional statement set. And by default, the user is not allowed to delete. So this is the current state. And when I'm testing this feature locally, I flip this boolean to true to test stuff out. And once the back-end is ready and I want my users to be able to see the delete button, then I'm just going to push this commit with the boolean equal to true. And right now, this is working.

Hi, everyone. I'm Talia. We're going to talk about setting up feature flags with React today. So I want to start off by setting the stage a little bit. Let's say I am a front-end developer working on this to-do list app. And right now, users only have the ability to add tasks to the list. And I want to add the ability to delete tasks. And adding this feature requires back-end work as well because we need a new API endpoint. And I don't know if the back-end change is going to be ready in time. But here's what I've done so far. I have this conditional statement set. And by default, the user is not allowed to delete. So this is the current state. And when I'm testing this feature locally, I flip this boolean to true to test stuff out. And once the back-end is ready and I want my users to be able to see the delete button, then I'm just going to push this commit with the boolean equal to true. And right now, this is working.

2. Using Feature Flags for Controlled Rollouts

Short description:

Once the back-end is ready, I can push a commit to enable the delete button. Feature flags have various use cases, including testing in prod, kill switches, microservices migration, AB testing, subscription management, Canary releases, and experimentation. Feature flags improve development, testing, and delivery of new features while minimizing risks. They also allow for measuring the impact of changes and providing control over the user experience without code commits.

And once the back-end is ready and I want my users to be able to see the delete button, then I'm just going to push this commit with the boolean equal to true. And what's great about this is that if there's bugs with the back-end API, it's relatively easy for me to temporarily roll back this release. And so what we've created here is just a super basic example of a feature flag. Code deployment from feature release. And we just saw one example of how we want to use this, but there are so many other ways to use feature flags, so we can use them to test in prod, we can use them as a kill switch to turn features off in production that aren't working. You can use them to safely migrate your micro services. If you have a monolith, you can use this to migrate your micro services to micro services. And then you can use this for AB testing, subscription management, Canary releases and experimentation. And why do we care about these use cases? It's because feature flags improve your ability to develop, test and deliver new features while minimizing risks throughout the process. And this is how you measure the impact of your changes. So feature flagging allows you to directly correlate the impact of your changes by pushing information about the feature flags to your internal analytic system. And so by using a feature flag management application, you are able to set who can see which features without ever committing new code. And this is really great for product owners and non-technical people because they can control the user experience without having to ask the developers to commit new code.

3. Implementing Controlled Feature Flags

Short description:

I want to roll out this delete functionality in a controlled way using feature flags. With a feature flagging system, I get more control without touching the source code. I can target specific users or types of users. The treatment controls who can delete tasks. When the treatment is on, the user can delete tasks, and when it's off, they can't.

And so, again, I want to roll out this delete functionality out in a controlled way using feature flags. And so the basic feature flag thing I had previously, that if-else statement, it was fine but if I use a feature flagging system, I get way more control and I don't have to touch the source code. And so I can also, what I can do here is I can target specific users or types of users in split. And so these possible states of what your user can see are called treatments. And so for this demo app, the treatment controls who can delete tasks. And so in our case, when the treatment is on, the user will be able to delete tasks, and when the treatment is off, the user will not be able to delete tasks. And this is what it looks like in each case.

4. Creating and Configuring Feature Flags in React

Short description:

In React, instead of hard-coding the ability to delete, we can create a feature flag. To create a feature flag, log in to Split.io and create a split. Install the necessary dependencies and import the JavaScript SDK. Use the split treatments component to evaluate the feature and the width split factory component to wrap the to-do list component. Differentiate between treatment on and off to determine if the delete option should be shown. Configure the split instance with the user's authentication key. When targeted in the feature flag, the delete buttons will be visible. Set debug to true to view the logs in the console. If the user is not targeted, the delete buttons will not appear. Feature flagging provides control and flexibility in development. For more information, visit split.io.

And so, again, what I had before, this is a really hacky way to do this because I'm just hard-coding whether or not the user can delete. This is actually the right way to do it in React where depending on the value of the prop, you're either going to show the delete button or not show it. And so what we're going to do today is create a feature flag, install the dependencies, and instantiate and use the SDK.

So, to create a feature flag, you're just going to log in to Split. So all you're going to do is go to Split.io, hit create free developer account, and go through that process. And then you'll see on the left pane, you'll see a button that says, create split. And a split is just another name for a feature flag, so you're going to want to name it, give it something uniquely identifiable. And then in my example, I'm saying I want myself and developers to be able to delete, so everyone else gets the default existing behavior of only being able to add tasks.

Next, I'm going to install my dependencies and configure my React app. So after I create my React app with create React app, all I'm going to do is install the following dependency in my root folder. And then I'm going to instantiate and use the SDK. So the first thing I'm going to do is import the JavaScript SDK. So at the top of my component, I'm going to import split treatments and width split factory. So split treatments is a React component that performs feature evaluation, and we're going to use this in our render function. And then the width split factory higher order component is used to wrap the to do list component when I export it. And then I split my render function into two. And the first one. I return the treatment and configuration from split treatments. And in the names prop, I pass in the name of the feature flag that I created from the UI. In the second render function, I created a variable named allow delete that differentiates between treatment on and off. If the treatments on your long laser to see to delete tasks and if the treatment is off, there's no option to delete. And then I have a function called create tasks that gets called in my render function and conditionally renders the delete button. If the allow delete variable is set to true. After the render functions into the configuration that you're going to use to configure your split instance. So what this does is it initializes with split factory, which is the entry point of the library. Each user will have their own authentication key and you can find yours in the ui. So, the key parameter is telling split who the current user is. So in this case, when you run npm start, you're going to see the delete buttons because you're targeted in the feature flag. When you set debug to true, you're able to see all the logs from split in the browser console. You should pay attention to two things here. One is that you can clearly see I'm the person who's getting the treatment. The second is that you can see that the treatment is set to on for me. Now watch what happens when you change the key to a test user who's not in the split. The delete buttons disappear because the user is not targeted. Remember only developers and myself were. Notice in the console logs I clearly see the treatment is off and I'm now getting the default or existing behavior because I am not logged in. I'm logged in as someone who is not targeted. I hope this example was a clear way to see the value of feature flagging. So feature flagging if you have more questions head to split.io and check out some of our blogs and some of our posts.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn