How to set up feature flags in React and Node

Feature flags let you turn features on/off without redeploying. A solid setup for React + Node usually looks like:

• Node backend decides flag values for the user/request
• React frontend receives the evaluated flags and conditionally renders UI
• A flag service or config store manages the flag definitions

1) Pick a flag system

Common options:

• LaunchDarkly, ConfigCat, Flagsmith, Unleash
• Or a simple custom setup using:
  • environment variables
  • database table
  • JSON config file
  • Redis / cache

For production, a dedicated flag service is usually best.

---

2) Typical architecture

Backend responsibilities

• Authenticate user
• Determine target attributes:
  • user ID
  • role
  • plan
  • region
• Evaluate flags
• Send flag state to frontend

Frontend responsibilities

• Read flag state
• Render conditionally
• Optionally call backend for flag updates

---

3) Simple custom implementation

Example flag definition

{
  "newCheckout": {
    "default": false,
    "rules": [
      { "segment": "beta-testers", "value": true }
    ]
  }
}

---

4) Node.js setup

Option A: Simple middleware / helper

// flags.js
const flags = {
  newCheckout: {
    default: false,
  },
  darkMode: {
    default: true,
  },
};

function getFlagsForUser(user) {
  return {
    newCheckout: user ჯგუფ === "beta" ? true : flags.newCheckout.default,
    darkMode: flags.darkMode.default,
  };
}

module.exports = { getFlagsForUser };

Express route

const express = require("express");
const { getFlagsForUser } = require("./flags");

const app = express();

app.get("/api/flags", (req, res) => {
  const user = req.user || { id: "anon", group: "default" };
  res.json(getFlagsForUser(user));
});

app.listen(3000);

In real apps, req.user comes from auth middleware.

---

5) React setup

Fetch flags on app startup

import { useEffect, useState } from "react";

function App() {
  const [flags, setFlags] = useState(null);

  useEffect(() => {
    fetch("/api/flags")
      .then((res) => res.json())
      .then(setFlags);
  }, []);

  if (!flags) return <div>Loading...</div>;

  return (
    <div>
      {flags.newCheckout ? <NewCheckout /> : <OldCheckout />}
      {flags.darkMode && <DarkModeToggle />}
    </div>
  );
}

---

6) Better pattern: React Context

This avoids prop drilling and makes flag access easy anywhere.

FeatureFlagContext.jsx

import { createContext, useContext } from "react";

const FeatureFlagContext = createContext({});

export function FeatureFlagProvider({ flags, children }) {
  return (
    <FeatureFlagContext.Provider value={flags}>
      {children}
    </FeatureFlagContext.Provider>
  );
}

export function useFeatureFlags() {
  return useContext(FeatureFlagContext);
}

Use it in app

import { useEffect, useState } from "react";
import { FeatureFlagProvider, useFeatureFlags } from "./FeatureFlagContext";

function AppContent() {
  const flags = useFeatureFlags();

  return (
    <>
      {flags.newCheckout ? <NewCheckout /> : <OldCheckout />}
    </>
  );
}

export default function App() {
  const [flags, setFlags] = useState(null);

  useEffect(() => {
    fetch("/api/flags")
      .then((res) => res.json())
      .then(setFlags);
  }, []);

  if (!flags) return <div>Loading...</div>;

  return (
    <FeatureFlagProvider flags={flags}>
      <AppContent />
    </FeatureFlagProvider>
  );
}

---

7) Best practices

Keep flag names clear

Use names like:

• newCheckout
• showBillingV2
• enableRecommendations

Remove old flags

Flags should not live forever. Set a cleanup date.

Use server-side evaluation for security

Don’t expose sensitive logic to the client if it controls access.

Cache flag state

Especially if using an external service.

Track exposure

Log when a user sees a flag-enabled experience.

Separate:

• release flags: temporary rollout control
• experiment flags: A/B testing
• permission flags: user entitlement
• ops flags: emergency kill switch

---

8) If using a managed service

Most services follow this pattern:

Node

const LDClient = require("launchdarkly-node-server-sdk");
const client = LDClient.init("sdk-key");

app.get("/api/flags", async (req, res) => {
  await client.waitForInitialization();
  const user = { key: req.user.id, email: req.user.email };
  const flags = {
    newCheckout: await client.variation("new-checkout", user, false),
  };
  res.json(flags);
});

React

Use returned flags exactly the same way as above.

---

9) Recommended setup for most teams

If you want a practical production approach:

1. Use LaunchDarkly / Flagsmith / ConfigCat / Unleash
2. Evaluate flags in Node
3. Return a /api/flags response for the current user
4. Store flags in React Context
5. Add analytics and cleanup process for stale flags

---

If you want, I can also give you:

• a full working example with Express + React
• a LaunchDarkly/Flagsmith implementation
• or a TypeScript version