Desarrollo13 de mayo de 2026

Cómo ocultar la funcionalidad A y mostrar la B a distintos usuarios en React

Introducción

¿Alguna vez te has preguntado cómo empresas como Slack, Netlify, Zoom o Facebook (y seguro que el resto de FAANG) lanzan nuevas funcionalidades de forma gradual solo para algunos usuarios? 🤔

¡Se acabó el misterio! Lo hacen con feature flags (FF, para abreviar), y vamos a meternos de lleno en este concepto.

Los servicios de feature flags funcionan así: defines una lista de funcionalidades (por ejemplo, modo oscuro, un login con diseño horizontal o el diseño 2.0) y las asignas a un grupo de usuarios, indicando las condiciones para activarlas o desactivarlas.

Es muy posible que ya hayas usado FF en tus proyectos sin saberlo. ¿Alguna vez has guardado en una base de datos booleanos que indicaban si un usuario concreto debía tener acceso a cierta funcionalidad? Si es así, enhorabuena: ya tienes experiencia con feature flags.

Los booleanos en base de datos servían hasta cierto punto, pero el progreso no se detiene y hoy existe una forma mucho más flexible y cómoda para desarrolladores de controlar qué funcionalidades están disponibles. Veamos los servicios de feature flags. Aportan estas ventajas:

Una UI donde definir y gestionar las funcionalidades
Segmentación de usuarios
Tests A/B
Analítica de flags
Lanzamientos por fases
SDKs para distintos lenguajes y frameworks

En este artículo vamos a usar Flagsmith, un servicio open source de feature flags y configuración remota, aunque también puedes mirar alternativas comerciales como LaunchDarkly. El objetivo es aprender a empezar con feature flags en React y conseguir que lanzar nuevas funcionalidades a los usuarios sea más fluido.

Con Flagsmith puedes gestionar los FF prácticamente desde cualquier sitio (frontend, backend o plataforma móvil). Fíjate en este esquema:

Veamos paso a paso qué ocurre.

El usuario solicita la página
Una parte de tu aplicación (FE/BE) llama al servicio de Flagsmith con el uuid del usuario
Flagsmith cruza ese uuid con la configuración de funcionalidades disponibles para ese usuario y devuelve la información
La aplicación genera la página según la información recibida

Nada del otro mundo. ¡Vamos a la práctica! Logo de GitHub Flagsmith / flagsmith Servicio open source de feature flags y configuración remota. Instálalo en tus propios servidores o usa su versión alojada en https://flagsmith.com/

Nuestro objetivo

Queremos construir una aplicación de dashboard bastante estándar (lo siento, hoy no hay lista de tareas) con autenticación configurada. La idea es mostrar ciertos componentes solo a los usuarios que se hayan apuntado a la beta.

Para construirla nos apoyaremos en React, Next.js, Next-Auth y los estupendos componentes de dashboard de Tailwind UI.

Requisitos previos

Crea una aplicación nueva con Next.js, React y Next-Auth, o clona este repositorio de ejemplo

Enlaces adicionales

Primeros pasos con Next.js

Primeros pasos con NextAuth

Después, crea una cuenta en la versión cloud de Flagsmith.

Configurar el entorno de Flagsmith

La configuración es sencilla. Cuando te hayas registrado, crea un proyecto nuevo. En Flagsmith puedes definir varios entornos por proyecto, y cada uno tiene sus propias funcionalidades, usuarios, segmentos y API key.

Vamos a crear nuestra primera funcionalidad y la llamaremos "pinned_projects". Los usuarios beta podrán fijar proyectos y verlos.

El siguiente paso es instalar el paquete flagsmith-react


npm i flagsmith-react

Para empezar, envolvemos nuestro _app.js con FlagsmithProvider y le pasamos la API key de Flagsmith, que puedes obtener en la página de ajustes de su UI. FlagsmithProvider permite usar el hook useFlagsmith y pasa el estado a los componentes hijos.


import Auth from 'components/auth';
import { Provider as SessionProvider } from 'next-auth/client';
import { FlagsmithProvider } from 'flagsmith-react';
import '../styles/globals.css';
export default function MyApp({ Component, pageProps }) {
  return (
    <FlagsmithProvider environmentId={process.env.NEXT_PUBLIC_FLAGSMITH_API_KEY}>
      <SessionProvider session={pageProps.session}>
        {Component.auth ? (
          <Auth>
            <Component {...pageProps} />
          </Auth>
        ) : (
          <Component {...pageProps} />
        )}
      </SessionProvider>
    </FlagsmithProvider>
  );
}

FlagsmithProvider inicializa por debajo el cliente JavaScript de Flagsmith y ya puedes empezar a obtener los flags declarados en la UI. Pero no tiene mucho sentido si no obtenemos flags específicos de cada usuario. Para que Flagsmith sepa qué usuario pide los flags, tenemos que identificarlo. El sitio perfecto es el componente Auth, que se encarga de comprobar la sesión del usuario y redirigirle a la página de inicio de sesión si ha caducado.


import { useSession, signIn } from 'next-auth/client';
import { useEffect } from 'react';
import { useFlagsmith } from 'flagsmith-react';
export default function Auth({ children }) {
  const { identify, isIdentified, getTrait, setTrait } = useFlagsmith();
  const [session, loading] = useSession();
  const isUser = !!session?.user;
  // Identify user and set email trait if does not exist
  const identifyUser = async (id, email) => {
    await identify(id);
    const hasEmail = !!getTrait('email');
    if (!hasEmail) {
      setTrait('email', email);
    }
  };
  useEffect(() => {
    if (loading) return; // Do nothing while loading
    if (!isUser) signIn(); // If not authenticated, force log in
  }, [isUser, loading]);
  useEffect(() => {
    if (isUser && !isIdentified) {
      // In the example we don't save users in the database so we don't have id that should be used for identification
      // Instead we're going to use email as a trait and id
      identifyUser(session.user.email, session.user.email);
    }
  }, [isIdentified, identify, session, isUser]);
  if (isUser) {
    return children;
  }
  // Session is being fetched, or no user.
  // If no user, useEffect() will redirect.
  return <div />;
}

Aquí ves que usamos getTrait y setTrait. Los traits no son más que pares clave/valor asociados a identidades concretas. Puedes asignar al usuario cualquier información adicional que luego sirva para segmentar, por ejemplo el plan contratado, si se ha apuntado a funcionalidades beta o a la newsletter, etc.

Creemos el primer segmento y llamémoslo beta_opt_in. Ve a Segments → Create Segment. Aquí también puedes definir una expresión basada en un trait que añada al segmento a los usuarios que cumplan la condición. Podemos empezar con algo sencillo: si el email contiene [example.com](http://example.com), consideramos que se ha apuntado a las funcionalidades beta.

El último paso es añadir la comprobación a nuestro componente de React con hasFeature("pinned_projects").


const Home = () => {
  const { hasFeature } = useFlagsmith();
  return (
    <>
      <main className="relative z-0 flex-1 overflow-y-auto focus:outline-none">
        <div className="border-gray-200 border-b px-4 py-4 lg:px-8 sm:flex sm:items-center sm:justify-between sm:px-6">
          <HomeHeader />
        </div>
        {hasFeature('pinned_projects') && (
          <div className="mt-6 px-4 lg:px-8 sm:px-6">
            <PinnedProjects items={pinnedProjects} />
          </div>
        )}
        <ProjectsTable items={projects} />
      </main>
    </>
  );
};

¡Listo!

Si has seguido todos los pasos, ya deberías tener un pequeño proyecto de prueba que muestra un enfoque moderno de los feature flags. ¡Enhorabuena! 🎉

No dudes en ampliarlo o aprovechar la idea en tus proyectos actuales.

P. D.: Para seguir leyendo

En este artículo solo hemos echado un vistazo rápido a los feature flags y hemos construido una aplicación de ejemplo sencilla, pero un sistema de FF da para mucho más. Echa un vistazo a:

Tests A/B
Analítica de feature flags
Lanzamientos por fases