React Academy · Lección

Separar contextos para limitar los renderizados

Separe los valores que cambian con frecuencia de los estables en contextos diferentes.

Separar contextos para limitar los renderizados es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 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á a dividir los Contextos de React en proveedores independientes para minimizar las nuevas renderizaciones cuando solo cambia una parte del valor del contexto.

El problema de las nuevas renderizaciones con Context

Cada componente que llama a useContext(MyCtx) vuelve a renderizarse cuando cambia CUALQUIER parte del valor del contexto, incluso si la parte que utiliza no ha cambiado. Un único contexto grande puede provocar muchas nuevas renderizaciones innecesarias.

División según la frecuencia de actualización

Separe los valores que cambian con frecuencia de los que rara vez cambian. Coloque cada grupo en su propio contexto. Los consumidores se suscriben únicamente al contexto que necesitan.

const ThemeCtx = createContext('light');
const UserCtx = createContext(null);
// theme changes rarely; user changes on login/logout — same frequency is fine
// but notifCount changes every second — split it out!

Separación de los contextos de datos y despacho

Un patrón habitual consiste en dividir un contexto para los datos de estado, que se vuelven a renderizar con cada cambio, y otro para las funciones de despacho o actualización, que son estables y nunca provocan nuevas renderizaciones en los consumidores. Los consumidores que solo usan el despacho no vuelven a renderizarse cuando cambian los datos.

const CountCtx = createContext(0);
const SetCountCtx = createContext(() => {});

function Provider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountCtx.Provider value={count}>
      <SetCountCtx.Provider value={setCount}>
        {children}
      </SetCountCtx.Provider>
    </CountCtx.Provider>
  );
}

Memorización del contexto de despacho

Los setters de useState son estables, es decir, mantienen la misma referencia en cada renderización, por lo que el valor del contexto de despacho no cambia. Sin embargo, si calcula un objeto de acciones, envuélvalo en useMemo.

const actions = useMemo(() => ({
  increment: () => setCount(c => c + 1),
  reset: () => setCount(0),
}), []); // stable — empty deps

Proveedores anidados

Anide varios proveedores en el árbol de componentes. Los consumidores importan y utilizan únicamente el contexto específico que necesitan, lo que mantiene acotadas las suscripciones.

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationsProvider>
          <Router />
        </NotificationsProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

Análisis del rendimiento antes de dividir

Analice siempre el rendimiento con React DevTools antes de dividir los contextos. Las nuevas renderizaciones innecesarias solo son un problema si resultan costosas. No complique en exceso contextos cuya renderización sea rápida.

Desventajas de dividir el contexto

Más contextos implican más proveedores en el árbol de componentes. Esto aumenta la carga cognitiva. Divida los contextos únicamente cuando el análisis del rendimiento muestre un problema, no de forma preventiva.

Combinación con React.memo

Incluso con un único contexto, envolver los componentes secundarios costosos en React.memo hace que solo vuelvan a renderizarse cuando cambian sus props, no cuando cambia el contexto. Esta puede ser una alternativa más sencilla que dividirlo.

const ExpensiveChild = React.memo(function({ label }) {
  return <div>{label}</div>;
}); // won't re-render on context change if label hasn't changed

useReducer + Context

Combine useReducer con Context para gestionar estados complejos. Almacene el estado en un contexto y la función de despacho en otro. El despacho es estable; el estado se actualiza con cada acción.

Comprobación rápida

¿Por qué mejora el rendimiento separar el estado y el despacho en contextos independientes?

Resumen

Divida los contextos según la frecuencia de actualización: coloque el estado que cambia con frecuencia en un contexto y el despacho o los setters estables en otro. Analice primero el rendimiento, divida solo cuando sea relevante y considere React.memo como una alternativa más sencilla.

Próxima lección

Próxima lección: **Memorización de valores de contexto con useMemo**; envolverá los objetos de valor del contexto en useMemo para que los consumidores no vuelvan a renderizarse cuando los datos no hayan cambiado.

Preguntas frecuentes

¿La lección «Separar contextos para limitar los renderizados» es gratis?

Sí — el texto completo de «Separar contextos para limitar los renderizados» 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 «Separar contextos para limitar los renderizados»?

Separe los valores que cambian con frecuencia de los estables en contextos diferentes. 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 1 de 4.

¿Cuánto tiempo toma la lección «Separar contextos para limitar los renderizados»?

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