feat: useUiFlag shorthand hook

[Tymek]

About the changes

Instead of this:

const { uiConfig } = useUiConfig();
const myFlag = Boolean(uiConfig?.flags?.myFlag)

we can have this:

const myFlag = useUiFlag("myFlag")

With the same type safety, less verbose and more purposeful code.

Important files

• frontend/src/hooks/useUiFlag.ts

Discussion points

Can we in the future share flags between frontend and backend? Right now adding a new flag has to be done in 4 different places (backend flag keys list, backend flags defaults config, backend experimental server options, frontend type).

Most ergonomic option is to pull config directly from Unleash.
Issue, based on previous user feedback: #4565
Internal feature request document: docs.google.com/document/d/1Sx0q...

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
unleash-monorepo-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 8, 2023 9:42am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
unleash-docs	⬜️ Ignored (Inspect)	Visit Preview		Sep 8, 2023 9:42am

[nunogois]

I like this 👍 Maybe it would be clear enough to have it as useFlag.

[FredrikOseberg]

I like this 👍 Maybe it would be clear enough to have it as useFlag.

useFlag is already used in our React SDK. Probably best to not conflate the terminology. Also, it fits with the current domain model, I don't need to map useUiFlag to uiFlags in the config mentally, because they are both using the same name for the same concept.