Hook · Contexto
useContext
Saltarse el prop drilling
useContext lee un valor publicado por el Provider más cercano hacia arriba en el árbol. Es la forma de compartir tema, idioma, sesión o cualquier dependencia transversal sin pasarla por cada componente.
Tres piezas
createContext(default) crea el canal. Un <Ctx.Provider value=...> publica un valor. useContext(Ctx) lo lee en cualquier descendiente.
Costos a tener en cuenta
Cuando el value cambia, todos los consumidores se re-renderizan. Si tu value es { user, setUser } creado inline, cambia en cada render. Memoiza el value o sepáralo en varios contextos.
Tropiezos comunes
- 01El value pasado al Provider sin memoizar provoca re-renders en todos los consumidores.
- 02Cuesta separar contextos densos: si tu app crece, divide el contexto por concierto (auth ≠ theme ≠ i18n).
- 03Context no reemplaza estado de servidor — para eso usa SWR/React Query/RSC, no un Provider gigante.
¿Fue útil?
Inicia sesión para dar feedback