El rendimiento de la aplicación React Boosting es crucial para una experiencia de usuario positiva. Este artículo describe siete patrones de rendimiento probados obtenidos de optimizar numerosas aplicaciones de reacción de producción.

1. memoización con usememo y usecallback :

Problema: re-renderizadores innecesarios debido a accesorios o estados sin cambios.

Solución: Cache Operaciones y referencias de funciones computacionalmente costosas.

const ExpensiveComponent = ({ items }) => {
  const sortedList = useMemo(() => items.sort((a, b) => a.price - b.price), [items]);
  const handleClick = useCallback(() => {
    console.log('Item clicked:', sortedList[0]);
  }, [sortedList]);
  return ;
};

Mejores prácticas: Use con react.memo para componentes infantiles para evitar actualizaciones de subárbol innecesarias. Ideal para cálculos complejos (clasificación, filtrado), devoluciones de llamada pasadas a niños optimizados y valores de proveedor de contexto estable.

2. Lazy Carging and Code división:

problema: gran tamaño de paquete inicial que impacta la primera pintura contentful (fcp).

Solución: Dynamic Imports y Suspense para la carga a pedido.

const HeavyChartLibrary = React.lazy(() => import('./ChartComponent'));

const Dashboard = () => (
  }>
    {showCharts && }
  
);

Avanzado: Integre con React Router para la división de código basado en ruta.

3. virtualized listas para grandes conjuntos de datos:

Problema: renderizando miles de elementos abruman el dom.

solución: react-window renderiza solo elementos visibles.

import { FixedSizeList } from 'react-window';

const BigList = ({ items }) => (
  
    {({ index, style }) => (
      
...
    )}
  
);

Bonus: use variablesizeList para las alturas de fila dinámica y react-virtualized-auto-syer para contenedores receptivos.

4. Eficiente gestión de estado:

Problema: actualizaciones de estado múltiples que causan re-renderizadores en cascada.

Solución: apalancamiento de reaccionamiento de lotes automáticos de 18.

reaccionar 18:

setCount(1);
setText('Updated'); // Single re-render

pre-reaccion 18 o para escenarios complejos: use useeducer para actualizaciones de estado atómico.

5. desacreditar llamadas de API:

Problema: Solicitudes de API excesivas de la entrada de usuario rápido (por ejemplo, barras de búsqueda).

Solución: a Custom UsedEbote Hook.

import { useEffect, useState } from 'react';

const useDebouncedValue = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  return debouncedValue;
};

pro consejo: Combine con abortController para cancelar las solicitudes pendientes.

6. API de contexto optimizado:

Problema: re-renderizadores de los consumidores de contexto debido a cambios no relacionados.

Solución: divide contexts y memoice los valores del proveedor.

7. actualizaciones de ui optimistas:

problema: lento ui debido a esperar las respuestas API.

Solución: Proporcione comentarios visuales inmediatos y vuelva a revertir el error.

Performance Checklist:

1. Perfil Re-Renders con React DevTools Profiler.
2. analizar el tamaño del paquete con fuente-map-explorer.
3. prueba con la pestaña Performance de Chrome (CPU Throtttling).
4. use react.memo , usememo , usecallback estratégicamente.
5. Implementar la carga incremental.
6. optimizar imágenes/medios con carga perezosa.
7. Considere la representación del lado del servidor para contenido crítico.

recuerde: perfil primero, optimice el segundo! Estas técnicas son aplicables en varios marcos React (Next.js, Gatsby, etc.).