How to use feature flags in React

Feature flags in React should feel like a natural part of your component tree — not a bolted-on afterthought. This guide shows how to integrate Flagify into a React application using hooks and the context provider.

Install

npm install @flagify/react

Setup the provider

Wrap your app with FlagifyProvider. This initializes the SDK and makes flag evaluation available to all child components.

import { FlagifyProvider } from '@flagify/react';

function App() {
  return (
    <FlagifyProvider
      projectKey="my-project"
      publicKey={process.env.NEXT_PUBLIC_FLAGIFY_KEY}
      options={{ realtime: true }}
    >
      <Router />
    </FlagifyProvider>
  );
}

The provider handles connection, caching, and real-time updates via SSE. Components below it can evaluate flags without any additional setup.

Evaluate flags with hooks

Boolean flags

The most common case — show or hide a feature:

import { useFlag } from '@flagify/react';

function SettingsPage() {
  const showAdvanced = useFlag('advanced-settings');

  return (
    <div>
      <BasicSettings />
      {showAdvanced && <AdvancedSettings />}
    </div>
  );
}

useFlag is reactive. If the flag value changes (via streaming sync), the component re-renders automatically.

Multivariate flags

When you need more than on/off:

import { useVariant } from '@flagify/react';

function OnboardingFlow() {
  const variant = useVariant('onboarding-experience');

  switch (variant) {
    case 'streamlined':
      return <StreamlinedOnboarding />;
    case 'guided':
      return <GuidedOnboarding />;
    default:
      return <ClassicOnboarding />;
  }
}

Remote config values

Get typed configuration at runtime:

import { useFlagValue } from '@flagify/react';

function SearchPage() {
  const maxResults = useFlagValue('search-max-results', 20);

  return <SearchResults limit={maxResults} />;
}

The second argument is the fallback value. If the flag does not exist or the SDK cannot reach the server, the fallback is used.

Declarative rendering

For simple show/hide cases, the Feature component is more readable than a hook + conditional:

import { Feature } from '@flagify/react';

function Dashboard() {
  return (
    <div>
      <MetricsPanel />
      <Feature flag="analytics-widget">
        <AnalyticsWidget />
      </Feature>
    </div>
  );
}

Accessing the SDK client

For advanced use cases, access the underlying Flagify client directly:

import { useFlagifyClient } from '@flagify/react';

function DebugPanel() {
  const client = useFlagifyClient();

  return <pre>{JSON.stringify(client, null, 2)}</pre>;
}

Waiting for flags to load

Use useIsReady to check if the initial flag sync is complete before rendering flag-dependent UI:

import { useIsReady, useFlag } from '@flagify/react';

function FeatureGate() {
  const isReady = useIsReady();
  const showBeta = useFlag('beta-feature');

  if (!isReady) return <Skeleton />;
  return showBeta ? <BetaFeature /> : <StableFeature />;
}

Summary

Hook	Use case
useFlag(key)	Boolean on/off
useVariant(key, default)	String variants
useFlagValue(key, fallback)	Typed config values
useIsReady()	Check if initial sync is complete
useFlagifyClient()	Access SDK instance directly

The React SDK is designed to feel like any other React hook. No complex setup, no provider nesting, no performance footguns. Flags evaluate from a local cache — there is no network request per render.

Read the full React SDK reference for more details.