ReactFrontendOpinión

Elizabeth Holmes y React: cuando la interfaz engaña

31 de octubre de 2026·7 min de lectura·Diego Horvatti

Elizabeth Holmes recibió 135 meses de prisión por fraude, y su historia volvió al debate por un documental. La newsletter The Profile publicó un texto con un título directo: el documental "You Can See Everything" engaña. No voy a juzgar la película aquí. Voy a hablar de lo que me interesa como dev: Theranos es el mayor caso que conozco de una interfaz que prometía más de lo que el sistema entregaba. Y quien escribe React toma ese tipo de decisión cada semana, a una escala mucho menor.

¿Qué pasó con Theranos?

Un resumen rápido, para quien acaba de llegar.

Theranos prometía hacer cientos de análisis con unas pocas gotas de sangre, en una máquina compacta. La empresa llegó a valer cerca de US$ 9 mil millones. En 2015, John Carreyrou publicó en el Wall Street Journal que la tecnología no hacía lo que la empresa decía. Parte de los análisis se hacía en máquinas comerciales de otros fabricantes.

En enero de 2022, un jurado declaró a Holmes culpable de fraude contra inversores. La sentencia salió en noviembre del mismo año. Después llegó una orden de restitución de US$ 452 millones, compartida con Sunny Balwani, expresidente de la empresa.

El punto que importa para este texto es otro. Según el libro Bad Blood, de Carreyrou, en una demostración para Novartis el aparato falló y el equipo envió un resultado falso, a distancia, para que apareciera como si hubiera salido de la máquina. En la pantalla, todo funcionó.

Quien estaba en la sala vio un resultado. Nadie vio de dónde venía.

¿Por qué importa esto a quien escribe React?

Tranquilo, sé la diferencia entre un fraude y un skeleton en la pantalla. Nadie va preso por un useState. Holmes fue condenada por mentir a inversores, con dinero y pacientes reales de por medio. Comparar eso con un dashboard atrasado sería ridículo.

Pero el mecanismo técnico se parece, y por eso vale la pena mirarlo. La capa de presentación no sabe si el dato es verdadero. Renderiza lo que recibe. Un componente React dibuja un número falso con la misma tipografía bonita que un número real.

Y el front-end es donde la gente se forma una creencia sobre el sistema. Tu cliente no lee el log del servidor. Tu jefe no abre la pestaña Network. Si la pantalla dice "guardado", la persona cree que se guardó.

Una demo bonita solo prueba que la demo funciona.

Esto le da al front-end una responsabilidad incómoda: la pantalla tiene que decir lo que realmente sabe, incluso cuando sabe poco.

Dónde miente la interfaz React sin que te des cuenta

Casi nunca es mala fe. Suele ser prisa, plazos y un mock que se quedó.

El caso clásico es el dato de ejemplo que sobrevive hasta producción. Mira este fragmento con TanStack Query:

const { data } = useQuery({
  queryKey: ['vendas'],
  queryFn: buscarVendas,
  initialData: vendasMock,
})

return <Total valor={data.total} />

Parece inofensivo. Pero initialData entra en la caché como dato real. Mientras la búsqueda no termina, o si falla, el usuario ve R$ 48.320,00 de un archivo que alguien escribió una tarde de marzo. Nada en la pantalla avisa.

Si de verdad quieres mostrar algo provisional, usa placeholderData y deja eso visible:

const { data, isPlaceholderData, isError } = useQuery({
  queryKey: ['vendas'],
  queryFn: buscarVendas,
  placeholderData: vendasMock,
})

if (isError) return <ErroVendas />

return <Total valor={data?.total} provisorio={isPlaceholderData} />

Son tres líneas más, y la pantalla pasa a tener tres estados honestos en lugar de uno solo muy confiado.

Otros lugares donde veo que esto pasa:

catch que devuelve un array vacío. La API se cayó y la pantalla dice "no se encontraron pedidos". El usuario concluye que no tiene pedidos. Es información falsa con buen aspecto.
Toast de éxito antes de la respuesta. El botón dispara el fetch y el toast aparece en la misma línea. Si el servidor devuelve 500, el aviso de éxito ya se fue.
Barra de progreso de mentira. Un setInterval que sube hasta 90% y espera. Todos lo hemos hecho, yo incluido. En una subida de 3 segundos, no pasa nada. En un procesamiento de 10 minutos, se vuelve una promesa sin respaldo.
Estado sin fecha. "Sistema operativo" con un verde fijo en el código. Si nadie lo mide, ese verde es decoración.

¿useOptimistic también es mentira?

Esta es la objeción buena. React 19 trajo useOptimistic, un hook hecho para mostrar el resultado antes de que exista. ¿No es justo ese el problema?

En mi opinión, no. La diferencia es que la suposición tiene plazo y tiene salida:

const [curtidas, somarOtimista] = useOptimistic(
  post.curtidas,
  (atual, delta: number) => atual + delta,
)

function curtir() {
  startTransition(async () => {
    somarOtimista(1)
    await curtirPost(post.id)
  })
}

Cuando la transición termina, el valor vuelve a ser el que vino del estado real. Si la llamada falla y post.curtidas no cambia, el número regresa al anterior. Todavía tienes que tratar el error y avisar al usuario, pero la arquitectura ya parte de la idea de que la pantalla puede estar equivocada por un instante.

La vara de medir que uso es el costo del error. ¿Like optimista? Vale. Si falla, nadie pierde nada. ¿Pago, análisis médico, transferencia, envío de factura? Espera la confirmación del servidor. El usuario aguanta un spinner de 2 segundos. No aguanta descubrir al día siguiente que el recibo de pago nunca se generó.

Qué cambia en tu flujo de trabajo

Nada de esto exige una librería nueva. Exige hábito.

Modela los estados a propósito. Todo componente que depende de la red tiene al menos cargando, error, vacío y éxito. "Vacío" y "error" son cosas distintas, y la pantalla tiene que tratarlas de forma distinta.

Limita los mocks al entorno de desarrollo. Si el mock nunca tiene que llegar a producción, haz que el build falle cuando aparezca. MSW ayuda bastante aquí: los datos falsos quedan en la capa de red, fuera de los componentes, y solo activas el worker en desarrollo.

Una demo con datos falsos tiene que decir que son falsos. Una franja de "datos de ejemplo" arriba lo resuelve. Un prototipo en Figma nadie lo confunde con el producto. Un prototipo en React, con deploy y dominio bonito, confunde a todos, incluido el director que va a prometérselo a un cliente el viernes.

Muestra la edad del dato. Un "actualizado hace 4 minutos" cuesta una línea y cambia la lectura de cualquier panel. TanStack Query ya te da dataUpdatedAt gratis.

Prueba el camino malo. Abre DevTools, pon la red en offline y haz clic en todo. Haz una prueba con la API devolviendo 500. Si la pantalla sigue sonriendo, encontraste un bug.

La pregunta que me hago antes del deploy

Theranos es un caso extremo, con personas reales recibiendo resultados de análisis en los que no podían confiar. Nadie aquí está en ese nivel, y no hace falta estarlo para aprender de ella.

Mi opinión: un front-end sénior es quien se preocupa por lo que la pantalla afirma, además de cómo se ve. Antes de subir, me pregunto: "si este número estuviera mal, ¿la interfaz me dejaría notarlo?". Si la respuesta es no, vuelvo al código.

Ese es el criterio que intento seguir en mis trabajos. Si quieres ver cómo queda en un producto de verdad, échale un vistazo a mis proyectos.

Resumen para LinkedIn

Elizabeth Holmes recibió 135 meses de prisión, y Theranos me enseñó algo sobre React.

Según el libro Bad Blood, cuando el aparato falló en una demo, se envió un resultado falso a distancia para que pareciera salido de la máquina. En la pantalla, todo funcionó.

Tranquilo, sé la diferencia entre un fraude y un skeleton. Pero el mecanismo se parece: un componente dibuja un número falso con la misma tipografía bonita que un número real.

Un mock que sobrevive hasta producción. Un catch que devuelve un array vacío y dice "no se encontraron pedidos" cuando la API se cayó. Un toast de éxito antes de la respuesta del servidor.

Casi nunca es mala fe. Es prisa. Pero tu cliente no abre la pestaña Network: si la pantalla dice "guardado", se lo cree.

Antes de cada deploy, me pregunto: si este número estuviera mal, ¿la interfaz me dejaría notarlo?

Escribí sobre esto en el blog, con código y los hábitos que adopté. Y tú, ¿ya encontraste una pantalla mintiendo en tu proyecto?

#React #Frontend #JavaScript #DesarrolloDeSoftware #Theranos