React

¿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:

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:

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:

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:

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

Ecosistema

¿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.