React - Feature Flags

While developing a new feature in a module of our application and it causes some bugs in production having loss to your application users. So the only way without feature flag will be you need to make code changes and deploy the application again. Which might have already affected your users. But if feature flags implementation, you can turn off that feature alone from DB or configs without any re-deployments.
This can also help in implementing security matrix i.e in a particular screen we might have many actions like add, update, delete, etc. We can control which feature the specific user can access and which can not be accessed will not be rendered in the UI.

Let’s try to understand with an example.

let access_prev = {

  "product": ["view", "add", "delete", "edit"]

}

export const access_prev

This is access privilege config we have from DB.

Now we have a products screen.

import react from "react";
const screenName = "product"
function Products(){
return(
<h1>Product list</h1>
<FeatureAccess screenName = {screenName} action = "add">
  <Button onClick={handleAdd}>
    Add new
  </Button>
</FeatureAccess>
// render your list of products

)}
export default Products

HOC for Feature Access

export function FeatureAccess(screenName: string, action: string, children:any){
  // import the access prev list 
  if(access_prev.hasOwnKey(screenName){
    // if the screen name is present in the list…