Skill&MCP Hub
react logo

feature-flags

✓ Official246,200

by facebook · part of react/react

Manage React feature flags across channels, gate tests conditionally, and debug flag-specific test failures. Four flag files control defaults and channel-specific overrides (canary, www, React Native, test renderer) with __VARIANT__ flags simulating gatekeepers tested in both states Use @gate flagName pragma to skip tests entirely when a flag is unavailable, or inline gate() to branch assertions when behavior differs Adding a new flag requires entries in the main file plus all fork files;...

🔥🔥✓ VerifiedFreeQuick setup
🔒 Repo-maintenance skill. It exists to help maintain react/react itself — it's only useful if you contribute code to that project.

name: feature-flags description: Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.

React Feature Flags

Flag Files

FilePurpose
packages/shared/ReactFeatureFlags.jsDefault flags (canary), __EXPERIMENTAL__ overrides
packages/shared/forks/ReactFeatureFlags.www.jswww channel, __VARIANT__ overrides
packages/shared/forks/ReactFeatureFlags.native-fb.jsReact Native, __VARIANT__ overrides
packages/shared/forks/ReactFeatureFlags.test-renderer.jsTest renderer

Gating Tests

@gate pragma (test-level)

Use when the feature is completely unavailable without the flag:

Copy & paste — that's it
// @gate enableViewTransition
it('supports view transitions', () => {
  // This test only runs when enableViewTransition is true
  // and is SKIPPED (not failed) when false
});

gate() inline (assertion-level)

Use when the feature exists but behavior differs based on flag:

Copy & paste — that's it
it('renders component', async () => {
  await act(() => root.render(<App />));

  if (gate(flags => flags.enableNewBehavior)) {
    expect(container.textContent).toBe('new output');
  } else {
    expect(container.textContent).toBe('legacy output');
  }
});

Adding a New Flag

  1. Add to ReactFeatureFlags.js with default value
  2. Add to each fork file (*.www.js, *.native-fb.js, etc.)
  3. If it should vary in www/RN, set to __VARIANT__ in the fork file
  4. Gate tests with @gate flagName or inline gate()

Checking Flag States

Use /flags to view states across channels. See the flags skill for full command options.

__VARIANT__ Flags (GKs)

Flags set to __VARIANT__ simulate gatekeepers - tested twice (true and false):

Copy & paste — that's it
/test www <pattern>              # __VARIANT__ = true
/test www variant false <pattern> # __VARIANT__ = false

Debugging Channel-Specific Failures

  1. Run /flags --diff <channel1> <channel2> to compare values
  2. Check @gate conditions - test may be gated to specific channels
  3. Run /test <channel> <pattern> to isolate the failure
  4. Verify flag exists in all fork files if newly added