Carga tu app React en un abrir y cerrar de ojos: El truco definitivo

¿Tu aplicación React tarda una eternidad en cargar? Puede ser culpa de componentes ineficientes.

El truco

ANTES (mal):

function MyComponent({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

DESPUÉS (bien):

import React, { memo } from 'react';

const ListItem = memo(({ item }) => {
  console.log('Rendering:', item.name);
  return <li key={item.id}>{item.name}</li>;
});

function MyComponent({ items }) {
  return (
    <ul>
      {items.map(item => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
}

Los componentes sin optimizar vuelven a renderizarse con cada cambio aunque no lo necesiten. Utilizando React.memo, prevenimos renderizados innecesarios en componentes funcionales, lo que reduce drásticamente el tiempo de carga. En el ejemplo, convertimos el componente de lista en un componente memoizado para evitar re-renderizados cuando las props no cambian, acelerando así la carga.

Optimizar componentes es clave para mejorar la velocidad de tu aplicación y ofrecer una experiencia de usuario más fluida.