React on Commentary of Takao

Error Boundaries y logging en frontend

Tue, 20 Jan 2026 00:00:00 +0900

Error Boundaries en React capturan errores de renderizado para mostrar una UI de fallback. Combinados con logging, permiten monitorear errores en producción.

Error Boundaries en React

Componentes que capturan errores en su subárbol con componentDidCatch() o static getDerivedStateFromError(). Reemplazan try/catch para errores de renderizado.

Logging de errores

Captura errores en Error Boundaries y envíalos a un servicio: Sentry, LogRocket, Datadog. Incluye stack trace, props, y contexto del usuario.

window.onerror y unhandledrejection

Captura errores no manejados globalmente. window.onerror para errores síncronos. unhandledrejection para promesas rechazadas.

React Compiler: Di adiós a la memoización manual

Sat, 10 Jan 2026 00:00:00 +0900

Introducción

El React Compiler (antes React Forget) es una herramienta de compilación que memoiza automáticamente componentes, hooks y valores de React analizando dependencias reactivas en tiempo de compilación.

El problema de la memoización manual

useMemo, useCallback, React.memo son verbosos, propensos a errores y fáciles de olvidar. Un useMemo faltante causa re-renderizados innecesarios; un array de dependencias incorrecto causa closures obsoletas.

Cómo funciona

Detección de valores reactivos (AST). 2. Construcción de grafo de dependencias. 3. Generación de código optimizado con caché integrada.

Lo que puedes eliminar

Con el React Compiler activado ya no necesitas: useMemo(), useCallback(), React.memo(), ni arrays de dependencias manuales.

Reglas para crear hooks personalizados en React

Sun, 10 Aug 2025 00:00:00 +0900

Los hooks personalizados son la forma principal de extraer lógica con estado en React. Deben seguir las mismas reglas que los hooks integrados.

Reglas fundamentales

Solo llama hooks en el nivel superior (no en condicionales, bucles o funciones anidadas).
Solo llama hooks desde componentes React o desde otros hooks.

Patrones de hooks personalizados

Un hook debe comenzar con use. Debe devolver un objeto o array con valores y funciones. La lógica de efecto debe limpiarse en el cleanup.

useMemo y useCallback: Optimización de rendimiento en React

Fri, 20 Jun 2025 00:00:00 +0900

useMemo memoiza valores calculados, useCallback memoiza funciones. Ambos evitan trabajo innecesario en re-renderizados.

useMemo

Solo recalcula el valor cuando cambian sus dependencias. Útil para cálculos costosos o para mantener referencias estables entre renderizados.

const sorted = useMemo(() => items.sort(), [items]);

useCallback

Devuelve la misma función a menos que cambien las dependencias. Esencial para pasar callbacks a componentes hijos memoizados.

const handleClick = useCallback(() => doSomething(id), [id]);

Cuándo usarlos

No optimices prematuramente. Solo usa estos hooks cuando perfiles muestren un problema real. Con el React Compiler, estos hooks serán innecesarios.

Lanzamiento oficial de React 19 y guía de funcionalidades prácticas

Wed, 05 Mar 2025 00:00:00 +0900

Introducción

React 19 representa un cambio de paradigma importante. Funciones antes restringidas a meta-frameworks como Next.js ahora están integradas en el núcleo estable de React.

Actions API y useActionState

Simplifica la gestión de mutaciones asíncronas. useActionState enlaza manejadores asíncronos directamente a atributos de formulario nativos, manejando automáticamente indicadores de carga.

useOptimistic

Para acciones interactivas como “me gusta” o envío de chats. Actualiza la IU instantáneamente antes de que la solicitud al servidor se complete, con capacidad de rollback integrada.

React Concurrent: Guía de renderizado concurrente

Fri, 06 Dec 2024 00:00:00 +0900

El renderizado concurrente de React permite que React interrumpa el trabajo de renderizado para manejar eventos de mayor prioridad. Con React 18+, startTransition y useDeferredValue permiten actualizaciones no urgentes sin bloquear la UI.

startTransition

Marca una actualización de estado como transición. React puede interrumpirla para manejar eventos urgentes como entrada de teclado.

startTransition(() => { setSearchQuery(input); });

useDeferredValue

Aplaza un valor para que React pueda mostrar contenido antiguo mientras carga el nuevo. Útil para búsquedas en listas grandes.

Patrones de Portal en React: Renderizado fuera del árbol padre

Tue, 03 Sep 2024 00:00:00 +0900

ReactDOM.createPortal renderiza un componente fuera del árbol DOM del padre, útil para modales, tooltips y dropdowns que necesitan evitar overflow: hidden o z-index del padre.

Uso básico

createPortal(children, domNode)

El portal se renderiza en domNode pero conserva el contexto React (props, estado, context API).

Casos de uso comunes

Modales, notificaciones toast, tooltips, menús contextuales, paneles laterales. Todos necesitan salir del flujo de layout del padre.

Accesibilidad

Los portales deben manejar el foco correctamente: atrapar foco dentro del modal, cerrar con Escape, restaurar foco al cerrar. Combinar con la Popover API nativa cuando sea posible.

Gestión de estado en React 2024: Context, Zustand, Jotai y más

Tue, 19 Mar 2024 00:00:00 +0900

La gestión de estado en React ha evolucionado. Además de useState/useReducer, existen soluciones para estado global, servidor y URL.

Estado local: useState y useReducer

useState para estado simple. useReducer para lógica compleja con múltiples transiciones de estado. Para la mayoría de componentes, useState es suficiente.

Estado global: Context API

React.createContext + useContext permite estado compartido sin prop drilling. Limitado a árbol de componentes. No ideal para estado que cambia frecuentemente (causa re-renderizados masivos).

React Server Components: El futuro del renderizado web

Mon, 08 Jan 2024 00:00:00 +0900

React Server Components (RSC) representan un cambio de paradigma. Los componentes se ejecutan exclusivamente en el servidor, enviando cero JavaScript al cliente. A diferencia del SSR tradicional, RSC produce un formato serializado especial (payload RSC) que el reconcilidor de React en el cliente usa para reconstruir el árbol de componentes sin ejecutar el código.

Límites servidor/cliente

Las directivas “use client” y “use server” definen el límite. Componentes sin directiva son server components por defecto. Los server components no pueden usar estado, efectos o APIs del navegador.