Revoluciona tu aplicación de React: optimización de rendimiento con memo y useCallback

¿Tu aplicación de React se ralentiza? Quizás estás lidiando con renders innecesarios.

El truco

Antes (mal):

function ParentComponent({ data }) {
  const handleClick = () => {
    console.log('Clicked!');
  };

  return (
    <div>
      {data.map(item => (
        <ChildComponent key={item.id} item={item} onClick={handleClick} />
      ))}
    </div>
  );
}

Después (bien):

import React, { memo, useCallback } from 'react';

function ParentComponent({ data }) {
  const handleClick = useCallback(() => {
    console.log('Clicked!');
  }, []);

  return (
    <div>
      {data.map(item => (
        <ChildComponent key={item.id} item={item} onClick={handleClick} />
      ))}
    </div>
  );
}

const ChildComponent = memo(({ item, onClick }) => {
  console.log('Rendering ChildComponent');
  return (
    <div onClick={onClick}>
      {item.name}
    </div>
  );
});

Usar useCallback garantiza que la función handleClick se memorice y no cambie en cada render, evitando que los componentes hijos se rendericen innecesariamente si no hay cambios en las dependencias. memo evita renderizados innecesarios de ChildComponent cuando sus props no han cambiado, optimizando el rendimiento.

Una pequeña inversión en optimización puede marcar una gran diferencia en el rendimiento de tu aplicación.