Feature flags

Prerequisites

Complete the quickstart first — the SDK must be installed and your domain allowed.

1. Create a flag

In the console, open your project and go to Feature flags → Create flag. Set:

• Key — lowercase identifier used in code (pattern [a-z][a-z0-9_]*, e.g. new_checkout)
• Type — boolean or string
• Rollout % — percentage of visitors who receive the on value
• On / off values — what visitors see when in or out of rollout

Use the flag key in your code, not the internal document ID. Start at 0% while both code paths are deployed.

2. Check a boolean flag

renderContext.isEnabled waits for render context (up to 2 seconds by default), then returns true only when the flag evaluates to boolean true. On timeout or failure it returns your default value.

if (await renderContext.isEnabled("new_checkout", false)) {
  showNewCheckout();
} else {
  showLegacyCheckout();
}

3. Read string flags

String flags (and all flag values at once) come from renderContext.flags(). Do not use isEnabled for string flags.

const flags = await renderContext.flags();
const theme = flags["checkout_theme"]; // string | boolean

if (theme === "compact") {
  renderCompactLayout();
}

React

In React, use the hook after you have completed the browser SDK setup.

pnpm add @rendercontext/sdk react

import { useIsEnabled } from "@rendercontext/sdk/react";

function Checkout() {
  const enabled = useIsEnabled("new_checkout", false);
  return enabled ? <NewCheckout /> : <LegacyCheckout />;
}

Flag freshness

Flags and experiment assignments load with context and refresh in the background about every 15 minutes — not in realtime when you change them in the console.

React hooks (useFlag, useIsEnabled, useVariant) read once when the component mounts (or when their inputs change). They do not update live after a background refresh. For a sooner update, remount the component, reload the page, or call await renderContext.refreshContext() and read again.

4. Test, target, and roll out

First, use the Environments layer to turn the flag on in development or staging. Production still uses its own rollout. When you need a narrower audience, add a targeting layer in the console:

• Preview for a few named testers.
• Cohorts for groups such as staff or beta users. Set cohort keys from your authenticated backend after sign-in.
• Attributes for rules such as plan or role. Send these with a signed token; browser-supplied attributes are not trusted.

Then raise the production rollout gradually. See Environments for the deployment flow and Signing tokens for verified attributes.

Next steps

Ready to compare variants? See Experiments. Evaluating from a backend? See the Server SDK.