\n
\n );\n}\n```\n\nThis approach eliminates loading states and removes the initial render's dependency on the flags API.\n\n### Next.js App Router example\n\nFor Next.js applications using the App Router (Next.js 13+), you can pre-fetch flags in Server Components and pass them to client components:\n\n```typescript\n// app/layout.tsx (Server Component)\nimport { ReflagClient as ReflagNodeClient } from \"@reflag/node-sdk\";\nimport { ClientProviders } from \"./providers\";\n\nasync function getBootstrapData() {\n const serverClient = new ReflagNodeClient({\n secretKey: process.env.REFLAG_SECRET_KEY!\n });\n await serverClient.initialize();\n\n // In a real app, you'd get user/company from your auth system\n const bootstrapData = serverClient.getFlagsForBootstrap({\n user: { id: \"user123\", name: \"John Doe\", email: \"john@acme.com\" },\n company: { id: \"company456\", name: \"Acme Inc\", plan: \"enterprise\" },\n other: { source: \"web\" }\n });\n\n return bootstrapData;\n}\n\nexport default async function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n const bootstrapData = await getBootstrapData();\n\n return (\n \n \n Start a Huddle
\nMax participants: {config.payload?.maxParticipants ?? 10}
\nVideo quality: {config.payload?.videoQuality ?? \"standard\"}
\n \n\n
\n );\n}\n```\n\nThis App Router approach leverages Server Components for server-side flag fetching while using Client Components only where React state and hooks are needed.\n\n## `Start a Huddle
\nMax participants: {config.payload?.maxParticipants ?? 10}
\nVideo quality: {config.payload?.videoQuality ?? \"standard\"}
\n \nLoading…
;\n }\n\n return flags.map((flag) => (\n \n ));\n}\n```\n\nBy default, `useSetOptIn()` changes the opt-in for the current user, so the current context must include a `user.id`. To manage the current company's opt-in instead, pass `scope: \"company\"`; the context must then include a `company.id`.\n\nUser and company opt-ins are managed independently. Setting `optedIn` to `false` removes the opt-in only for the selected scope. For example, cancelling a user's opt-in does not change the company's opt-in for the same flag.\n\n`setOptIn` returns a promise so you can wait for the new membership state to be synchronized. On success, it resolves after the refreshed flag state has been applied locally, the requested membership change has been confirmed, and subscribers have been notified when flags change. React may not have committed the resulting render yet.\n\nThe promise resolves to a `Response`, or `undefined` if skipped due to invalid input, offline mode etc. Check `response?.ok` for success.\n\n`useOptInFlags()` returns `{ flags, isLoading }`. With `ReflagBootstrappedProvider`, it fetches opt-in metadata on first use and reports `isLoading: true` until that refresh succeeds or fails.\n\nIf fetching opt-in metadata fails, loading ends without exposing an error. Call `client.refresh()` on the client returned by `useClient()` to retry.\n\nWith a regular `ReflagProvider`, opt-in metadata arrives as part of the normal initial flags request, so `useOptInFlags().isLoading` remains `false`. Use the general `useIsLoading()` hook or the provider's `loadingComponent` for that initial loading state.\n\n`useOptInFlags()` also supports Suspense. It respects the provider-level `suspense` option, or you can enable it for only this hook with `useOptInFlags({ suspense: true })`. While required opt-in metadata is loading, the nearest `\n \n
;\n}\n```\n\n### `useRequestFeedback()`\n\n`useRequestFeedback()` returns a function that lets you open up a dialog to ask for feedback on a specific feature. This is useful for collecting targeted feedback about specific features as part of roll out. See [Automated Feedback Surveys](https://docs.reflag.com/product-handbook/live-satisfaction) for how to do this automatically, without code.\n\nWhen using the `useRequestFeedback` you must pass the flag key to `requestFeedback`.\nThe example below shows how to use `position` to ensure the popover appears next to the \"Give feedback!\" button.\n\n```tsx\nimport { useRequestFeedback } from \"@reflag/react-sdk\";\n\nfunction FeedbackButton() {\n const requestFeedback = useRequestFeedback();\n return (\n \n \n \n \n
\n );\n}\n```\n\n### `useClient()`\n\nReturns the `ReflagClient` used by the `ReflagProvider`. The client offers more functionality that\nis not directly accessible thorough the other hooks.\n\n```tsx\nimport { useClient } from \"@reflag/react-sdk\";\n\nfunction LoggingWrapper({ children }: { children: ReactNode }) {\n const client = useClient();\n\n console.log(client.getContext());\n\n return children;\n}\n```\n\n### `useIsLoading()`\n\nReturns the loading state of the flags in the `ReflagClient`.\nInitially, the value will be `true` if no bootstrap flags have been provided and the client has not be initialized.\n\n```tsx\nimport { useIsLoading } from \"@reflag/react-sdk\";\nimport { Spinner } from \"./Spinner\";\n\nfunction LoadingWrapper({ children }: { children: ReactNode }) {\n const isLoading = useIsLoading();\n\n if (isLoading) {\n return