An alternative React solution for Split.io
npm install split-react```
npm install split-react
or
``
yarn add split-reactMotivation
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 proving 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 of this library here.
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.
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.
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!
Here's a simple usage of split-react:
> https://github.com/emarques3/test-split-react
There you'll find two basic usage of this lib, with useSplit hook, and withSplit HOC.
1. Wrap your app with the SplitProvider`tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { SplitProvider } from 'split-react';
import { config } from './split/config';
ReactDOM.render(
document.getElementById('root')
);
`authorizationKey
2. Use your Split config, the only required fields are the and key`typescript
import { SplitConfig } from 'split-react';
const key = '[SOME_USER_KEY]';
export const config: SplitConfig = {
core: {
authorizationKey: '[YOUR_SPLIT_KEY]',
key,
},
};
`App.tsx
3. In this example, is calling this Test.tsx, just for the sake of separating the code
`tsx
import React from 'react';
import './App.css';
import { Test } from './components/Test';
// import TestHOC from './components/TestHOC';
function App() {
return (
export default App;
`
4. Call the useSplit hook to evaluate your flag
`tsx
import React from 'react';
import { useSplit } from 'split-react';
export const Test = ({ splitName }: { splitName: string }) => {
const split = useSplit(splitName, false);
const color = split ? '#00FF00' : '#FF0000'
return (
5. If you prefer, you may use the HOC instead of the Hook, as exemplified with
TestHOC component. To do so, simply uncomment those lines above (on App.tsx`) to start using it.Now your React application will avoid unnecessary re-renders on components hooked with Split flags.