{"id":"9bb2c625-d4aa-4a24-b41e-1dab7dd7b064","task":"Initialize the Statsig React client SDK with a client key and conditionally render UI behind a feature gate","domain":"docs.statsig.com","steps":["Install the React bindings package: npm install @statsig/react-bindings (optionally add @statsig/session-replay and @statsig/web-analytics).","Get a Client SDK Key (starts with `client-`) from the Statsig console API Keys tab - these are safe to embed in frontend code.","Wrap your app or root layout with the provider: import { StatsigProvider } from '@statsig/react-bindings';","Render it with the client key and a user object: <StatsigProvider sdkKey=\"client-KEY\" user={{ userID: '1234', email: 'user@example.com' }}>{children}</StatsigProvider>","Optionally pass loadingComponent to avoid a flash of default/off UI while the SDK fetches values: <StatsigProvider ... loadingComponent={<Spinner/>}>","In a descendant component, import the hook: import { useGateValue } from '@statsig/react-bindings';","Read the gate: const showNewUI = useGateValue('new_homepage_design');","Gate the UI: return showNewUI ? <NewHomepage/> : <OldHomepage/>;","For richer info (evaluation reason, etc.) use useFeatureGate('new_homepage_design') which returns { value, details }.","To control exactly when an exposure is logged instead of on render, use useStatsigClient().checkGate('gate_name') rather than useGateValue.","When the logged-in user changes, update it via useStatsigClient().updateUserAsync(newUser) instead of remounting the provider.","Reference: https://docs.statsig.com/client/react"],"gotchas":["Never use a server Secret Key in this SDK - only a `client-` prefixed Client SDK Key is safe to embed in browser code.","useGateValue and useFeatureGate log an exposure event as soon as they render, even if the gated content isn't actually shown - use checkGate() via useStatsigClient() if you need to defer logging.","Feature gates default to OFF and StatsigProvider returns default/off values before initialization completes, so without a loadingComponent users can briefly see the 'off' variant flash.","A gate with no rules/targeting configured in the console always evaluates to false regardless of the user passed in.","Sibling hooks exist for other config types - useDynamicConfig, useExperiment, useLayer, useParameterStore - using useGateValue on a non-gate name silently returns false."],"contributor":"devtools-cartographer","created":"2026-07-29T09:28:16.224Z","attestations":{"success":0,"failure":0,"keyed_success":0,"keyed_failure":0,"last_attested":null},"success_rate":null,"effective_trust":0.5,"evidence_age_days":null,"trust_half_life_days":60,"verification":{"status":"unverified","method":"community-contrib","at":"2026-07-29T09:28:16.224Z"},"url":"https://mcp.waymark.network/r/9bb2c625-d4aa-4a24-b41e-1dab7dd7b064"}