React SDK

React feature flags with one hook

Wrap your app in one provider, read any flag with one hook, and every component re-renders the moment a toggle flips, a rollout percentage moves, or a kill switch fires. No page reload, no redeploy, no prop drilling.

No card required

01 · Drop it in

The planned React API, exactly as it will ship

The SDK is part of the early-access program, and this is its real surface: one install, one client, one call per decision. Every toggle, rollout step and kill-switch flip you make in the console reaches this code in about 3 seconds, with no redeploy.

Client-side evaluation never exposes your flag rules: the browser receives decisions, not your targeting logic.

npm install @toggled/react

react · checkout.new-flow live

import { ToggledProvider, useFlag } from '@toggled/react';

function App() {
  return (
    <ToggledProvider clientKey={import.meta.env.VITE_TOGGLED_KEY}>
      <Checkout />
    </ToggledProvider>
  );
}

function Checkout() {
  const newFlow = useFlag('checkout.new-flow', false);
  return newFlow ? <NewCheckout /> : <ClassicCheckout />;
}

02 · Built for React

What React feature flags get you

Live updates, no reload

Flags stream to the browser. When you drag a rollout from 10% to 50%, the users who just entered the cohort see the new UI on their next render, not their next visit.

A safe default in the hook

useFlag takes a fallback value. If the network is down or the SDK has not loaded yet, your component renders the default instead of crashing or flashing.

Targeting from your user object

Pass user attributes once at the provider. Rules like plan = pro or country = US then evaluate locally, so gating a component by plan is one line.

03 · Then the usual lifecycle

Flag it, target it, roll it out, measure, kill

Once checkout.new-flow exists in your React code, everything else happens in the console: target the internal team, run a gradual rollout from 1% to 100%, read the impact with built-in A/B testing, and keep the kill switch under your thumb. The full walkthrough is on how Toggled works.

Flat pricing applies here too: unlimited seats and unlimited flags on every plan, so the whole React team gets an account. Numbers are on the pricing page.

Same flags, other stacks

Cohorts agree across SDKs: a user in the 10% on your React side is in the same 10% everywhere else.

Java, Rails, iOS and Android SDKs share the same core and ship with early access.

04 · Where the check goes

Where a flag check belongs in a React codebase

Read it at the route or page boundary

The cleanest place for a flag read is where the branch actually is: a route element, a page component, or the wrapper that picks between two subtrees. One read, one branch, and every component underneath stays ignorant of the flag. That is what makes the flag cheap to delete six weeks later.

Prefer a gate component to an if inside JSX

For a UI variant, a small gate component that reads the flag and returns one of two children keeps both implementations intact and separately renderable in Storybook. Removing the flag becomes deleting the gate, rather than picking conditionals out of a render tree.

Never read a flag inside a fetching effect

If a flag decides which endpoint you call, resolve it in the code that builds the request, not in a useEffect that re-runs once the flag arrives. Otherwise the first render fires the wrong request and the second fires the right one, and you have doubled your API load for nothing.

05 · Gotchas

Three ways React feature flags go wrong

Gotcha 01

The first render happens before the SDK has values

On first paint the client has fetched nothing, so useFlag returns your fallback. If the real value differs, the user sees the old UI and then watches it swap under them. Either render the default deliberately because it is genuinely acceptable, or gate the branch on the SDK ready state and show a skeleton until it flips.

Gotcha 02

One context object re-renders the entire tree

If the provider hands down a single object holding every flag, any flip creates a new object identity and every consumer re-renders, including components whose flags did not change. Subscribe per key, or memoize the context value, so a rollout step only touches the components that actually read that key.

Gotcha 03

Flag reads drift down into leaf components

useFlag is cheap, so it spreads. A month later the same key is read in nine components, and cleaning the flag up means editing nine files and hoping you found them all. Read the key once at the boundary and pass the result down as a plain boolean prop.

06 · Testing

Testing both paths in React

Render the component twice under React Testing Library, once with the provider stubbed on and once off, and assert on what the user sees rather than on the hook. A test-only provider that takes a plain flag map keeps each case to one line. Add a third case with the provider not ready, because that is the exact state that produces the flash in production and the one nobody covers.

react · test both paths

// Checkout.test.tsx
import { render, screen } from '@testing-library/react';
import { ToggledProvider } from '@toggled/react';

const withFlags = (flags, ui) =>
  render(<ToggledProvider overrides={flags}>{ui}</ToggledProvider>);

test('renders the new flow when the flag is on', () => {
  withFlags({ 'checkout.new-flow': true }, <Checkout />);
  expect(screen.getByText('New checkout')).toBeInTheDocument();
});

test('renders the classic flow when the flag is off', () => {
  withFlags({ 'checkout.new-flow': false }, <Checkout />);
  expect(screen.getByText('Classic checkout')).toBeInTheDocument();
});

07 · People also ask

React feature flag questions, answered

How do you use feature flags in React?

Wrap the tree in a provider that holds the flag client and the user context, then read each flag with a hook: useFlag('checkout.new-flow', false). The hook subscribes to that one key, so the component re-renders when the value changes. The second argument is the fallback, which is what renders before the SDK has any values.

What is the best feature flag library for React?

The right one gives you three things: a provider, a hook with a typed fallback, and live updates without a page reload. Toggled's React SDK ships that shape as part of early access, and OpenFeature is the vendor-neutral option if you want a portable interface. Avoid anything that makes a network call per flag read.

Do feature flags cause re-renders in React?

Only the components that read a changed key re-render, provided the SDK subscribes per key instead of putting the whole flag map into one context value. If every flag lives in a single object, one flip changes that object identity and re-renders every consumer in the tree, whether or not their flag moved.

How do you avoid a flash of the wrong content with feature flags?

Decide what to show before the flags arrive rather than hoping they arrive first. You have two honest options: render the fallback deliberately and accept the swap, or hold the branch behind the SDK ready state and render a skeleton until values land. Bootstrapping the client with server-rendered values removes the gap entirely.

More answers, about the product rather than the code, live on the FAQ.

Early access · launching soon

Put your first React feature behind a flag

Join the early-access list and be first in line when spots open. Flat pricing, unlimited seats, no card required.

No card required · your data stays yours

Keep exploring