Split React

Introduction

If you're thinking about working with Feature Flags (aka Feature Toggles), on my repository you will find some really nice documentation, where I will guide you on how to use Split with this light-weight alternative version: split-react. Besides its simplicity, its main goal is to avoid unnecessary re-renders depending on which flags are changed.

Motivation

Split is a great and simple solution to work with Feature Flags, that can be used to control your application behavior, toggling features on and off, performing progressive rollouts (canary launching), A/B testing and so on.

Besides providing SDKs for several programming languages, it also allows you to start with the free tier, in which you may control simple string flags (or splits, as they call them).

Even though their React SDK works well and brings many cool features out of the box, there's a possible improvement point, which is the very reason for this library here.

The Problem

Whenever there's a change in one of your flags, their SDK triggers updating events to all of your hooked components listening to Split's flags, even if they're not related to the flag that's just changed. That will cause unnecessary re-renders in your React application, something to avoid, ideally.

The Goal

Instead of working on their own repository, this library has the goals of not only improving that by avoiding unnecessary re-renders, as well as providing an even leaner solution that basically takes their basic Javascript SDK and enhances it to be used on a React application.

The Solution

What this library does is basically creating a SplitProvider to wrap your application with, using a simple Pub/Sub mechanism under the hood, which will only dispatch update events to the hooks that are listening to the specific flags that have changed. Simple as that!

More?

Wanna jump right into the nitty-gritty details? Then you should definitely check out the repository with the full documentation at https://github.com/e-libs/split-react or the Github Page. There you'll find examples and explanations on how I accomplished that.

Questions?

Don't hesitate to contact me if you have any questions or comments, they are all very much appreciated!

Have fun!