Destruye esos errores ocultos que matan el rendimiento de tu app React

Los re-renderizados innecesarios en componentes React pueden ser una pesadilla para el rendimiento.

El truco

Antes (mal):

import React from 'react';

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

export default MyComponent;

Después (bien):

import React from 'react';

const ListItem = React.memo(({ item }) => {
  return <li>{item.value}</li>;
});

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

export default MyComponent;

Usar React.memo evita re-renderizados innecesarios de componentes que reciben las mismas props. Al separar ListItem y usar React.memo, optimizamos el rendimiento ya que ListItem solo se re-renderiza si item cambia.

Optimiza tus componentes React y siente la diferencia en el rendimiento de tu app.