React Academy · Lección

Cuándo no utilizar Context

Reconozca los casos en los que pasar props, utilizar composición o un gestor de estado son opciones más adecuadas.

Cuándo no utilizar Context es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 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á cuándo React Context no es la herramienta adecuada y reconocerá situaciones en las que el paso de props, la composición o un gestor de estado son opciones más adecuadas y sencillas.

El contexto no es una solución mágica

El contexto se usa a menudo en exceso. Los desarrolladores recurren a él para evitar pasar props, pero esto crea dependencias ocultas, dificulta las pruebas de los componentes y puede perjudicar el rendimiento.

Cuándo son mejores las props

Si un valor lo utilizan entre 1 y 3 componentes estrechamente anidados, pasar props es más sencillo, explícito y fácil de rastrear. El contexto añade código repetitivo del proveedor y oculta el flujo de datos.

// Don't need Context for this
function Page() {
  const [color, setColor] = useState('blue');
  return <Header color={color} />; // simple, clear
}

Cuándo es mejor la composición

Si necesita evitar pasar props a través de 3 niveles o más, pruebe primero con la composición: pase como prop el consumidor completamente renderizado. No necesita contexto y el flujo de datos sigue siendo explícito.

El contexto causa acoplamiento oculto

Un componente que llama a useContext(UserCtx) no se puede reutilizar sin envolverlo en un UserProvider. Las props hacen explícitas las dependencias: puede ver exactamente qué necesita un componente en su firma.

Actualizaciones de alta frecuencia

No use Context para valores que cambien muchas veces por segundo (por ejemplo, la posición del ratón o el progreso de una animación). Cada cambio vuelve a renderizar a todos los consumidores. Use refs, almacenes externos o una biblioteca basada en señales.

El contexto no es un gestor de estado

El contexto solo distribuye valores; no incluye almacenamiento en caché, herramientas de desarrollo ni middleware. Para estados compartidos complejos con actualizaciones frecuentes, use Zustand, Redux o Jotai, que están diseñados para este propósito.

El estado del servidor no pertenece al contexto

Los datos obtenidos de un servidor (una lista de usuarios o publicaciones) no pertenecen al contexto. React Query, SWR o RTK Query gestionan el estado del servidor con almacenamiento en caché, obtención de datos en segundo plano y estados de error; el contexto no gestiona nada de esto.

El estado de los formularios no pertenece al contexto

Gestionar los campos de un formulario en el contexto hace que cada pulsación de tecla vuelva a renderizar a todos los consumidores del contexto. Use el estado local del componente o una biblioteca de formularios como React Hook Form.

Cuándo SÍ es adecuado usar el contexto

El contexto es ideal para: el usuario actual o el estado de autenticación, el tema (claro/oscuro), la configuración regional y la internacionalización, además de otros valores estables y transversales que muchos componentes leen, pero que cambian pocas veces.

Comprobación rápida

¿Qué tipo de datos es el MENOS adecuado para almacenar en el contexto de React?

Resumen

Use Context para valores estables y transversales, como la autenticación, el tema y la configuración regional. Prefiera las props para pasar datos a través de 1–3 niveles. Prefiera la composición para evitar el prop drilling. Use React Query para el estado del servidor y Zustand o Redux para estados compartidos complejos.

Curso completado

¡Enhorabuena! Ha terminado **React Context Patterns & Performance**. Ahora sabe cómo dividir contextos, memorizar valores, aplicar selectores y, algo igual de importante, cuándo no usar Context en absoluto.

Preguntas frecuentes

¿La lección «Cuándo no utilizar Context» es gratis?

Sí — el texto completo de «Cuándo no utilizar Context» 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 «Cuándo no utilizar Context»?

Reconozca los casos en los que pasar props, utilizar composición o un gestor de estado son opciones más adecuadas. 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 4 de 4.

¿Cuánto tiempo toma la lección «Cuándo no utilizar Context»?

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