React JS

En el Radar compartido: Adopt (valoración de la edición aportada).

Cómo funciona

Los componentes describen la interfaz a partir de props y estado. Hooks coordinan comportamiento y composición; el compilador puede automatizar optimizaciones cuando se configura.

Ejemplo de uso

Un componente recibe importe y plazo, calcula una vista derivada y muestra una tabla. Mantener validación de entradas y reglas de negocio separadas de la presentación.

Modelo mental

La interfaz es una función del estado: UI = f(props, estado). Cuando el estado cambia, React vuelve a ejecutar el componente y aplica al DOM solo las diferencias. De ahí salen las reglas prácticas: no mutar el estado, derivar lo que se pueda calcular y mantener el estado lo más cerca posible de donde se usa.

Tipos de estado y dónde vive cada uno

Tipo de estado	Ejemplo	Herramienta habitual
Local de UI	Modal abierto, pestaña activa	useState, useReducer
Derivado	Total de cuotas a partir del plazo	Calcular en el render, sin estado
De servidor	Lista de créditos del cliente	TanStack Query, SWR o el framework (loaders)
De formulario	Campos, errores, envío	React Hook Form, acciones de formulario
Global de cliente	Usuario, tema, idioma	Context o una librería pequeña (Zustand)
En la URL	Filtros, página, búsqueda	Router (query params)

Tratar los datos del servidor como estado global de cliente es una de las principales fuentes de complejidad innecesaria.

Acciones y formularios (React 19)

import { useActionState } from 'react';

async function simular(
  _: Resultado | null,
  datos: FormData,
): Promise<Resultado> {
  const res = await fetch('/api/simulador', { method: 'POST', body: datos });
  return res.ok ? res.json() : { error: 'No se pudo simular' };
}

export function Simulador() {
  const [resultado, accion, pendiente] = useActionState(simular, null);
  return (
    <form action={accion}>
      <label>
        Monto <input name="monto" type="number" required min={100000} />
      </label>
      <label>
        Plazo (meses){' '}
        <input name="plazo" type="number" required min={3} max={60} />
      </label>
      <button disabled={pendiente}>
        {pendiente ? 'Calculando…' : 'Simular'}
      </button>
      {resultado?.error && <p role="alert">{resultado.error}</p>}
      {resultado?.cuota && <p>Cuota estimada: {resultado.cuota}</p>}
    </form>
  );
}

useOptimistic permite mostrar el resultado esperado mientras la acción se completa, y use lee promesas o contexto dentro del render con Suspense.

Errores frecuentes con useEffect

En lugar de…	Mejor
Efecto que sincroniza un estado derivado	Calcularlo en el render
Efecto que responde a un clic	Lógica en el manejador del evento
fetch en un efecto sin cancelación	Librería de datos de servidor o loader del framework
Efecto que reinicia estado al cambiar una prop	Cambiar la key del componente

Los efectos sirven para sincronizar con sistemas externos (suscripciones, APIs del navegador, librerías no React).

Rendimiento

El React Compiler memoriza automáticamente componentes y valores, lo que reduce la necesidad de useMemo, useCallback y memo manuales. Antes de optimizar, mide con el Profiler de React DevTools. Las mejoras con más impacto suelen ser: dividir código por rutas, virtualizar listas largas, evitar cascadas de peticiones y no colocar estado que cambia mucho en un contexto muy alto del árbol.

Frameworks

React por sí solo no resuelve rutas, carga de datos ni renderizado en servidor. Para aplicaciones nuevas, la documentación oficial recomienda partir de un framework (Next.js, React Router, Expo para móvil) o de Vite con un router si la aplicación es solo de cliente. Los Server Components requieren un framework que los soporte.

Criterios de implementación

Planificar renderizado, carga de datos y accesibilidad. Medir antes de optimizar y comprobar requisitos del compilador y del framework elegido.