Cursos Empresas Blog Live Conf Precios

React Memo: cuándo optimizar componentes

Clase 1 de 31 • Curso de React Avanzado

Contenido del curso

Patrones de renderizado y composición

Navegación con React Router

Manejo del estado en React

Comunicación con servidor y data fetching

Sigue avanzando con tus conocimientos de React

31
Optimización de Componentes en React con TypeScript
02:46 min

Resumen

Optimizar el rendimiento de una aplicación en React es una de las habilidades más valoradas en el desarrollo frontend actual. Comprender herramientas como React Memo y conocer el ecosistema que rodea a esta librería te posiciona como un profesional competitivo en una industria donde más del 40 % de los desarrolladores ya eligen React como su tecnología principal.

¿Qué es React Memo y cuándo deberías usarlo?

React Memo es una función de orden superior (higher-order function) que permite memorizar un componente funcional. En la práctica, esto significa que el componente solo se va a volver a renderizar cuando sus props cambien. Si las props permanecen iguales, React omite el renderizado y reutiliza el resultado anterior.

Esto resulta especialmente útil en componentes que reciben las mismas props de forma repetida, ya que evita renderizados innecesarios y mejora el rendimiento general de la aplicación.

Sin embargo, hay una advertencia importante: no siempre es necesario utilizar React Memo. La recomendación es aplicarlo únicamente cuando detectes que un componente se está renderizando de forma innecesaria y que ese comportamiento está afectando el rendimiento real de tu aplicación.

¿Qué conceptos avanzados complementan a React Memo?

Además de React Memo, existen otros conceptos avanzados que permiten construir aplicaciones de alto nivel:

Patrones de renderizado: estrategias para controlar cómo y cuándo se actualizan los componentes.
Enrutamiento: manejo de la navegación entre vistas dentro de una single page application.
Manejo del estado: herramientas como Context API, Zustand, Redux y máquinas de estado para administrar datos compartidos entre componentes.

Estos temas forman parte del aprendizaje progresivo en React con TypeScript y son fundamentales para cualquier desarrollador que quiera llevar sus habilidades al siguiente nivel.

¿Por qué React lidera la demanda laboral en desarrollo frontend?

Los números hablan por sí solos. En 2023, más de 10,000 ofertas de trabajo en Estados Unidos buscaron específicamente desarrolladores con experiencia en React. Las empresas apuestan por esta tecnología porque permite construir aplicaciones robustas y eficaces.

Algunos datos que refuerzan esta tendencia:

Más del 40 % de los desarrolladores lo eligen como su herramienta principal.
Los desarrolladores de React se encuentran entre los mejor pagados de la industria.
Su ecosistema cuenta con más de 200,000 paquetes en NPM, lo que amplía enormemente las posibilidades de creación.

¿Qué hace tan fuerte a la comunidad de React?

La mayor fortaleza de React es, sin duda, su comunidad activa y global. Con más de dos millones de preguntas en Stack Overflow, prácticamente cualquier problema que enfrentes ya habrá sido resuelto por alguien más. Esto hace que aprender y crecer en React sea mucho más accesible.

La combinación de popularidad, demanda laboral, salarios competitivos, un ecosistema expansible y una comunidad sólida convierte a React en la opción preferida por desarrolladores en todo el mundo. Si estás buscando una tecnología que abra puertas en la industria, dominar React y sus herramientas avanzadas como React Memo es un paso estratégico.

¿Ya has utilizado React Memo en tus proyectos? Comparte tu experiencia y cuéntanos en qué casos te ha resultado más útil.

🧠 React.memo

React.memo es una función de orden superior (HOC) que memoriza un componente funcional.

👉 Hace una comparación superficial (shallow comparison) de las props.

👉 Si las props no cambian, el componente no se vuelve a renderizar.

Es una optimización de rendimiento, no una herramienta obligatoria.

⚠️ Importante:

Solo úsalo cuando exista un problema real de renderizados innecesarios. No optimices “por si acaso”.

📌 Ejemplo básico

Sin React.memo:

function Child({ value }: { value: number }) {
  console.log("Child render");
  return <div>{value}</div>;
}

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

  return (
    <>
      <button onClick={() => setCount(count + 1)}>+</button>
      <Child value={10} />
    </>
  );
}

Cada vez que Parent cambia count, Child también se renderiza, aunque value siga siendo 10.

Con React.memo:

const Child = React.memo(({ value }: { value: number }) => {
  console.log("Child render");
  return <div>{value}</div>;
});

Ahora Child solo se renderiza si value cambia 🎯

🧮 useMemo

useMemo memoriza valores.

Se ejecuta durante el render y devuelve un valor memorizado.

Evita recalcular cosas costosas en cada render.

📌 Ejemplo

const expensiveCalculation = (num: number) => {
  console.log("Calculating...");
  return num * 1000;
};

function Component({ number }: { number: number }) {
  const result = useMemo(() => {
    return expensiveCalculation(number);
  }, [number]);

  return <div>{result}</div>;
}

Si number no cambia, la función no se vuelve a ejecutar 🔥

🔁 useCallback

useCallback memoriza funciones.

En React, las funciones se recrean en cada render. Eso rompe la comparación superficial de React.memo.

📌 Problema típico

const Child = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log("Child render");
  return <button onClick={onClick}>Click</button>;
});

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

  const handleClick = () => {
    console.log("Clicked");
  };

  return (
    <>
      <button onClick={() => setCount(count + 1)}>+</button>
      <Child onClick={handleClick} />
    </>
  );
}

Aunque Child esté memorizado, se renderiza siempre porque handleClick es una nueva referencia en cada render.

✅ Solución con useCallback

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

Ahora la referencia es estable y Child no se renderiza innecesariamente 🎯

⚔️ Diferencia entre React.memo, useMemo y useCallback

React.memo memoriza un componente
useMemo memoriza un valor
useCallback memoriza una función

Los tres son herramientas de optimización de rendimiento.

⚡ Diferencia entre useMemo / React.memo vs useEffect

Esta es la parte más importante conceptualmente 👇

🧠 React.memo y useMemo

Se ejecutan durante el render
Sirven para optimizar rendimiento
Previenen cálculos o renderizados innecesarios
No ejecutan efectos secundarios

Ejemplo correcto:

const value = useMemo(() => expensiveCalculation(number), [number]);

⚡ useEffect

Se ejecuta después del render
Sirve para efectos secundarios (side effects)
No optimiza renders
No memoriza valores

Ejemplos reales de uso:

Llamadas HTTP
Suscripciones
Timers
Manipulación del DOM
Sincronización con APIs externas

Ejemplo:

useEffect(() => {
  fetchData();
}, [userId]);

Cuando userId cambia, el efecto se ejecuta después del render.

🚫 Error común: usar useEffect para "calcular"

Incorrecto:

useEffect(() => {
  setValue(expensiveCalculation(number));
}, [number]);

¿Qué pasa aquí?

Render
Se ejecuta el effect
Se hace setState
Segundo render

Eso genera un render extra innecesario ❌

La forma correcta sería:

const value = useMemo(() => expensiveCalculation(number), [number]);

Más limpio y más eficiente 🔥

🧩 Regla mental clara

Si estás calculando algo → piensa en useMemo

Si estás pasando funciones → piensa en useCallback

Si quieres evitar re-render de un componente → React.memo

Si estás haciendo algo externo al render → useEffect

🧠 Nivel más avanzado

Estas herramientas son micro-optimizaciones.

Antes de usarlas deberías tener claros:

Cómo funciona el ciclo de render de React
Qué es reconciliación
Qué dispara un render
Cómo funcionan las referencias en JavaScript
Manejo de estado (Context, Zustand, Redux)
Arquitectura de componentes

Porque muchas veces el verdadero problema no es que falte useMemo, sino que el diseño del estado está mal estructurado.