¿Alguna vez tuviste que pasar un dato desde un componente padre a un hijo, y luego a otro, y a otro… solo para usarlo al final? Eso es lo que se conoce como “prop drilling” 😵
Bueno, React Context API es como decirle a tu app:
“Oye, este dato es importante, déjalo accesible para todos sin tener que pasarlo a mano por cada componente”.
🏠 Una analogía rápida
Imagina que vives en una casa con 10 habitaciones (componentes). Y solo hay un control remoto (estado global). ¿Vas a ir pieza por pieza pasándoselo a todos?
¡No! Mejor lo dejas en la mesa del living (Context), y cualquiera que lo necesite, va y lo agarra 🙌
🌗 Ejemplo: modo claro / modo oscuro
Supongamos que tu app tiene dos temas: claro y oscuro. No quieres estar pasándole ese tema por props a todos los botones, fondos, headers, etc. Mejor creas un ThemeContext
y listo.
Y ahora en cualquier parte de la app puedes usarlo así:
Lo conectas todo así:
❌ ¿Cuándo NO deberías usar Context?
Aunque Context es bacán, no es para todo:
- Si el dato cambia todo el tiempo (como lo que escribes en un input) 👉 se vuelve lento, porque re-renderiza todo.
- Si solo lo necesitan 1 o 2 componentes cerca 👉 mejor usar props.
- Si tu app es grande y necesitas manejar muchas cosas globales 👉 quizás es momento de mirar cosas como Zustand, Redux o Recoil.
✅ En resumen
Context API = compartir info global sin líos.
Útil para cosas como:
- Modo claro/oscuro 🌗
- Idioma 🌍
- Usuario logueado 👤
Pero no abuses. Si te complicas más que lo que resuelves… mejor otra herramienta 😅
¿Tu empresa necesita reforzar su infraestructura, escalar sus aplicaciones y optimizar la experiencia de desarrollo?👉 Contáctanos y te asesoramos para implementar Google Cloud con seguridad, rendimiento y productividad.