Mejores prácticas de rendimiento
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
//
Busca en todas las páginas de la documentación
Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.
Mide en Android de gama media primero: La clase Pixel 6a expone jank, presión de memoria y almacenamiento lento que iPhone Pro oculta - si pasa la referencia de Android, iOS generalmente está bien; lo inverso es falso.
Define TTI antes de optimizar: Inicio frío - pestaña principal interactiva (no solo ocultación de splash) - documenta la puerta en docs/performance-budgets.md con un dispositivo de referencia.
Publica presupuestos con propietarios asignados: Bundle MB, segundos de TTI, pisos de FPS y límites de memoria - los presupuestos anónimos se ignoran en la semana de crisis; ver Reglas de Presupuesto de Rendimiento.
Perfila compilaciones similares a la liberación: Los tiempos de Expo Go y cliente dev no son producción - usa la vista previa de EAS o variantes de lanzamiento para TTI, bundle y puntuaciones de Flashlight.
Separa JS FPS de UI FPS: JS en 0 significa que los toques se encolan incluso cuando UI FPS se ve bien - el jank de desplazamiento en feeds a menudo implica ambos hilos.
Instrumenta TTI con marcas: performance.now() en diseño de raíz y pantalla principal interactiva - envía eventos de analytics en producción, no solo console.info.
Mantén importaciones de _layout de raíz mínimas: Los SDK pesados, gráficos y editores pertenecen a rutas perezosas - cada importación de raíz está en la ruta crítica de inicio frío.
Retén splash hasta el primer fotograma significativo: Evita ocultación de splash - spinner de pantalla completa - contenido; carga una fuente de cuerpo para TTI, difiere el resto.
Difiere trabajo posterior a TTI con InteractionManager: Analytics, migraciones, configuración remota y precarga secundaria se ejecutan después de animaciones - cancela tareas al desmontar.
Analiza el tamaño del bundle en CI: react-native-bundle-visualizer en bundles --dev false - falla PRs sobre presupuesto sin excepción ADR.
Carga perezosamente pantallas pesadas de Expo Router: React.lazy + Suspense para informes, mapas y editores - confirma que los bloques de treemap dejan el bundle principal.
Usa importaciones de paquete estrecho: Rutas por icono y por función - el lodash completo y las reexportaciones de barril dominan los treemaps.
Registra Profiler de React DevTools en navegación: Cambio de pestaña, push/pop de pila, apertura de modal - fija contexto inestable y screenOptions antes de meorizar hojas.
Estabiliza padres de lista antes de fila memo: useCallback renderItem, keyExtractor de alcance de módulo y extraData para selección - ver Mejores prácticas de listas.
Predeterminado a FlatList para feeds crecientes: ScrollView monta cada hijo - cambia en ~20 filas o cualquier paginación; evalúa FlashList cuando profiling comprueba que el costo de montaje es dominante.
Ejecuta muestreo de Hermes en escenarios activos: Lanzamiento rápido, cambio de pestaña, inicio frío - exporta .cpuprofile a speedscope cuando CPU de JS picos sin confirmaciones de React obvias.
Marca puntuación de Flashlight en el escenario de desplazamiento principal: Puntuación agregada BAM en Android de referencia - compara iteraciones entre lanzamientos, no una demo en un dispositivo insignia.
Construye una matriz de dos dispositivos: Dispositivo de puerta de gama media + piso de presupuesto - las puntuaciones de insignia son solo informativas.
Limita memoria de lista y pagina con evicción: Los arrays de data no acotados son la fuga de RAM de sesión #1 - búfer circular o máximo de elementos con cursor persistente.
Limpia listeners en cada useEffect: AppState, NetInfo, navigation addListener, intervalos - la limpieza faltante duplica trabajo y retiene cierres.
Borra cachés al cerrar sesión: clear() de TanStack Query, MMKV scope de usuario, mapas de imagen global - cachés obsoletos son un defecto de memoria y seguridad.
Prueba de soak memoria durante 10 minutos: Desplazamiento realista, navegación por pila, fondo/primer plano - las fugas aparecen tarde, no en pruebas de humo de 30 segundos.
Sintoniza windowSize solo después de higiene: Menor reduce memoria; demasiado bajo causa filas en blanco - perfila con Flashlight antes de cambiar valores predeterminados.
Vincula regresiones a política de reversión: TTI > 15%, caída de puntuación > 10 puntos o excedente de bundle activa revisión de lanzamiento - documenta en Reglas de Presupuesto de Rendimiento.
Fija medición antes de micro-optimizaciones: Script de reproducción - commits de DevTools - puntos críticos de Hermes - treemap de bundle - no useMemo aleatorio en chips presentacionales.
Presupuestos escritos + dispositivo Android de referencia + compilaciones preview de lanzamiento + Profiler de React DevTools para navegación + muestreo de Hermes para puntos críticos de JS + Flashlight para puntuaciones de desplazamiento + visualizador de Metro en CI.
Mejores prácticas de listas primero - claves, memo, renderItem. Luego Profiler de React DevTools. Luego Profiler de muestreo de Hermes si la CPU de JS sigue siendo alta.
No - shell nativo, gráfico de módulo y sobrecarga dev difieren. Envía aprobación de perf en artefactos de vista previa/producción de EAS solamente.
Reglas de Presupuesto de Rendimiento posee umbrales, puertas de CI y propietarios. Esta sección posee herramientas de medición y patrones de corrección.
FlatList para feeds cortos y medianos con higiene correcta. FlashList cuando profiling muestra que el costo de reciclaje/montaje es dominante - compara con Flashlight antes de migrar.
Versiones del stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0 y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 19 jul 2026