El Obstáculo que Todo Desarrollador de Svelte Encuentra

Todo desarrollador de Svelte eventualmente se topa con un obstáculo. Tienes datos en un componente—quizás información del usuario, configuración de tema o configuración de la aplicación—y necesitas esos mismos datos en otro componente enterrado profundamente dentro de tu árbol de componentes. La solución directa de pasar los datos como props a través de cada componente intermedio funciona técnicamente, pero algo se siente fundamentalmente mal en eso. Estás escribiendo código repetitivo que no sirve ningún propósito más que reenviar datos a través de componentes que ni siquiera los necesitan.

Este frustrante patrón tiene un nombre en el mundo del desarrollo frontend: prop drilling. Y la API de Contexto de Svelte existe específicamente para resolverlo.

Contexto en 60 Segundos

La API de Contexto hace una sola cosa: permite que un componente padre transmita datos que cualquier descendiente puede recibir directamente, sin importar qué tan profundamente anidado esté.

El componente A establece un valor de contexto. Cada descendiente (B, C, D, E, F, G) puede acceder a él directamente con getContext().

Cuando los componentes intermedios (B y C) no necesitan saber que los datos existen — no reciben props ni reenvían nada. D y G simplemente pueden acceder y obtener lo que necesitan usando getContext().

Así es como se ve en código:

<!-- Provider.svelte (Component A) -->
<script>
	import { setContext } from 'svelte'
	import Intermediate from './Intermediate.svelte'

	setContext('user', { name: 'Alice', role: 'admin' })
</script>

<Intermediate />

<!-- Intermediate.svelte (Component B) -->
<script>
	import Consumer from './Consumer.svelte'
	// No props! This component doesn't know about 'user'
</script>

<Consumer />

<!-- Consumer.svelte (Component D) -->
<script>
	import { getContext } from 'svelte'

	const user = getContext('user')
</script>

<p>Welcome, {user.name}!</p>

Ese es el concepto completo: establece una vez, accede en cualquier lugar más abajo.

Terminología

A lo largo de esta serie, utilizamos una nomenclatura consistente:

Término	Significado
Proveedor	Un componente que llama a `setContext()` para transmitir datos
Consumidor	Un componente que llama a `getContext()` para recibir datos
Intermedio	Un componente entre el proveedor y el consumidor que no utiliza el contexto

Prop Drilling

El problema que resuelve la API de Contexto es el prop drilling, que significa que los datos deben pasarse a través de cada componente en la cadena. Veamos un ejemplo sin contexto:

<!-- Provider.svelte -->
<script>
	import Intermediate from './Intermediate.svelte'
	const user = { name: 'Alice', email: 'alice@example.com' }
</script>

<Intermediate {user} />

<!-- Intermediate.svelte -->
<script>
	import Consumer from './Consumer.svelte'
	let { user } = $props() // Intermediate doesn't use this!
</script>

<Consumer {user} />

<!-- Consumer.svelte -->
<script>
	let { user } = $props()
</script>

<p>Welcome, {user.name}!</p>

Esto es prop drilling: pasar datos a través de componentes que no los utilizan.

Por Qué Duele

Ruido en el código: Intermediate tiene una prop user que nunca usa
Acoplamiento estrecho: Intermediate ahora está acoplado al concepto de "usuario"
Costo de refactorización: Agregar user.email a Consumer requiere revisar cada componente en la cadena
Fricción en las pruebas: Probar Intermediate requiere simular user aunque no lo use

En aplicaciones reales con 6+ niveles de anidamiento, este dolor se multiplica significativamente.

Modelos Mentales

Para entender mejor cómo funciona el contexto, aquí hay dos formas de pensar en el contexto que te ayudan a predecir su comportamiento.

Transmisión de Radio

Concepto	Radio	Contexto de Svelte
Emisor	Estación de radio	`setContext()`
Frecuencia	98.7 FM	Clave de contexto
Contenido	Programa/música	Valor de contexto
Oyente	Receptor de radio	`getContext()`
Cobertura	Alcance del transmisor	Componentes descendientes

Comportamientos clave:

Solo en un sentido — Transmite hacia abajo, nunca hacia arriba
Solo descendientes — Los hermanos y padres no pueden recibirlo
El más cercano gana — Si dos ancestros establecen la misma clave, obtienes el más cercano
Escuchar es opcional — Los componentes pueden ignorar el contexto que no necesitan

Tablero de Anuncios

Imagina un edificio de oficinas donde cada piso tiene un tablero de anuncios:

Cuando necesitas información, revisa el tablero de tu piso
Si no está ahí, sube un piso y vuelve a revisar
Sigue subiendo hasta encontrarla (o llegar al techo sin suerte)
Cada piso puede publicar su propia versión, reemplazando lo que está arriba

Esto enfatiza el proceso de búsqueda: getContext() recorre el árbol hacia arriba hasta encontrar una coincidencia.

Las Funciones Principales

La API de Contexto de Svelte proporciona cuatro funciones de contexto:

Función	Propósito
`setContext(key, value)`	Transmite un valor a los descendientes
`getContext(key)`	Recibe un valor de un ancestro
`hasContext(key)`	Verifica si existe el contexto (devuelve booleano)
`getAllContexts()`	Obtiene todo el contexto como un Map (para depuración/reenvío)

Regla crítica: Las cuatro deben llamarse durante la inicialización del componente — la ejecución sincrónica de tu bloque <script>. No puedes llamarlas en manejadores de eventos, efectos, ni después de un await.

<script>
	import { setContext, getContext } from 'svelte'

	// VALID - during initialization
	setContext('config', { debug: true })
	const user = getContext('user')

	// INVALID - after initialization
	function handleClick() {
		setContext('late', 'value') // Error!
	}
</script>

¿Por qué? El contexto es parte de la estructura del árbol de componentes, establecida cuando los componentes se montan. Para cuando los manejadores se ejecutan, los descendientes ya han intentado leer el contexto.

Para una cobertura detallada de cada función, consulta Proveer Contexto y Consumir Contexto.

Cuándo Usar el Contexto

El contexto es poderoso, pero no siempre es la herramienta adecuada. Aquí hay un marco de decisión:

Usa Contexto Cuando

Los datos saltan múltiples niveles — Si los props tendrían que pasar a través de 3+ componentes que no los usan, el contexto elimina el drilling.

Muchos componentes necesitan los mismos datos — Tema, usuario, configuración regional, configuración—el contexto provee una vez, accede desde cualquier lugar.

Construyes componentes compuestos — <Tabs> y <Tab> necesitan comunicarse sin exponer los internos como props.

Diferentes subárboles necesitan diferentes valores — El "el más cercano gana" del contexto permite que diferentes secciones tengan diferentes temas.

Usa Props Cuando

Padre-hijo directo — Un nivel de paso es claro y explícito.

API explícita — Los props documentan lo que necesita un componente; el contexto es implícito.

Máxima seguridad de tipos — Los props tienen mejor soporte de TypeScript de forma nativa.

Usa Stores Cuando

Estado verdaderamente global — Los mismos datos se necesitan en partes no relacionadas del árbol.

Los datos fluyen hacia arriba — El contexto solo va hacia abajo; los stores funcionan en cualquier dirección.

El estado persiste entre desmontajes — El contexto muere con su proveedor; los stores viven de forma independiente.

Decisión Rápida

Need to share data?
├─ Direct parent → child? → Props
├─ Skip 2+ levels? → Context
├─ Global / bidirectional? → Stores
└─ Otherwise → Local $state

Conceptos Erróneos Comunes

"El contexto es estado global"

No. El contexto tiene alcance de subárbol. Diferentes partes de tu aplicación pueden tener diferentes valores para la misma clave. En SvelteKit, los layouts anidados pueden reemplazar el contexto del padre:

<!-- src/routes/+layout.svelte -->
<script>
	import { setContext } from 'svelte'
	setContext('theme', 'light')  // Default for all routes
</script>

<!-- src/routes/admin/+layout.svelte -->
<script>
	import { setContext } from 'svelte'
	setContext('theme', 'dark')  // Override for /admin/* routes
</script>

Las páginas públicas obtienen 'light', las páginas de administración obtienen 'dark'.

"El contexto reemplaza a los props"

No. El contexto complementa a los props. Usa props para la comunicación directa padre-hijo y para APIs de componentes explícitas.

"El contexto es reactivo por defecto"

No. El contexto captura un valor una sola vez. Para un contexto reactivo, pasa objetos con $state dentro. Consulta Haciendo el Contexto Reactivo.

"Puedo establecer/obtener contexto en cualquier lugar"

No. Solo durante la inicialización del componente. Captura los valores durante la inicialización y luego úsalos en cualquier lugar.

Resumen

El contexto resuelve el prop drilling — Los datos van directamente del proveedor al consumidor, saltando los intermediarios.
Fluye solo hacia abajo — De ancestros a descendientes. El ancestro más cercano tiene prioridad.
Cuatro funciones — setContext, getContext, hasContext, getAllContexts.
El momento importa — Debe llamarse durante la inicialización del componente.
Elige sabiamente — Contexto para datos del subárbol, props para comunicación directa, stores para estado global.