Optimiza tu React App: Deja de hacerla más lenta sin darte cuenta

A menudo, una React App se vuelve lenta debido a renders innecesarios de componentes.

El truco

Código ANTES (mal):

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

  return (
    <ChildComponent data={data} handleClick={handleClick} />
  );
}

function ChildComponent({ data, handleClick }) {
  console.log("ChildComponent render");
  return <button onClick={handleClick}>Press me</button>;
}

Código DESPUÉS (bien):

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

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

  return (
    <ChildComponent data={data} handleClick={handleClick} />
  );
}

const ChildComponent = memo(({ data, handleClick }) => {
  console.log("ChildComponent render");
  return <button onClick={handleClick}>Press me</button>;
});

En el primer ejemplo, cada vez que se renderiza ParentComponent, se crea una nueva instancia de handleClick, lo que provoca que ChildComponent se vuelva a renderizar. Usar useCallback para memorizar handleClick y memo para el componente hijo optimiza el rendimiento previniendo renders innecesarios.

En resumen: Usa React.memo y useCallback para mantener tus componentes React rápidos y eficientes, evitando renders innecesarios y mejorando el rendimiento global.