Cuando las APIs Simples te Hacen Tropezar

Incluso los desarrolladores experimentados de Svelte ocasionalmente tropiezan con el contexto. La API es simple en la superficie—solo setContext y getContext—pero comportamientos sutiles pueden llevar a errores confusos. Valores que no se actualizan. Contexto que misteriosamente devuelve undefined. Componentes que lanzan errores sobre el momento de inicialización.

Este artículo cataloga las trampas más comunes del contexto, explica por qué ocurren y proporciona soluciones claras. También cubriremos técnicas de depuración para diagnosticar rápidamente problemas de contexto cuando surjan. Considera esto tu guía de solución de problemas para todo lo relacionado con el contexto.

Al comprender estas trampas, escribirás código de contexto más robusto y pasarás menos tiempo depurando fallas misteriosas.

Trampa 1: Llamar a las Funciones de Contexto Fuera de la Inicialización

El error más común: intentar llamar a setContext o getContext fuera de la inicialización del componente.

El Error

Error: `setContext(...)` can only be called during component initialization
Error: `getContext(...)` can only be called during component initialization

Qué lo Causa

Las funciones de contexto deben llamarse durante la ejecución sincrónica de tu bloque <script> cuando el componente se monta por primera vez. No pueden llamarse en:

Manejadores de eventos
Callbacks de $effect
Callbacks de setTimeout o setInterval
Callbacks de .then() de Promesas
Después de una instrucción await
Cualquier código asincrónico

Ejemplos del Error

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

	// ❌ Inside event handler
	function handleClick() {
		setContext('late', 'value') // Error!
	}

	// ❌ Inside effect
	$effect(() => {
		const value = getContext('something') // Error!
	})

	// ❌ Inside setTimeout
	setTimeout(() => {
		setContext('delayed', 'value') // Error!
	}, 0)

	// ❌ After await
	async function setup() {
		const data = await fetch('/api/data')
		setContext('data', data) // Error!
	}
	setup()

	// ❌ In Promise callback
	fetch('/api/config')
		.then((response) => response.json())
		.then((config) => {
			setContext('config', config) // Error!
		})
</script>

La Solución

Siempre captura o establece el contexto en el nivel superior de tu script, luego usa los valores capturados en otro lugar:

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

	// ✅ Set context during initialization with reactive state
	let config = $state(null)
	let loading = $state(true)

	setContext('config', {
		get data() {
			return config
		},
		get loading() {
			return loading
		}
	})

	// ✅ Capture context during initialization
	const theme = getContext('theme')
	const auth = getContext('auth')

	// Now use freely in event handlers
	function handleClick() {
		console.log('Theme:', theme.mode) // ✅ Works!
		console.log('User:', auth.user?.name) // ✅ Works!
	}

	// And in effects
	$effect(() => {
		document.body.classList.toggle('dark', theme.isDark) // ✅ Works!
	})

	// And with async operations
	async function loadConfig() {
		loading = true
		const response = await fetch('/api/config')
		config = await response.json() // Updates the context value!
		loading = false
	}
	loadConfig()
</script>

Por Qué Existe Esta Restricción

El contexto es parte de la estructura del árbol de componentes. Cuando un componente hijo se inicializa, busca en el árbol el contexto que los ancestros han establecido. Si el contexto pudiera establecerse más tarde (en manejadores de eventos, etc.), los hijos ya habrían intentado leerlo y fallado.

Piénsalo como construir una casa: necesitas instalar la plomería (contexto) mientras construyes las paredes (inicialización del componente), no después de que la casa esté terminada (en tiempo de ejecución).

Trampa 2: Reasignar Objetos de Estado

Una de las trampas más complicadas: romper la conexión entre el proveedor y los consumidores al reasignar el estado.

El Síntoma

Las actualizaciones del contexto funcionan inicialmente, luego se detienen de repente. Algunos consumidores ven las actualizaciones, otros no. O las actualizaciones se detienen después de una acción específica.

Qué lo Causa

Cuando proporcionas un objeto reactivo a través del contexto, tanto el proveedor como los consumidores mantienen referencias al mismo objeto. Si reasignas la variable en el proveedor a un nuevo objeto, los consumidores siguen referenciando el antiguo objeto.

El Error

<!-- Provider.svelte -->
<script>
	import { setContext } from 'svelte'

	let user = $state({ name: 'Alice', score: 0 })
	setContext('user', user)

	function updateScore() {
		user.score++ // ✅ This works - mutating the object
	}

	function resetUser() {
		user = { name: 'Guest', score: 0 } // ❌ This breaks consumers!
		// Provider now points to NEW object
		// Consumers still point to OLD object
	}
</script>

<!-- Consumer.svelte -->
<script>
	import { getContext } from 'svelte'

	const user = getContext('user')
	// user references the ORIGINAL object
	// After resetUser(), this is orphaned
</script>

<p>{user.name}: {user.score}</p>
<!-- After resetUser(), still shows old values -->

Explicación Visual

Initial state:
Provider.user ───────┐
                     ├──> { name: 'Alice', score: 0 }
Consumer.user ───────┘

After user.score++ (mutation):
Provider.user ───────┐
                     ├──> { name: 'Alice', score: 1 }  ✅ Both see change
Consumer.user ───────┘

After user = { name: 'Guest', score: 0 } (reassignment):
Provider.user ───────────> { name: 'Guest', score: 0 }  ← NEW object

Consumer.user ───────────> { name: 'Alice', score: 1 }  ← OLD object (orphaned!)
                           ❌ Consumer never sees new object

La Solución

Siempre muta las propiedades, nunca reasignes el objeto completo:

<script>
	import { setContext } from 'svelte'

	let user = $state({ name: 'Alice', score: 0 })
	setContext('user', user)

	function updateScore() {
		user.score++ // ✅ Mutation
	}

	function resetUser() {
		// ✅ Mutate properties individually
		user.name = 'Guest'
		user.score = 0
	}

	// ✅ Or use Object.assign for multiple properties
	function updateUser(updates) {
		Object.assign(user, updates)
	}
</script>

Alternativa: Envolver en un Objeto Contenedor

Si necesitas reemplazar el valor completo, envuélvelo en un contenedor:

<script>
	import { setContext } from 'svelte'

	let container = $state({ user: { name: 'Alice', score: 0 } })
	setContext('userContainer', container)

	function resetUser() {
		// ✅ Mutating container.user property
		container.user = { name: 'Guest', score: 0 }
	}
</script>

El consumidor accede a través del contenedor:

<script>
	const container = getContext('userContainer')
</script>

<!-- Access through container --><p>{container.user.name}: {container.user.score}</p>

Trampa 3: Desestructurar Valores Reactivos

La desestructuración captura valores en un momento específico, rompiendo la reactividad.

El Síntoma

Las variables de contexto desestructuradas nunca se actualizan, aunque la fuente cambie.

El Error

<script>
	import { getContext } from 'svelte'

	const settings = getContext('settings')

	// ❌ Destructuring captures current VALUES
	const { theme, fontSize, language } = settings
	// theme = 'light' (a string, frozen in time)
	// fontSize = 16 (a number, frozen in time)
</script>

<!-- These never update! -->
<div class={theme}>
	<!-- Always 'light' -->
	<p style="font-size: {fontSize}px">
		<!-- Always 16 -->
		{language}
		<!-- Always the initial value -->
	</p>
</div>

Por Qué Ocurre Esto

La desestructuración es azúcar sintáctica para la asignación:

const { theme } = settings
// Is equivalent to:
const theme = settings.theme // Copies the primitive value

Para primitivos (cadenas, números, booleanos), obtienes una copia. Para objetos, obtienes una referencia—pero aun así capturada en ese momento.

Soluciones

Solución 1: No desestructures, accede directamente

<script>
	const settings = getContext('settings')
	// Keep the object reference
</script>

<!-- Access properties directly - always current -->
<div class={settings.theme}>
	<p style="font-size: {settings.fontSize}px">
		{settings.language}
	</p>
</div>

Solución 2: "Desestructuración" reactiva con $derived

<script>
	const settings = getContext('settings')

	// ✅ Each $derived re-evaluates when settings changes
	let theme = $derived(settings.theme)
	let fontSize = $derived(settings.fontSize)
	let language = $derived(settings.language)
</script>

<!-- Now these update! -->
<div class={theme}>
	<p style="font-size: {fontSize}px">
		{language}
	</p>
</div>

Solución 3: Desestructura solo los métodos

Los métodos (funciones) pueden desestructurarse de forma segura—son referencias, no valores:

<script>
	const cart = getContext('cart')

	// ✅ Safe - these are function references
	const { addItem, removeItem, clear } = cart

	function handleAdd(product) {
		addItem(product) // Works correctly
	}
</script>

Error común 4: Proveedor faltante

Consumir contexto que nunca fue provisto.

El síntoma

getContext devuelve undefined, lo que genera errores de "Cannot read property X of undefined" cuando intentas usar el contexto.

El error

<!-- App.svelte - forgot the provider! -->
<script>
	import Dashboard from './Dashboard.svelte'
</script>

<!-- No AuthProvider wrapping Dashboard -->
<Dashboard />

<!-- Dashboard.svelte -->
<script>
	import { getContext } from 'svelte'

	const auth = getContext('auth') // Returns undefined!

	// Later...
	console.log(auth.user.name) // Error: Cannot read property 'user' of undefined
</script>

Soluciones

Solución 1: Verificar con hasContext

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

	if (!hasContext('auth')) {
		throw new Error('Auth context not found. ' + 'Wrap this component in an AuthProvider.')
	}

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

Solución 2: Proveer valores predeterminados para contexto opcional

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

	const defaultAuth = {
		user: null,
		isAuthenticated: false,
		login: () => console.warn('No auth provider'),
		logout: () => console.warn('No auth provider')
	}

	const auth = hasContext('auth') ? getContext('auth') : defaultAuth
</script>

Solución 3: Usar createContext que lanza excepciones

Con createContext de Svelte 5.40+, el getter lanza automáticamente:

// auth.svelte.ts
import { createContext } from 'svelte'

export const [getAuth, setAuth] = createContext<AuthContext>()

// Consumer.svelte
const auth = getAuth() // Throws "Context was not provided" if missing

Solución 4: Crear una utilidad getter segura

// lib/context/utils.ts
import { getContext, hasContext } from 'svelte'

export function requireContext<T>(key: any, name: string): T {
	if (!hasContext(key)) {
		throw new Error(
			`${name} context is required but was not found. ` +
				`Ensure this component is rendered inside the appropriate provider.`
		)
	}
	return getContext(key)
}

// Usage
const auth = requireContext('auth', 'Auth')

Error común 5: Proveedor en posición incorrecta

El proveedor existe pero no es un ancestro del consumidor.

El síntoma

El contexto devuelve undefined aunque el proveedor existe en la aplicación.

El error

<!-- App.svelte -->
<script>
	import AuthProvider from './AuthProvider.svelte'
	import Dashboard from './Dashboard.svelte'
</script>

<!-- Provider and Dashboard are SIBLINGS, not parent-child -->
<AuthProvider />
<Dashboard />
<!-- Can't access auth context! -->

El contexto solo fluye hacia abajo desde los ancestros hasta los descendientes. Los componentes hermanos no pueden ver el contexto de los demás.

La solución

Asegúrate de que el proveedor envuelva al consumidor:

<!-- App.svelte -->
<script>
	import AuthProvider from './AuthProvider.svelte'
	import Dashboard from './Dashboard.svelte'
</script>

<!-- Provider WRAPS Dashboard -->
<AuthProvider>
	<Dashboard />
	<!-- Now has access! -->
</AuthProvider>

Depuración visual

❌ Wrong - siblings:
App
├── AuthProvider (sets 'auth')
└── Dashboard (getContext('auth') → undefined)

✅ Correct - ancestor/descendant:
App
└── AuthProvider (sets 'auth')
    └── Dashboard (getContext('auth') → ✓)

Error común 6: Clave incorrecta

Usar una clave diferente en get a la que se usó en set.

El síntoma

El contexto devuelve undefined incluso con una relación correcta entre proveedor y consumidor.

El error

<!-- Provider.svelte -->
<script>
	import { setContext } from 'svelte'

	setContext('userAuth', authData)  // Key: 'userAuth'
</script>

<!-- Consumer.svelte -->
<script>
	import { getContext } from 'svelte'

	const auth = getContext('auth')  // Key: 'auth' ← Doesn't match!
	// Returns undefined
</script>

Esto es especialmente fácil de cometer con:

Errores tipográficos: 'user' vs 'users'
Sensibilidad a mayúsculas: 'Auth' vs 'auth'
Convenciones distintas: 'user-auth' vs 'userAuth'

Soluciones

Solución 1: Exportar la clave

// context/keys.ts
export const AUTH_KEY = 'auth'
export const CART_KEY = 'cart'
export const THEME_KEY = 'theme'

<!-- Both files import the same key -->
import {AUTH_KEY} from './context/keys' setContext(AUTH_KEY, value) // Provider getContext(AUTH_KEY)
// Consumer

Solución 2: Usar Symbols

Los Symbols son únicos, por lo que las colisiones de claves son imposibles:

// context/auth.svelte.ts
const AUTH_KEY = Symbol('auth')

export function createAuthContext() {
	return setContext(AUTH_KEY /* ... */)
}

export function getAuthContext() {
	return getContext(AUTH_KEY)
}

Solución 3: Usar createContext

createContext gestiona las claves internamente:

// No key to get wrong!
export const [getAuth, setAuth] = createContext<AuthContext>()

Error común 7: Contexto en componentes dinámicos

Los componentes montados fuera del árbol normal pierden el contexto.

El síntoma

Los componentes montados dinámicamente (modales, tooltips, portales) no pueden acceder al contexto.

El Error

<script>
	import { mount } from 'svelte'
	import Modal from './Modal.svelte'

	function openModal() {
		// Modal mounted at document.body, outside Svelte tree
		mount(Modal, { target: document.body })
		// Modal has NO access to any context!
	}
</script>

La Solución

Reenvía el contexto explícitamente usando getAllContexts:

<script>
	import { mount, getAllContexts } from 'svelte'
	import Modal from './Modal.svelte'

	// Capture context during initialization
	const appContext = getAllContexts()

	function openModal() {
		mount(Modal, {
			target: document.body,
			context: appContext // Forward all context
		})
	}
</script>

O crea un componente portal que lo maneje:

<!-- Portal.svelte -->
<script>
	import { mount, unmount, getAllContexts } from 'svelte'

	let { target = document.body, children } = $props()

	const context = getAllContexts()

	$effect(() => {
		// Create a wrapper component that re-provides context
		const wrapper = mount(ContextForwarder, {
			target,
			context,
			props: { content: children }
		})

		return () => unmount(wrapper)
	})
</script>

Error Común 8: Esperar Reactividad Sin $state

Los objetos simples en el contexto no son reactivos.

El Síntoma

Los valores del contexto no se actualizan cuando la fuente cambia.

El Error

<script>
	import { setContext } from 'svelte'

	// Plain object, not reactive
	const user = { name: 'Alice', score: 0 }
	setContext('user', user)

	function updateScore() {
		user.score++ // Value changes in memory...
		// But Svelte doesn't know! No re-renders triggered.
	}
</script>

La Solución

Usa $state para valores de contexto reactivos:

<script>
	import { setContext } from 'svelte'

	// Reactive with $state
	let user = $state({ name: 'Alice', score: 0 })
	setContext('user', user)

	function updateScore() {
		user.score++ // ✅ Svelte tracks this, triggers re-renders
	}
</script>

Error Común 9: Usar Contexto para Datos Sensibles al SSR

Las mutaciones de contexto durante el SSR pueden filtrarse entre solicitudes.

El Síntoma

Los usuarios ven datos de otros usuarios. Los datos persisten incorrectamente entre solicitudes.

El Error

// lib/stores/global.svelte.ts

// Global mutable state - DANGEROUS with SSR!
export const globalUser = $state({ name: null, id: null })

<!-- +page.svelte -->
<script>
	import { globalUser } from '$lib/stores/global.svelte'

	let { data } = $props()

	// Mutating global state during render
	globalUser.name = data.user.name // ❌ May leak to other requests!
</script>

En el servidor, un único proceso de Node.js maneja múltiples solicitudes. El estado global persiste entre solicitudes.

La Solución

Usa el contexto para datos con alcance de solicitud:

<!-- +layout.svelte -->
<script>
	import { setContext } from 'svelte'

	let { data } = $props()

	// Create fresh context for each request
	// Context is automatically isolated per-component-tree
	setContext('user', data.user)
</script>

<slot />

El contexto está vinculado a un árbol de componentes específico. Cada solicitud obtiene su propio árbol de componentes, por lo que el contexto está naturalmente aislado.

Error Común 10: Contexto en Bucles Muy Frecuentes

Acceder al contexto repetidamente en bucles o funciones que se llaman con frecuencia.

El Síntoma

Rendimiento de UI lento cuando muchos componentes consumen el mismo contexto, o cuando las funciones que dependen del contexto se llaman con frecuencia.

El Error

<script>
	import { getContext } from 'svelte'

	let { items } = $props()

	// ❌ Getting context inside a function called per item
	function formatItem(item) {
		const settings = getContext('settings') // Called many times!
		return `${item.name} (${settings.currency})`
	}
</script>

{#each items as item}
	<p>{formatItem(item)}</p>
{/each}

Si bien getContext es rápido, llamarlo repetidamente en bucles agrega una sobrecarga innecesaria. Más importante aún, este patrón sugiere un malentendido sobre cómo funciona el contexto: solo necesitas obtenerlo una vez.

La Solución

Obtén el contexto una vez en el nivel superior de tu script:

<script>
	import { getContext } from 'svelte'

	let { items } = $props()

	// ✅ Get context once during initialization
	const settings = getContext('settings')

	function formatItem(item) {
		return `${item.name} (${settings.currency})`
	}
</script>

{#each items as item (item.id)}
	<p>{formatItem(item)}</p>
{/each}

El valor del contexto no cambia durante el ciclo de vida del componente (aunque sus propiedades podrían hacerlo si es reactivo). Captura la referencia una vez y reutilízala en todo tu componente.

Patrón Relacionado: Evitar el Contexto en Valores Derivados

No accedas al contexto dentro de cálculos $derived que se ejecutan con frecuencia:

<script>
	import { getContext } from 'svelte'

	let { price } = $props()

	// ❌ Context access inside derived (works but unclear intent)
	let formatted = $derived(() => {
		const settings = getContext('settings')
		return new Intl.NumberFormat(settings.locale, {
			style: 'currency',
			currency: settings.currency
		}).format(price)
	})
</script>

<script>
	import { getContext } from 'svelte'

	let { price } = $props()

	// ✅ Get context at top level, use in derived
	const settings = getContext('settings')

	let formatted = $derived(
		new Intl.NumberFormat(settings.locale, {
			style: 'currency',
			currency: settings.currency
		}).format(price)
	)
</script>

Ambos funcionan, pero la segunda versión hace que el flujo de datos sea más claro y sigue el patrón establecido de capturar el contexto durante la inicialización.

Técnicas de Depuración

Cuando el contexto no funciona, estas técnicas ayudan a diagnosticar el problema.

Técnica 1: Componente Inspector de Contexto

Crea un componente que muestre todo el contexto disponible:

<!-- ContextDebugger.svelte -->
<script>
	import { getAllContexts } from 'svelte'

	let { show = true } = $props()

	const contexts = getAllContexts()

	function formatValue(value) {
		if (value === undefined) return 'undefined'
		if (value === null) return 'null'
		if (typeof value === 'function') return '[Function]'
		try {
			return JSON.stringify(value, null, 2)
		} catch {
			return String(value)
		}
	}

	function formatKey(key) {
		if (typeof key === 'symbol') {
			return key.toString()
		}
		return String(key)
	}
</script>

{#if show && import.meta.env.DEV}
	<details class="context-debugger" open>
		<summary>🔍 Context ({contexts.size} keys)</summary>

		{#if contexts.size === 0}
			<p class="empty">No context available at this position</p>
		{:else}
			<ul>
				{#each [...contexts.entries()] as [key, value] (key)}
					<li>
						<strong class="key">{formatKey(key)}</strong>
						<pre class="value">{formatValue(value)}</pre>
					</li>
				{/each}
			</ul>
		{/if}
	</details>
{/if}

<style>
	.context-debugger {
		position: fixed;
		bottom: 1rem;
		right: 1rem;
		background: #1e1e2e;
		color: #cdd6f4;
		padding: 0.75rem;
		border-radius: 8px;
		font-family: 'Fira Code', monospace;
		font-size: 12px;
		max-width: 400px;
		max-height: 400px;
		overflow: auto;
		z-index: 9999;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	}

	summary {
		cursor: pointer;
		font-weight: bold;
		padding: 0.25rem 0;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0.5rem 0 0;
	}

	li {
		padding: 0.5rem;
		border-bottom: 1px solid #313244;
	}

	li:last-child {
		border-bottom: none;
	}

	.key {
		color: #89b4fa;
	}

	.value {
		margin: 0.25rem 0 0;
		padding: 0.5rem;
		background: #313244;
		border-radius: 4px;
		white-space: pre-wrap;
		word-break: break-all;
		color: #a6e3a1;
	}

	.empty {
		color: #f38ba8;
		font-style: italic;
	}
</style>

Suelta esto en cualquier lugar para ver qué contexto está disponible:

<!-- SomeDeeplyNestedComponent.svelte -->
<script>
	import ContextDebugger from '$lib/debug/ContextDebugger.svelte'
</script>

<div>
	<!-- Component content -->
</div>

<ContextDebugger />

Técnica 2: Registro en Consola en los Proveedores

Agrega registro de desarrollo para rastrear la configuración del contexto:

<!-- AuthProvider.svelte -->
<script>
	import { setContext } from 'svelte'

	let { children } = $props()

	let user = $state(null)

	const context = {
		get user() {
			return user
		},
		get isAuthenticated() {
			return user !== null
		}
	}

	setContext('auth', context)

	// Development logging
	if (import.meta.env.DEV) {
		console.log('🔐 AuthProvider: Context set', context)

		$effect(() => {
			console.log('🔐 AuthProvider: User changed', user)
		})
	}
</script>

{@render children()}

Técnica 3: Seguimiento de la Pila de Proveedores

Rastrea la jerarquía de proveedores:

<!-- Add to each provider -->
<script>
	import { setContext, getContext, hasContext } from 'svelte'

	// Track provider stack
	const parentStack = hasContext('__debug_providers') ? getContext('__debug_providers') : []

	const myStack = [...parentStack, 'AuthProvider']
	setContext('__debug_providers', myStack)

	if (import.meta.env.DEV) {
		console.log('Provider stack:', myStack.join(' → '))
	}
</script>

Salida:

Provider stack: ThemeProvider → AuthProvider
Provider stack: ThemeProvider → AuthProvider → CartProvider

Técnica 4: Verificar la Posición del Consumidor

Verifica en qué parte del árbol se encuentra un consumidor:

<script>
	import { getContext, hasContext, getAllContexts } from 'svelte'

	const available = getAllContexts()
	const hasAuth = hasContext('auth')
	const hasTheme = hasContext('theme')

	if (import.meta.env.DEV) {
		console.group('Component: UserProfile')
		console.log('Available context keys:', [...available.keys()])
		console.log('Has auth context:', hasAuth)
		console.log('Has theme context:', hasTheme)
		console.groupEnd()
	}
</script>

Técnica 5: Envoltura con Límite de Errores

Captura errores de contexto de manera controlada:

<!-- SafeContextConsumer.svelte -->
<script>
	import { getContext, hasContext } from 'svelte'

	let { contextKey, fallback, children } = $props()

	let error = null
	let context = null

	try {
		if (!hasContext(contextKey)) {
			throw new Error(`Context '${contextKey}' not found`)
		}
		context = getContext(contextKey)
	} catch (e) {
		error = e.message
		if (import.meta.env.DEV) {
			console.error(`Context error: ${e.message}`)
		}
	}
</script>

{#if error}
	{#if fallback}
		{@render fallback(error)}
	{:else}
		<div class="context-error">
			Context Error: {error}
		</div>
	{/if}
{:else}
	{@render children(context)}
{/if}

Referencia Rápida: Síntomas y Soluciones

Síntoma	Causa probable	Solución
"can only be called during initialization"	Función de contexto en código asíncrono	Llamar en el nivel superior, capturar el valor
El contexto devuelve `undefined`	Proveedor faltante	Agregar proveedor como ancestro
El contexto devuelve `undefined`	Clave incorrecta	Usar claves compartidas, Symbols o createContext
El contexto devuelve `undefined`	El proveedor es hermano, no ancestro	Reestructurar para envolver al consumidor
Los valores no se actualizan	Objeto plano, no `$state`	Usar `$state` para valores reactivos
Los valores dejan de actualizarse tras cierta acción	Objeto de estado reasignado	Mutar propiedades, no reasignar
Los valores desestructurados no se actualizan	Valores primitivos capturados	Acceder mediante el objeto o usar `$derived`
Modal/portal no puede acceder al contexto	Montado fuera del árbol	Reenviar contexto con `getAllContexts`
Datos SSR se filtran entre usuarios	Mutando estado global	Usar contexto para datos con alcance de solicitud
Rendimiento lento con muchos consumidores	Contexto en bucles/llamadas frecuentes	Obtener contexto una vez en el nivel superior

Conclusión

Las trampas del contexto no son errores aleatorios: son consecuencias predecibles de cómo JavaScript maneja los valores, cómo Svelte gestiona la reactividad y cómo los árboles de componentes establecen relaciones jerárquicas. Una vez que entiendes estos mecanismos subyacentes, las trampas se vuelven intuitivas en lugar de misteriosas.

La restricción de tiempo existe porque el contexto es estructural. El problema de reasignación existe porque JavaScript pasa referencias a objetos, no las variables en sí. La trampa de la desestructuración existe porque los primitivos se copian por valor. El requisito de posicionamiento del proveedor existe porque el contexto fluye hacia abajo a través del árbol. Cada trampa tiene una causa lógica arraigada en comportamientos fundamentales del lenguaje y el framework.

Las técnicas de depuración de este artículo —inspectores de contexto, seguimiento de la pila de proveedores, registro estratégico— transforman el contexto de una caja negra en un sistema transparente que puedes observar y razonar. Cuando algo sale mal, puedes identificar sistemáticamente si se trata de un problema de tiempo, un problema de referencia, un problema de estructura del árbol o una discrepancia de claves.

Lo más importante es que estas trampas se vuelven cada vez más raras a medida que internalizas los patrones. Llama las funciones de contexto en el nivel superior. Muta propiedades, no reasignes objetos. Accede a través del objeto, no desestructures primitivos. Envuelve los consumidores en proveedores. Usa claves compartidas o Symbols. Sigue estas reglas de manera consistente y el contexto se convierte en una herramienta confiable y predecible.

Puntos Clave

Las trampas del contexto generalmente se dividen en algunas categorías:

Problemas de tiempo — Las funciones de contexto deben llamarse durante la inicialización del componente. Captura los valores temprano, úsalos después.
Problemas de referencia — No reasignes objetos de estado; muta propiedades. No desestructures primitivos; accede mediante el objeto.
Problemas de estructura del árbol — Los proveedores deben ser ancestros, no hermanos. Los componentes dinámicos necesitan que el contexto se reenvíe explícitamente.
Discrepancias de claves — Usa constantes compartidas, Symbols o createContext para evitar errores tipográficos.
Problemas de reactividad — Usa $state para valores reactivos. Los objetos planos no se rastrean.
Problemas de SSR — No mutes el estado global. Usa contexto para datos con alcance de solicitud.

Al depurar, usa getAllContexts() para ver qué está disponible, agrega registro a los proveedores y verifica que los proveedores sean ancestros de los consumidores. Con estos patrones reconocidos, diagnosticarás y resolverás rápidamente los problemas de contexto cuando surjan.

¿Qué Sigue?

Comprende cuándo el contexto es la elección correcta en Context vs Other Patterns, comparando el contexto con stores, props, eventos y construyendo un marco de decisión.

Ver También

Documentación Oficial

Svelte Context — Guía oficial
createContext — Contexto con tipos seguros

Cuando las APIs Simples te Hacen Tropezar

Trampa 1: Llamar a las Funciones de Contexto Fuera de la Inicialización

El Error

Qué lo Causa

Ejemplos del Error

La Solución

Por Qué Existe Esta Restricción

Trampa 2: Reasignar Objetos de Estado

El Síntoma

Qué lo Causa

El Error

Explicación Visual

La Solución

Alternativa: Envolver en un Objeto Contenedor

Trampa 3: Desestructurar Valores Reactivos

El Síntoma

El Error

Por Qué Ocurre Esto

Soluciones

Error común 4: Proveedor faltante

El síntoma

El error

Soluciones

Error común 5: Proveedor en posición incorrecta

El síntoma

El error

La solución

Depuración visual

Error común 6: Clave incorrecta

El síntoma

El error

Soluciones

Error común 7: Contexto en componentes dinámicos

El síntoma

El Error

La Solución

Error Común 8: Esperar Reactividad Sin $state

El Síntoma

El Error

La Solución

Error Común 9: Usar Contexto para Datos Sensibles al SSR

El Síntoma

El Error

La Solución

Error Común 10: Contexto en Bucles Muy Frecuentes

El Síntoma

El Error

La Solución

Patrón Relacionado: Evitar el Contexto en Valores Derivados

Técnicas de Depuración

Técnica 1: Componente Inspector de Contexto

Técnica 2: Registro en Consola en los Proveedores

Técnica 3: Seguimiento de la Pila de Proveedores

Técnica 4: Verificar la Posición del Consumidor

Técnica 5: Envoltura con Límite de Errores

Referencia Rápida: Síntomas y Soluciones

Conclusión

Puntos Clave

¿Qué Sigue?

Ver También

Documentación Oficial

Artículos Relacionados