React Academy · Lección

Memorizar valores de contexto con useMemo

Envuelva los objetos de valor del contexto en useMemo para que los consumidores no se vuelvan a renderizar innecesariamente.

Memorizar valores de contexto con useMemo es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección aprenderá por qué los objetos de valor del contexto deben memorizarse con useMemo y cómo configurar correctamente las dependencias para evitar nuevas renderizaciones innecesarias.

El problema de la referencia de los objetos

Cada vez que un componente Provider vuelve a renderizarse, se crea un nuevo literal de objeto `{ ... }` como valor del contexto, aunque su contenido sea el mismo. Todos los consumidores vuelven a renderizarse porque la referencia ha cambiado.

// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

Solución con useMemo

Envuelva el valor del contexto en useMemo para que se devuelva la misma referencia de objeto entre renderizaciones cuando no haya cambiado nada en el arreglo de dependencias.

const value = useMemo(
  () => ({ user, logout }),
  [user, logout]
);

<UserCtx.Provider value={value}>
  {children}
</UserCtx.Provider>

Elección cuidadosa de las dependencias

Incluya en el arreglo de dependencias todos los valores utilizados dentro de useMemo. Si faltan dependencias, se producirán valores obsoletos. Incluya props primitivas, como cadenas y números, y referencias estables, como funciones envueltas en useCallback.

Funciones estables con useCallback

Las funciones cambian de referencia en cada renderización. Envuélvalas en useCallback antes de incluirlas en un valor de contexto de useMemo para evitar nuevas renderizaciones innecesarias.

const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

const value = useMemo(() => ({ user, logout }), [user, logout]);

Cuándo no es necesaria la memorización

Si el componente Provider nunca vuelve a renderizarse, por ejemplo, porque se encuentra en la parte superior del árbol y su componente padre nunca cambia, useMemo añade sobrecarga sin aportar beneficios. Memorice solo cuando el propio Provider vuelva a renderizarse.

Los valores primitivos ya son estables

Si el valor de su contexto es un primitivo, como una cadena, un número o un booleano, NO necesita useMemo: los primitivos se comparan por valor, no por referencia. `value={isDark}` no provocará nuevas renderizaciones adicionales.

// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

Análisis del efecto de la memorización

Use el perfilador de React DevTools para comprobar que envolver el valor del contexto en useMemo realmente reduce las nuevas renderizaciones. Grabe una sesión antes y después para observar la diferencia en el número de confirmaciones.

Contextos memorizados anidados

Cuando haya varios contextos anidados, memorice cada uno de forma independiente. Los cambios en un contexto no afectarán al valor memorizado de otro.

Patrón del componente Provider

Encapsule el contexto, el estado y la memorización dentro de un componente Provider específico. Exporte un hook personalizado para consumir el contexto. Este es el patrón canónico para contextos reutilizables.

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);
  return <UserCtx.Provider value={value}>{children}</UserCtx.Provider>;
}

export const useUser = () => useContext(UserCtx);

Comprobación rápida

¿Cuál es el motivo principal para envolver un objeto de valor del contexto en useMemo?

Resumen

Envuelva los objetos de valor del contexto en useMemo con las dependencias correctas. Estabilice los valores de función con useCallback. Los primitivos no necesitan memorización. Encapsule la configuración del contexto en un componente Provider con un hook personalizado.

Próxima lección

Próxima lección: **Patrón de selectores de contexto**; implementará un hook selector que solo haga volver a renderizarse a los consumidores cuando cambie una parte específica del contexto.

Preguntas frecuentes

¿La lección «Memorizar valores de contexto con useMemo» es gratis?

Sí — el texto completo de «Memorizar valores de contexto con useMemo» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Memorizar valores de contexto con useMemo»?

Envuelva los objetos de valor del contexto en useMemo para que los consumidores no se vuelvan a renderizar innecesariamente. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Memorizar valores de contexto con useMemo»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Separar contextos para limitar los renderizados
Memorizar valores de contexto con useMemo
Patrón de selectores de contexto
Cuándo no utilizar Context

← Volver a React Academy