React Best Practices

¿Qué hace React Best Practices?

Guía completa de optimización de rendimiento para aplicaciones React. Contiene 37 reglas en 7 categorías, priorizadas por impacto.

Categorías de Reglas por Prioridad

Prioridad	Categoría	Impacto	Prefijo
1	Eliminación de Cascadas	CRÍTICO	async-
2	Optimización de Tamaño de Bundle	CRÍTICO	bundle-
3	Fetching de Datos en Cliente	MEDIO-ALTO	client-
4	Optimización de Re-render	MEDIO	rerender-
5	Rendimiento de Renderizado	MEDIO	rendering-
6	Rendimiento de JavaScript	BAJO-MEDIO	js-
7	Patrones Avanzados	BAJO	advanced-

Referencia Rápida

1. Eliminación de Cascadas (CRÍTICO)

• async-defer-await - Mueve await a las ramas donde se usa realmente
• async-parallel - Usa Promise.all()/allSettled() para operaciones independientes

2. Optimización de Tamaño de Bundle (CRÍTICO)

• bundle-dynamic-imports - React.lazy() para componentes pesados
• bundle-defer-third-party - Carga análisis/registro bajo demanda
• bundle-conditional - Carga módulos solo cuando la funcionalidad está activada
• bundle-preload - Precarga al pasar el ratón/para velocidad percibida

3. Fetching de Datos en Cliente (MEDIO-ALTO)

• client-query-dedup - Usa TanStack Query para deduplicación automática de solicitudes
• client-event-listeners - Deduplica listeners de eventos globales
• client-passive-event-listeners - Usa listeners pasivos para rendimiento de scroll
• client-localstorage-schema - Versiona y minimiza datos de localStorage

4. Optimización de Re-render (MEDIO)

• rerender-defer-reads - No te suscribas a estado solo usado en callbacks
• rerender-memo - Extrae trabajo costoso en componentes memoizados
• rerender-dependencies - Usa dependencias primitivas en efectos
• rerender-derived-state - Suscríbete a booleanos derivados, no a valores crudos
• rerender-functional-setstate - Usa setState funcional para callbacks estables
• rerender-lazy-state-init - Pasa función a useState para valores costosos
• rerender-transitions - Usa startTransition para actualizaciones no urgentes

5. Rendimiento de Renderizado (MEDIO)

• rendering-animate-svg-wrapper - Anima un div contenedor, no el elemento SVG
• rendering-content-visibility - Usa content-visibility para listas largas
• rendering-hoist-jsx - Extrae JSX estático fuera de componentes
• rendering-svg-precision - Reduce la precisión de coordenadas SVG
• rendering-activity - Usa el componente Activity para mostrar/ocultar
• rendering-conditional-render - Usa ternario, no && para condicionales

6. Rendimiento de JavaScript (BAJO-MEDIO)

• js-batch-dom-css - Agrupa cambios CSS mediante clases o cssText
• js-index-maps - Construye Map para búsquedas repetidas
• js-cache-property-access - Almacena en caché propiedades de objetos en bucles
• js-cache-function-results - Almacena en caché resultados de funciones en Map a nivel de módulo
• js-cache-storage - Almacena en caché lecturas de localStorage/sessionStorage
• js-combine-iterations - Combina múltiples filter/map en un solo bucle
• js-length-check-first - Verifica la longitud del array antes de comparaciones costosas
• js-early-exit - Retorna temprano de funciones
• js-hoist-regexp - Eleva la creación de RegExp fuera de bucles
• js-min-max-loop - Usa bucle para min/max en lugar de sort
• js-set-map-lookups - Usa Set/Map para búsquedas O(1)
• js-tosorted-immutable - Usa toSorted() para inmutabilidad

7. Patrones Avanzados (BAJO)

• advanced-event-handler-refs - Almacena manejadores de eventos en refs
• advanced-use-latest - useLatest para referencias estables de callbacks

Cómo Usar

Cada archivo de regla en references/ contiene: explicación, ejemplos de código incorrecto/correcto y contexto. Lee archivos individuales según sea necesario.