🧠 useCallback: memorizar funciones para optimizar React

🧠 useCallback en React: memorizar funciones para optimizar componentes

El Hook useCallback permite memorizar funciones en React, evitando que se redefinan en cada renderizado. Esto es útil para optimizar componentes, especialmente aquellos que se pasan como props a componentes hijos que dependen de igualdad de referencias.

---

1️⃣ Sintaxis básica de useCallback

const memoizedFunction = useCallback(
  () => {
    // función a memorizar
  },
  [dependencias]
);
  

Donde dependencias son los valores que, al cambiar, harán que la función se vuelva a crear.

---

2️⃣ Ejemplo práctico: contador con función memorizada

import { useState, useCallback } from "react";

function Contador() {
  const [contador, setContador] = useState(0);

  const incrementar = useCallback(() => {
    setContador(c => c + 1);
  }, []);

  return (
    <div>
      <h2>Contador: {contador}</h2>
      <button onClick={incrementar}>Incrementar</button>
    </div>
  );
}

export default Contador;
  

Ejemplo visual de useCallback

Contador: 0

---

3️⃣ Cuándo usar useCallback

• ⚡ Cuando pasas funciones como props a componentes hijos que dependen de igualdad de referencias.
• 🧠 Para evitar renders innecesarios de componentes memoizados (React.memo).
• 📦 En funciones complejas que no necesitan redefinirse en cada render.

---

4️⃣ Ejemplo avanzado: optimizando componente hijo

Memorizamos la función y evitamos renderizados innecesarios del componente hijo.

import { useState, useCallback } from "react";

const Hijo = React.memo(({ incrementar }) => {
  console.log("Render del hijo");
  return <button onClick={incrementar}>Incrementar desde hijo</button>;
});

function Padre() {
  const [contador, setContador] = useState(0);

  const incrementar = useCallback(() => {
    setContador(c => c + 1);
  }, []);

  return (
    <div>
      <h2>Contador: {contador}</h2>
      <Hijo incrementar={incrementar} />
    </div>
  );
}

export default Padre;
  

---

5️⃣ Resumen

• 🧠 useCallback memoriza funciones y optimiza renderizados.
• ⚡ Evita que funciones se redefinan en cada render.
• ✅ Útil en componentes memoizados y props que dependen de funciones.

← Volver al índice