Jonatan Matajonmatum.com
conceptosnotasexperimentosensayos
© 2026 Jonatan Mata. All rights reserved.v2.1.1
Conceptos

React

Biblioteca de JavaScript para construir interfaces de usuario mediante componentes declarativos y reutilizables, con un ecosistema que abarca desde SPAs hasta aplicaciones full-stack con Server Components.

evergreen#react#javascript#ui#components#frontend#jsx

¿Qué es?

React es una biblioteca de JavaScript para construir interfaces de usuario, creada por Meta (entonces Facebook) y publicada como open source en 2013. Su modelo mental central: la UI es una función del estado. Cuando el estado cambia, React calcula la diferencia mínima en el DOM y aplica solo las actualizaciones necesarias.

A diferencia de frameworks como Angular o Vue que ofrecen una solución completa (routing, formularios, HTTP), React se enfoca exclusivamente en la capa de vista. El ecosistema — Next.js, React Router, Zustand — complementa lo que React no incluye.

Modelo de componentes

Todo en React es un componente: una función que recibe props y retorna JSX. Desde React 16.8 (2019), los hooks reemplazaron los class components como el patrón principal:

import { useState } from "react";
 
function Counter({ initial = 0 }: { initial?: number }) {
  const [count, setCount] = useState(initial);
 
  return (
    <div>
      <p>Conteo: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Los hooks fundamentales:

HookPropósitoCuándo usarlo
useStateEstado localValores que cambian con interacción del usuario
useEffectEfectos secundariosSuscripciones, fetching, sincronización con APIs externas
useRefReferencia mutableAcceso al DOM, valores que persisten sin causar re-render
useMemoMemoización de valoresCálculos costosos que dependen de pocas dependencias
useCallbackMemoización de funcionesCallbacks pasados a componentes hijos optimizados
useContextContexto compartidoEstado global ligero sin prop drilling

React 19

React 19 (diciembre 2024) introduce cambios significativos en cómo se manejan datos y formularios:

Actions y formularios. useActionState reemplaza el patrón manual de useState + onSubmit + try/catch para formularios:

import { useActionState } from "react";
 
function LoginForm() {
  const [state, submitAction, isPending] = useActionState(
    async (_prev: { error?: string }, formData: FormData) => {
      const res = await login(formData.get("email") as string);
      if (!res.ok) return { error: "Credenciales inválidas" };
      redirect("/dashboard");
      return {};
    },
    {}
  );
 
  return (
    <form action={submitAction}>
      <input name="email" type="email" required />
      <button disabled={isPending}>
        {isPending ? "Enviando..." : "Entrar"}
      </button>
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

use() para promesas y contexto. Permite leer promesas directamente en el render, integrándose con Suspense:

import { use, Suspense } from "react";
 
function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise);
  return <h1>{user.name}</h1>;
}
 
// Uso con Suspense boundary
<Suspense fallback={<p>Cargando...</p>}>
  <UserProfile userPromise={fetchUser(id)} />
</Suspense>

Otras novedades de React 19:

CaracterísticaDescripción
useOptimisticActualización optimista de UI antes de que el servidor confirme
ref como propYa no se necesita forwardRef — ref es una prop regular
Metadatos en componentes<title>, <meta>, <link> se elevan automáticamente al <head>
Hojas de estiloSoporte nativo para <link rel="stylesheet"> con deduplicación
React CompilerMemoización automática — elimina la necesidad de useMemo/useCallback manuales

Patrones de rendimiento

React re-renderiza un componente cada vez que su estado o props cambian. En aplicaciones grandes, esto puede causar problemas de rendimiento:

Loading diagram...

Reglas prácticas:

  • No optimizar prematuramente — medir primero con React DevTools Profiler
  • React.memo solo cuando el componente recibe las mismas props frecuentemente
  • useMemo/useCallback solo cuando el costo de recalcular es mayor que el costo de memoizar
  • Con React Compiler (React 19+), la memoización manual se vuelve innecesaria en la mayoría de casos

Server Components vs Client Components

Server Components cambian fundamentalmente la arquitectura de aplicaciones React. La distinción:

AspectoServer ComponentClient Component
DirectivaNinguna (default en App Router)"use client" al inicio del archivo
EjecuciónSolo en el servidorServidor (SSR) + cliente (hidratación)
Acceso a datosDirecto (async/await, DB, filesystem)Vía API o props del servidor
InteractividadNo — sin estado, sin efectos, sin eventosSí — useState, useEffect, onClick
Bundle JSNo se envía al clienteSe incluye en el bundle del cliente

La regla: empezar con Server Components por defecto. Agregar "use client" solo cuando se necesita interactividad, estado o APIs del navegador.

Ecosistema

CategoríaOpcionesNotas
Framework full-stackNext.js, Remix, TanStack StartNext.js domina con ~70% de nuevos proyectos React
Estado globalZustand, Jotai, Redux ToolkitZustand es el más adoptado para nuevos proyectos
EstilosTailwind CSS, CSS Modules, styled-componentsTailwind domina en proyectos nuevos
FormulariosReact Hook Form, FormikReact 19 Actions reduce la necesidad de librerías
TestingVitest + Testing Library, PlaywrightTesting Library promueve tests centrados en el usuario
Micro frontendsModule Federation, single-spaPara equipos grandes con deploys independientes

¿Por qué importa?

React definió el paradigma de UI basada en componentes que domina el desarrollo web. Con Server Components y React 19, evoluciona de una biblioteca de cliente a un modelo full-stack donde el servidor y el cliente colaboran en el mismo árbol de componentes. Para un ingeniero senior, entender la frontera entre Server y Client Components — y cuándo cruzarla — es la decisión arquitectónica más importante en cualquier proyecto React moderno.

Referencias

  • React Documentation — Meta. Documentación oficial con guías, API reference y tutoriales interactivos.
  • React 19 — React Team, 2024. Anuncio oficial con Actions, use(), React Compiler y nuevos hooks.
  • Server Components — React. Referencia oficial de React Server Components.
  • A Complete Guide to useEffect — Dan Abramov, 2019. Guía profunda sobre el modelo mental de efectos en React.
  • Making Sense of React Server Components — Josh W. Comeau, 2024. Explicación visual de Server Components y su impacto en la arquitectura.
  • React Compiler — React. Documentación del compilador que automatiza la memoización.

Contenido relacionado

  • TypeScript

    Superset tipado de JavaScript que añade tipos estáticos opcionales, mejorando la productividad del desarrollador, la detección de errores y la mantenibilidad del código.

  • Server Components

    Paradigma de React donde los componentes se ejecutan en el servidor, enviando solo HTML al cliente, reduciendo el bundle de JavaScript y mejorando el rendimiento.

  • Gestión de Estado

    Patrones y bibliotecas para gestionar el estado de aplicaciones frontend de forma predecible, desde estado local de componentes hasta estado global compartido.

  • Next.js

    Framework de React para aplicaciones web full-stack con Server Components, routing basado en archivos, SSR/SSG y optimizaciones de rendimiento integradas.

  • Micro Frontends

    Patrón arquitectónico que extiende los microservicios al frontend, permitiendo que equipos independientes desarrollen y desplieguen partes de una aplicación web de forma autónoma.

  • Web Components

    Estándares web nativos para crear componentes reutilizables y encapsulados que funcionan en cualquier framework o sin framework.

  • Plantilla React MFE

    Plantilla reutilizable para crear micro frontends con React, TypeScript, Tailwind CSS y Vite. Incluye sistema de diseno, testing y CI/CD.

  • React MFE Shell

    Shell de micro frontends con sistema de diseno completo, 24 componentes, 666 tests y cumplimiento WCAG AA. Publicado en npm como @jonmatum/react-mfe-shell.

  • Demo de React MFE Shell

    Aplicación de demostración interactiva para el sistema de diseno React MFE Shell con PWA, métricas automatizadas y showcase de componentes.

  • React Headless Menu

    Componente de menú headless para React con accesibilidad completa, cero estilos y soporte para teclado. Publicado en npm.

  • Mi Librería React

    Boilerplate para crear librerías React con TypeScript, Rollup, Jest, Tailwind CSS, Husky y publicación en npm.

  • Tailwind CSS

    Framework CSS utility-first que permite construir diseños directamente en el markup usando clases atómicas, eliminando la necesidad de escribir CSS custom.

  • Progressive Web Apps

    Aplicaciones web que usan tecnologías modernas para ofrecer experiencias similares a apps nativas: instalables, offline-capable y con notificaciones push.

  • Sistemas de Diseño

    Colección de componentes reutilizables, patrones y guías que aseguran consistencia visual y de interacción en productos digitales a escala.

  • Accesibilidad

    Práctica de diseñar y desarrollar productos digitales que puedan ser usados por todas las personas, incluyendo aquellas con discapacidades visuales, auditivas, motoras o cognitivas.

Conceptos