Create feature flag in React | Atlassian machine coding question

[@sahilsatishkumar]

The actual question they ask is not around React. It's a plain JS library that they are looking for.

[@Learnersbucket]

You can use framework of your choice

[@javascriptworld3443]

@@Learnersbucket But it is JS coding round in Atlassian, also this utility should be in JS so that it can extend to various layer, not just UI layer.

[@ganeshkhirwadkar4127]

Bahut sahi Prashant bhai !

[@riturajsingh2556]

Appreciate the solution. I understand the point of using context to make the feature flags available throughout the app. But I see two drawbacks with this.
1. the api call to fetch the feature flags will happen on any page the user lands on directly, irrespective of whether we are using a feature flag or not on that particular page.
2. imagine a scenario when a user is on a website, a feature flag is toggled from the admin panel. How do we achieve displaying the new feature to the user.
Instead I would suggest using a HOC or a custom useFeatureFlag hook. We can wrap only those components where we need the feature flag api call to happen. Or we can call the hook in files where we need feature-flags to be implemented. This will make sure that the features are fresh enough and the hook can be easily extracted into a separate npm package altogether. Thoughts ?

[@Learnersbucket]

Feature flags are bootstrap data that has to be loaded on the initial load.
It's a simple tradeoff that is agreeable to avoid any security leaks

[@shubhamkumar-jo2vo]

share across the different app -> we need to use cookies and set the domain properly.

[@kshitijvengurlekar1192]

How about using something like react-query to cache which features and enabled/disabled?

[@Learnersbucket]

Works

[@kshitijvengurlekar1192]

@@Learnersbucket Exactly, a more complex version of this problem would be where we have a RBAC and specific action elements are visible / disabled / hidden for users with specific roles

[@anirudhcodes]

Can we load the variables via reverse proxy such as nginx as an alternative? Where in the feature flags get decided on the deployed frontend instance envs

[@Learnersbucket]

On the server-side rendering, you can pull from environment variables. On the client side rendering you have to pull through network calls

[@anirudhcodes]

​@@Learnersbucket ok, for one of the FE apps that was built in angular we used this way to load app-config everytime there is complete page reload and in that nginx api we were getting the config values. So wanted to check if that approach is correct or not to answer in interview

[@Learnersbucket]

@@anirudhcodes not able to understand. Nginx is an Application server, not an API provider.

[@nallaparajuamareshvarma8471]

can anyone tell how to share the feature flag with different apps

[@themeniacs7376]

Great video man

[@Learnersbucket]

Thank you

[@rahul191jain]

To share it with other apps, only solution I guess can be create lib and share it. If you know any other solution please share

[@Learnersbucket]

Yup built an sdk or library

[@guptaankit2791]

@@Learnersbucket We can expose it as a micro-frontend app as well to share with other apps.

[@Learnersbucket]

@@guptaankit2791 microfrontend is an architecture, not a way to share data.
It should not be over used

[@killadasatyaaditya5960]

The sandbox link is not opening

[@Learnersbucket]

will check

[@Shubham-yc6nz]

Why did you used context? Was the question about it. Can we just do this instead?
```
const Feature = ({ feature, children }) => {
const [features, setFeatures] = useState({
default: true,
pro: true,
enterprise: false,
});
useEffect(() => {
// fetch & set feature from an backend API
}, []);
return features[feature] ? {children} : null;
};
export default function App() {
return (

Free Plan
Pro Plan
Enterprise Plan

);
}
```

[@Learnersbucket]

Feature flags should be available throught out the app, thus context

[@vijaynavale3919]

Bhai vo aapke `js interview guide` me custom promise ka solution he, vo aap ne khud se likha tha ki kahi se refer kiya tha ?

[@Learnersbucket]

Referred hai

[@vijaynavale3919]

​@@LearnersbucketAchaa, but vo solution badiya he, kya soch ke likha he maza aagaya dekh ke🙌💯

[@Learnersbucket]

@@vijaynavale3919 thanks 😊

[@mirage4731]

Is this really asked for SDE1 role ? I am scared

[@Learnersbucket]

@@mirage4731 no sde2