Como Usar Feature Flags em React: LaunchDarkly, Unleash e Rollouts Graduais em Produção Já leu

O que são Feature Flags e por que eles importam

Feature flags (ou feature toggles) são mecanismos que permitem ativar ou desativar funcionalidades em uma aplicação sem necessidade de deploy. Em vez de lançar uma feature completamente pronta para todos os usuários de uma vez, você pode controlar quem a vê, quando a vê e em que contexto. Isso revoluciona a forma como entregamos software, permitindo testes mais seguros, rollouts graduais e até experimentos A/B sem risco.

Na prática, você coloca sua nova funcionalidade atrás de um condicional que verifica um flag externo. Se o flag está ativado, o usuário vê a feature; se não, ele vê o comportamento antigo. A grande diferença é que essa decisão não fica hardcoded na sua aplicação — ela vem de um serviço centralizado, como LaunchDarkly ou Unleash, permitindo mudanças em tempo real sem redeploy. Isso significa que um problema crítico pode ser desativado em segundos, experimentos podem ser pausados instantaneamente, e releases podem ser feitos sem risco.

LaunchDarkly: Gerenciamento Profissional de Flags

LaunchDarkly é uma plataforma enterprise dedicada ao gerenciamento de feature flags. Ela oferece um painel intuitivo, webhooks, integrações com várias plataformas e um SDK robusto para React. Vamos implementar um exemplo prático.

Instalação e Configuração Básica

Primeiro, instale o SDK do LaunchDarkly para React:

npm install launchdarkly-react-client-sdk

Crie um arquivo de configuração para sua aplicação. Você precisará de uma clientSideId (obtida no painel do LaunchDarkly):

import { LDProvider } from 'launchdarkly-react-client-sdk';

const ldClient = {
  clientSideId: 'seu-client-side-id-aqui',
  context: {
    kind: 'user',
    key: 'user-id-unico',
    email: 'usuario@example.com',
    custom: {
      plano: 'premium'
    }
  }
};

function App() {
  return (
    <LDProvider clientSideId={ldClient.clientSideId} context={ldClient.context}>
      <YourAppContent />
    </LDProvider>
  );
}

export default App;

A configuração acima cria um contexto de usuário. O LaunchDarkly usa esse contexto para decidir quais flags cada usuário deve ver, permitindo segmentação por tipo de usuário, plano de assinatura, região, etc.

Usando Flags no Componente

Agora, use o hook useFlags() para acessar os flags dentro dos seus componentes:

import { useFlags } from 'launchdarkly-react-client-sdk';

function Dashboard() {
  const flags = useFlags();

  return (
    <div>
      <h1>Dashboard</h1>
      {flags.novaInterfaceUsuario ? (
        <NovaInterfaceDashboard />
      ) : (
        <InterfaceAntiga />
      )}
    </div>
  );
}

export default Dashboard;

Se o flag novaInterfaceUsuario estiver ativado para este usuário, ele verá NovaInterfaceDashboard. Caso contrário, verá a versão antiga. A decisão é tomada no servidor do LaunchDarkly e sincronizada com o cliente em tempo real.

Variações e Valores Personalizados

Flags não precisam ser apenas booleanos. O LaunchDarkly suporta variações complexas — strings, números, objetos JSON. Você pode usar isso para A/B testing com múltiplas variações:

import { useLDClient } from 'launchdarkly-react-client-sdk';

function ButtonComponent() {
  const ldClient = useLDClient();
  const buttonText = ldClient.variation('textoBotaoCheckout', 'Comprar agora');

  // Se o flag estiver ativado, pode retornar:
  // - "Comprar agora" (controle)
  // - "Finalizar pedido" (variação A)
  // - "Continuar" (variação B)

  return <button>{buttonText}</button>;
}

export default ButtonComponent;

O LaunchDarkly permite definir regras baseadas em contexto — por exemplo, mostrar a variação "Finalizar pedido" para 50% dos usuários premium e "Comprar agora" para o resto. Tudo gerenciado pelo painel, sem tocar no código.

Unleash: Open Source e Flexibilidade

Unleash é uma alternativa open source ao LaunchDarkly. Se você quer controle total sobre a infraestrutura, sem depender de serviços terceirizados, Unleash é uma ótima escolha. Ele pode ser auto-hospedado e oferece uma API simples e poderosa.

Instalando o SDK do Unleash para React

npm install @unleash/proxy-client-react

Configure o provedor Unleash em seu App.jsx:

import { UnleashProvider } from '@unleash/proxy-client-react';

function App() {
  return (
    <UnleashProvider
      config={{
        url: 'http://seu-servidor-unleash.com/client',
        clientKey: 'sua-chave-cliente',
        appName: 'minha-aplicacao',
        environment: 'production'
      }}
    >
      <YourAppContent />
    </UnleashProvider>
  );
}

export default App;

Acessando Flags com Unleash

Use o hook useFeature() para verificar se uma flag está ativada:

import { useFeature } from '@unleash/proxy-client-react';

function FeaturePage() {
  const { isEnabled } = useFeature('nova-sessao-pagamento');

  if (!isEnabled) {
    return <div>Esta funcionalidade ainda não está disponível.</div>;
  }

  return <NovaSessionPagamento />;
}

export default FeaturePage;

O Unleash também suporta contexto do usuário para segmentação:

import { useUnleash } from '@unleash/proxy-client-react';

function ProfilePage() {
  const { isEnabled } = useUnleash();

  // Passar contexto personalizado
  const podeAcessarBeta = isEnabled('betaAnalytics', {
    userId: 'user-123',
    tipoPlano: 'premium',
    pais: 'BR'
  });

  return podeAcessarBeta ? <BetaAnalytics /> : <AnalyticsClassica />;
}

export default ProfilePage;

Estratégias Avançadas no Unleash

O Unleash permite definir estratégias complexas, como ativação gradual por porcentagem de usuários. Você configura isso no painel, e o SDK automaticamente respeita:

import { useFeatures } from '@unleash/proxy-client-react';

function ReleasePage() {
  const { features } = useFeatures();

  // Unleash internamente verifica se o hash do userId
  // se enquadra nos 10% de rollout definidos no painel
  const novaFeature = features.find(f => f.name === 'novaRelatorioDados');

  if (novaFeature?.enabled) {
    return <NovoRelatorioDados />;
  }

  return <RelatorioDadosLegado />;
}

export default ReleasePage;

Rollouts Graduais: Estratégia e Implementação

Um dos maiores benefícios dos feature flags é permitir rollouts graduais — liberar uma feature para 1% dos usuários, depois 5%, depois 25%, até 100%. Isso minimiza riscos e permite capturar bugs antes de afetar todos.

Estratégia de Rollout Seguro

A abordagem recomendada é começar muito pequeno. Com LaunchDarkly, você pode ativar um flag para um pequeno percentual e observar métricas:

1. Lançar para 1-5% dos usuários: Monitore erros, latência, comportamento.
2. Expandir para 10-25% se tudo bem: Continue observando dados de telemetria.
3. Ativar para 50-100% gradualmente: Se não houver problemas, libere para todos.
4. Manter o flag ligado ou remover: Depois de estável, você pode remover o flag do código ou deixá-lo como fail-safe permanente.

Implementação com Monitoramento

Aqui está um exemplo real que integra rollout gradual com tratamento de erros:

import { useLDClient } from 'launchdarkly-react-client-sdk';
import { useEffect, useState } from 'react';

function CheckoutFlow() {
  const ldClient = useLDClient();
  const [paymentGateway, setPaymentGateway] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const novoGatewayAtivado = ldClient.variation(
      'novoGatewayPagamento',
      false
    );

    if (novoGatewayAtivado) {
      // Tenta usar novo gateway
      inicializarNovoGateway()
        .catch(err => {
          console.error('Novo gateway falhou:', err);
          setError(err);
          // Fallback para gateway antigo
          setPaymentGateway('antigo');
        })
        .then(() => setPaymentGateway('novo'));
    } else {
      setPaymentGateway('antigo');
    }
  }, [ldClient]);

  if (error && paymentGateway === 'antigo') {
    return <GatewayPagamentoAntigo />;
  }

  if (paymentGateway === 'novo') {
    return <NovoGatewayPagamento />;
  }

  if (paymentGateway === 'antigo') {
    return <GatewayPagamentoAntigo />;
  }

  return <div>Carregando...</div>;
}

async function inicializarNovoGateway() {
  // Simulando inicialização do novo gateway
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('gateway inicializado'), 500);
  });
}

export default CheckoutFlow;

Rastreando Conversões com Flags

É importante capturar dados sobre qual versão o usuário viu, para análise posterior:

import { useLDClient } from 'launchdarkly-react-client-sdk';
import { useEffect } from 'react';

function CheckoutSuccess() {
  const ldClient = useLDClient();

  useEffect(() => {
    const variacaoUsada = ldClient.variation('checkoutFlow', 'controle');

    // Enviar para seu analytics
    window.analytics?.track('checkout_completed', {
      variacao: variacaoUsada,
      timestamp: new Date().toISOString()
    });
  }, [ldClient]);

  return <div>Pedido realizado com sucesso!</div>;
}

export default CheckoutSuccess;

Comparação Prática: LaunchDarkly vs Unleash

Ambas as plataformas fazem a mesma coisa, mas com trade-offs diferentes:

Use LaunchDarkly se: você quer algo pronto, suporte profissional e não se importa com custo.

Use Unleash se: você quer controle total, está disposto a fazer setup/manutenção ou tem restrições de dados/conformidade.

Conclusão

Aprendemos que feature flags não são apenas um recurso técnico, são uma mudança de filosofia na entrega de software. Você passa de "pronto para soltar para todos" para "controlar quem vê o quê em tempo real", eliminando a pressão de releases perfeitas e permitindo experimentos seguros.

Em segundo lugar, LaunchDarkly e Unleash servem a propósitos similares com abordagens diferentes — um é conveniente e gerenciado, o outro oferece liberdade e controle. A escolha depende de seus requisitos de infraestrutura, conformidade e orçamento. Ambas têm SDKs excelentes para React e permitem implementar rollouts graduais com pouquíssimo esforço.

Por fim, um rollout gradual bem executado reduz drasticamente o risco de um bug em produção se tornar um desastre. Começando pequeno (1-5%), monitorando métricas, e expandindo só quando tudo estiver bem, você ganha confiança e dados reais antes de expor a feature a todos. Isso é engenharia real de software.

Referências

• LaunchDarkly React SDK Documentation
• Unleash Official Documentation
• Feature Toggles (Martin Fowler)
• Best Practices for Feature Flags
• Unleash GitHub Repository