Adiós errores: Mejora el rendimiento de tu app con estos trucos React

Tu app en React se siente lenta y las actualizaciones de estado parecen eternas.

El truco

Antes (mal):

function ListaUsuarios({ usuarios }) {
  return (
    <ul>
      {usuarios.map((usuario) => (
        <UsuarioItem key={usuario.id} usuario={usuario} />
      ))}
    </ul>
  );
}

function UsuarioItem({ usuario }) {
  console.log('Renderizando:', usuario.nombre);
  return <li>{usuario.nombre}</li>;
}

Después (bien):

import React from 'react';

const UsuarioItem = React.memo(({ usuario }) => {
  console.log('Renderizando:', usuario.nombre);
  return <li>{usuario.nombre}</li>;
});

function ListaUsuarios({ usuarios }) {
  return (
    <ul>
      {usuarios.map((usuario) => (
        <UsuarioItem key={usuario.id} usuario={usuario} />
      ))}
    </ul>
  );
}

Los componentes funcionales se renderizan cada vez que el padre lo hace. Usando React.memo, evitamos renderizados innecesarios si las props no han cambiado. Asegúrate de que las props de UsuarioItem no sean objetos mutables para obtener el máximo provecho. Este simple ajuste puede reducir significativamente la carga de trabajo del DOM.

Optimizar pequeños detalles en React puede marcar una gran diferencia en el rendimiento de tu app.