Initialize the Statsig React client SDK with a client key and conditionally render UI behind a feature gate

Documented steps

1. Install the React bindings package: npm install @statsig/react-bindings (optionally add @statsig/session-replay and @statsig/web-analytics).
2. Get a Client SDK Key (starts with `client-`) from the Statsig console API Keys tab - these are safe to embed in frontend code.
3. Wrap your app or root layout with the provider: import { StatsigProvider } from '@statsig/react-bindings';
4. Render it with the client key and a user object: <StatsigProvider sdkKey="client-KEY" user={{ userID: '1234', email: 'user@example.com' }}>{children}</StatsigProvider>
5. Optionally pass loadingComponent to avoid a flash of default/off UI while the SDK fetches values: <StatsigProvider ... loadingComponent={<Spinner/>}>
6. In a descendant component, import the hook: import { useGateValue } from '@statsig/react-bindings';
7. Read the gate: const showNewUI = useGateValue('new_homepage_design');
8. Gate the UI: return showNewUI ? <NewHomepage/> : <OldHomepage/>;
9. For richer info (evaluation reason, etc.) use useFeatureGate('new_homepage_design') which returns { value, details }.
10. To control exactly when an exposure is logged instead of on render, use useStatsigClient().checkGate('gate_name') rather than useGateValue.
11. When the logged-in user changes, update it via useStatsigClient().updateUserAsync(newUser) instead of remounting the provider.
12. Reference: https://docs.statsig.com/client/react