React Hooks: Optimización de Renderizados con useMemo y useCallback

Tu aplicación React está realizando renderizados innecesarios, afectando el rendimiento cuando las funciones o datos se recalculan innecesariamente.

El truco

Antes

import React from 'react';

function Componente({ calcular, valor }) {
  const resultado = calcular(valor);

  return <div>Resultado: {resultado}</div>;
}

export default function App() {
  const calcular = (num) => {
    console.log('Calculando...');
    return num * 2;
  };

  return <Componente calcular={calcular} valor={5} />;
}

Después

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

function Componente({ calcular, valor }) {
  const resultado = useMemo(() => calcular(valor), [calcular, valor]);

  return <div>Resultado: {resultado}</div>;
}

export default function App() {
  const calcular = useCallback((num) => {
    console.log('Calculando...');
    return num * 2;
  }, []);

  return <Componente calcular={calcular} valor={5} />;
}

Utiliza useMemo para evitar el recalculo de valores cuando las dependencias no cambian y useCallback para memorizar funciones y evitar que se reconstruyan en cada render. Esto mejora significativamente el rendimiento al limitar los renderizados innecesarios.

Con useMemo y useCallback, optimizas el rendimiento de tu app asegurando que las computaciones y funciones solo se recalculen cuando sea realmente necesario.