La optimización del rendimiento en React es clave para garantizar que las aplicaciones sean rápidas y eficientes. React, por su diseño, minimiza actualizaciones innecesarias del DOM, pero hay técnicas adicionales que los desarrolladores pueden aplicar para mejorar aún más el rendimiento.

¿Por qué optimizar el rendimiento?

Una aplicación React mal optimizada puede:

• Ser más lenta: Experimentar retrasos en la interfaz de usuario.
• Consumir más recursos: Incrementar el uso de memoria y CPU.
• Reducir la experiencia del usuario: Especialmente en dispositivos con hardware limitado.

Técnicas de Optimización

1. Evitar Renderizados Innecesarios

React renderiza un componente cuando su estado o props cambian. Para evitar renderizados innecesarios:

Usar React.memo

React.memo memoriza el resultado de un componente y solo lo renderiza de nuevo si sus props cambian.

import React, { memo } from 'react';

const ChildComponent = memo(({ value }) => {
  console.log('Renderizando ChildComponent');
  return <p>{value}</p>;
});

function Parent() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <ChildComponent value="Fijo" />
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

2. Uso de useCallback para Memorización de Funciones

Cuando pasas funciones como props, React las vuelve a crear en cada renderizado. Esto puede evitarse con useCallback.

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

function Button({ onClick }) {
  return <button onClick={onClick}>Haz clic</button>;
}

function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Botón clicado');
  }, []);

  return (
    <div>
      <p>Contador: {count}</p>
      <Button onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

3. Uso de useMemo para Cálculos Costosos

useMemo memoriza el resultado de un cálculo costoso para evitar recalcularlo en cada renderizado.

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

function App() {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(5);

  const expensiveCalculation = useMemo(() => {
    console.log('Realizando cálculo costoso');
    return number * 2;
  }, [number]);

  return (
    <div>
      <p>Resultado: {expensiveCalculation}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
      <button onClick={() => setNumber(number + 1)}>Cambiar número</button>
    </div>
  );
}