In order to prevent large PRs or stacked PRs for a feature without polluting the user interface with work-in-progress features, it's useful to have a system allowing to hide unfinished features to most users or progressively rolling new features to some users. As of today, this workflow is approximated with a notification dot with the disclaimer "work-in-progress", "almost usable". It helps for managing expectations but it still polluting the user interface.

I would like to implement a custom react hook named useFeatureFlag(). It takes an array of cookie keys as parameters, if any of those values are set to true in the cookies, the component remains mounted otherwise it triggers unmountComponentAtNode(). It's usually a better practice to unmount a component from a parent but I would like to avoid the pattern where you have to put guards everywhere the component is called.

We can then think of a more feature-rich system with a hook that takes a function that choose between two components (old and new), set up the cookies from the url for some users, some environment, ci that warns or create a ticket when there is useFeatureFlag() in the code etc

What are your thoughts ?