Renderizado Condicional Declarativo en Svelte 5

Toda interfaz de usuario debe tomar decisiones. Mostrar este botón cuando el usuario ha iniciado sesión. Mostrar un mensaje de error cuando la validación falla. Revelar opciones avanzadas cuando el usuario activa un interruptor. Estos patrones de renderizado condicional son fundamentales para construir aplicaciones dinámicas y responsivas.

El bloque #if de Svelte 5 ofrece un enfoque elegante y declarativo para el renderizado condicional que se integra perfectamente con el sistema de reactividad del framework. A diferencia de los enfoques imperativos donde se manipula el DOM manualmente o se alternan clases CSS, la sintaxis de plantillas de Svelte permite describir qué debe renderizarse bajo qué condiciones—el framework se encarga del cómo.

Este tutorial explora el bloque #if de manera exhaustiva: desde condicionales básicos hasta lógica compleja de múltiples ramas, desde la integración con estado reactivo hasta efectos de transición, desde errores comunes hasta patrones avanzados. Ya sea que estés construyendo interfaces de alternancia simples o IUs complejas basadas en permisos, dominarás las técnicas necesarias para renderizar contenido condicionalmente con confianza.

El Problema

Por Qué Importan los Condicionales Declarativos

Antes de profundizar en la sintaxis, entendamos por qué importa el renderizado condicional declarativo. Considera un enfoque tradicional de JavaScript:

// Imperative approach - managing DOM directly
function updateUI(isLoggedIn) {
	const loginButton = document.getElementById('login-btn')
	const userPanel = document.getElementById('user-panel')

	if (isLoggedIn) {
		loginButton.style.display = 'none'
		userPanel.style.display = 'block'
	} else {
		loginButton.style.display = 'block'
		userPanel.style.display = 'none'
	}
}

Este enfoque presenta varios problemas:

Lógica dispersa: El manejo del estado de la UI está distribuido entre JavaScript y HTML
Sincronización manual: Debes recordar llamar a updateUI() cada vez que cambia el estado
Propenso a errores: Es fácil olvidar actualizar un elemento cuando las condiciones cambian
Baja legibilidad: La relación entre los datos y la UI no es inmediatamente clara

El enfoque declarativo de Svelte elimina estos problemas:

<script>
	let isLoggedIn = $state(false)
</script>

{#if isLoggedIn}
	<div id="user-panel">Welcome back!</div>
{:else}
	<button id="login-btn" onclick={() => (isLoggedIn = true)}> Login </button>
{/if}

La UI refleja automáticamente el estado. Cambia isLoggedIn, y Svelte actualiza el DOM. La relación entre los datos y el renderizado es explícita en la plantilla.

Sintaxis Básica

Bloque If Simple

La forma más básica renderiza contenido condicionalmente cuando una expresión es verdadera (truthy):

{#if expression}
	<!-- Content rendered when expression is truthy -->
{/if}

<script>
	let showMessage = $state(true)
</script>

<button onclick={() => (showMessage = !showMessage)}> Toggle Message </button>

{#if showMessage}
	<p>Hello, this message is visible!</p>
{/if}

El contenido dentro del bloque—incluyendo todos los elementos, texto e incluso otros componentes—solo se renderiza cuando showMessage es true. Cuando se vuelve false, Svelte elimina el contenido del DOM por completo.

Bloque If-Else

Para estados binarios donde necesitas mostrar una cosa u otra:

{#if expression}
	<!-- Rendered when truthy -->
{:else}
	<!-- Rendered when falsy -->
{/if}

<script>
	let isOnline = $state(false)
</script>

<div class="status-indicator">
	{#if isOnline}
		<span class="online">Online</span>
	{:else}
		<span class="offline">Offline</span>
	{/if}
</div>

<button onclick={() => (isOnline = !isOnline)}> Toggle Status </button>

Condiciones de Múltiples Ramas

Para múltiples condiciones exclusivas, encadena con {:else if}:

{#if expression1}
	<!-- First condition -->
{:else if expression2}
	<!-- Second condition -->
{:else if expression3}
	<!-- Third condition -->
{:else}
	<!-- Default fallback -->
{/if}

<script>
	let temperature = $state(72)
</script>

<input type="range" bind:value={temperature} min="0" max="120" />
<p>Temperature: {temperature}°F</p>

{#if temperature > 100}
	<p class="danger">🔥 Dangerously hot!</p>
{:else if temperature > 80}
	<p class="warm">☀️ It's warm today</p>
{:else if temperature > 60}
	<p class="comfortable">😊 Perfect weather</p>
{:else if temperature > 40}
	<p class="cool">🍂 Getting chilly</p>
{:else}
	<p class="cold">❄️ Bundle up!</p>
{/if}

Las condiciones se evalúan en orden—la primera expresión verdadera (truthy) gana, y las condiciones posteriores no se verifican. Esto es importante para el rendimiento y la corrección de la lógica.

Valores Truthy y Falsy

El bloque #if de Svelte usa la evaluación de veracidad de JavaScript. Entender qué es truthy y falsy ayuda a evitar errores:

Valores Falsy

Estos valores se evalúan como false:

false
0 (cero)
-0 (cero negativo)
0n (BigInt cero)
"" (cadena vacía)
null
undefined
NaN

Valores Truthy

Todo lo demás es truthy, incluyendo:

true
Cualquier número distinto de cero (incluyendo números negativos)
Cualquier cadena no vacía (incluyendo "false" y "0")
Objetos y arreglos (incluso los vacíos: {} y [])
Funciones

<script>
	let count = $state(0)
	let items = $state([])
	let user = $state(null)
	let message = $state('')
</script>

<!-- Common pitfalls with truthiness -->

{#if count}
	<p>Count is {count}</p>
{:else}
	<p>Count is zero or falsy</p>
{/if}
<!-- 0 is falsy! This shows "Count is zero or falsy" -->

{#if items}
	<p>Items array exists (length: {items.length})</p>
{/if}
<!-- Empty arrays are truthy! This always shows -->

{#if items.length}
	<p>There are {items.length} items</p>
{:else}
	<p>No items yet</p>
{/if}
<!-- Check .length for "has items" logic -->

{#if user}
	<p>Welcome, {user.name}!</p>
{:else}
	<p>Please log in</p>
{/if}
<!-- null is falsy, this works as expected -->

{#if message}
	<p>{message}</p>
{/if}
<!-- Empty string is falsy, nothing renders -->

Conversión Booleana Explícita

Cuando la semántica de veracidad puede ser confusa, sé explícito:

<script>
	let score = $state(0)
</script>

<!-- Problematic: 0 is a valid score but falsy -->
{#if score}
	<p>Your score: {score}</p>
{/if}

<!-- Better: explicit check for what you mean -->
{#if score !== null && score !== undefined}
	<p>Your score: {score}</p>
{/if}

<!-- Or use typeof for number check -->
{#if typeof score === 'number'}
	<p>Your score: {score}</p>
{/if}

Integración de Reactividad con Runes

El bloque #if responde automáticamente a los cambios de estado reactivo. Con los runes de Svelte 5, esta integración es fluida e intuitiva.

Condicionales Reactivos Básicos

<script>
	let count = $state(0)
	let threshold = $state(5)
</script>

<div class="controls">
	<button onclick={() => count--}>-</button>
	<span>{count}</span>
	<button onclick={() => count++}>+</button>
</div>

<input type="number" bind:value={threshold} />

{#if count > threshold}
	<p class="success">Count ({count}) exceeds threshold ({threshold})!</p>
{:else if count === threshold}
	<p class="warning">Count equals threshold exactly</p>
{:else}
	<p class="info">Count is below threshold (need {threshold - count} more)</p>
{/if}

Cuando cambia count o threshold, Svelte re-evalúa las condiciones y actualiza el DOM en consecuencia.

Estado Derivado en Condiciones

Usa $derived para condiciones calculadas:

<script>
	let password = $state('')
	let confirmPassword = $state('')

	let passwordStrength = $derived.by(() => {
		if (password.length === 0) return 'empty'
		if (password.length < 6) return 'weak'
		if (password.length < 10) return 'medium'
		if (/[A-Z]/.test(password) && /[0-9]/.test(password)) return 'strong'
		return 'medium'
	})

	let passwordsMatch = $derived(password === confirmPassword && password.length > 0)
	let canSubmit = $derived(passwordStrength !== 'weak' && passwordsMatch)
</script>

<input type="password" bind:value={password} placeholder="Password" />
<input type="password" bind:value={confirmPassword} placeholder="Confirm" />

{#if passwordStrength === 'empty'}
	<p class="hint">Enter a password</p>
{:else if passwordStrength === 'weak'}
	<p class="error">Password too weak (min 6 characters)</p>
{:else if passwordStrength === 'medium'}
	<p class="warning">Password could be stronger</p>
{:else}
	<p class="success">Strong password!</p>
{/if}

{#if password.length > 0}
	{#if passwordsMatch}
		<p class="success">Passwords match</p>
	{:else if confirmPassword.length > 0}
		<p class="error">Passwords don't match</p>
	{/if}
{/if}

<button disabled={!canSubmit}>
	{#if canSubmit}
		Create Account
	{:else}
		Please complete form
	{/if}
</button>

Estado de Objetos Complejos

Los condicionales funcionan perfectamente con estado de objetos y arreglos:

<script>
	let user = $state(null)

	async function login() {
		// Simulate API call
		await new Promise((r) => setTimeout(r, 1000))
		user = {
			id: 1,
			name: 'Alice',
			role: 'admin',
			permissions: ['read', 'write', 'delete']
		}
	}

	function logout() {
		user = null
	}
</script>

{#if user === null}
	<div class="login-panel">
		<h2>Welcome, Guest</h2>
		<button onclick={login}>Login</button>
	</div>
{:else}
	<div class="user-panel">
		<h2>Welcome, {user.name}!</h2>
		<p>Role: {user.role}</p>

		{#if user.role === 'admin'}
			<div class="admin-section">
				<h3>Admin Controls</h3>

				{#if user.permissions.includes('delete')}
					<button class="danger">Delete All Data</button>
				{/if}
			</div>
		{/if}

		<button onclick={logout}>Logout</button>
	</div>
{/if}

Anidamiento de Bloques `#if`

Los bloques #if pueden anidarse a cualquier profundidad, permitiendo lógica condicional compleja:

<script>
	let user = $state({ loggedIn: true, isPremium: true, hasTrial: false })
	let feature = $state({ enabled: true, requiresPremium: true })
</script>

{#if user.loggedIn}
	<div class="dashboard">
		<h1>Dashboard</h1>

		{#if feature.enabled}
			{#if feature.requiresPremium}
				{#if user.isPremium}
					<div class="premium-feature">
						<h2>Premium Feature</h2>
						<p>Enjoy your exclusive content!</p>
					</div>
				{:else if user.hasTrial}
					<div class="trial-feature">
						<h2>Trial Access</h2>
						<p>You're using a free trial of this feature.</p>
						<button>Upgrade to Premium</button>
					</div>
				{:else}
					<div class="upgrade-prompt">
						<h2>Premium Required</h2>
						<p>This feature requires a premium subscription.</p>
						<button>Start Free Trial</button>
						<button>Upgrade Now</button>
					</div>
				{/if}
			{:else}
				<div class="standard-feature">
					<h2>Standard Feature</h2>
					<p>Available to all users!</p>
				</div>
			{/if}
		{:else}
			<div class="feature-disabled">
				<p>This feature is currently unavailable.</p>
			</div>
		{/if}
	</div>
{:else}
	<div class="login-prompt">
		<h1>Please Log In</h1>
		<p>You need to be logged in to access the dashboard.</p>
		<button>Login</button>
	</div>
{/if}

Si bien el anidamiento es poderoso, los condicionales profundamente anidados pueden volverse difíciles de leer. Considera extraer la lógica compleja en estado derived o componentes separados.

Renderizado Condicional con Transiciones

Las directivas de transición de Svelte funcionan perfectamente con los bloques #if, animando el contenido a medida que entra y sale:

<script>
	import { fade, fly, slide, scale } from 'svelte/transition'

	let showNotification = $state(false)
	let showSidebar = $state(false)
	let showModal = $state(false)
</script>

<!-- Fade transition -->
<button onclick={() => (showNotification = !showNotification)}> Toggle Notification </button>

{#if showNotification}
	<div class="notification" transition:fade={{ duration: 300 }}>
		<p>This notification fades in and out!</p>
	</div>
{/if}

<!-- Fly transition -->
<button onclick={() => (showSidebar = !showSidebar)}> Toggle Sidebar </button>

{#if showSidebar}
	<aside transition:fly={{ x: -300, duration: 400 }}>
		<nav>
			<a href="/">Home</a>
			<a href="/about">About</a>
			<a href="/contact">Contact</a>
		</nav>
	</aside>
{/if}

<!-- Scale transition for modals -->
<button onclick={() => (showModal = !showModal)}> Open Modal </button>

{#if showModal}
	<div class="modal-backdrop" transition:fade={{ duration: 200 }}>
		<div class="modal" transition:scale={{ start: 0.8, duration: 300 }}>
			<h2>Modal Title</h2>
			<p>Modal content goes here.</p>
			<button onclick={() => (showModal = false)}>Close</button>
		</div>
	</div>
{/if}

Transiciones `in:` y `out:` Separadas

Usa in: y out: para distintas animaciones de entrada/salida:

<script>
	import { fly, fade } from 'svelte/transition'

	let items = $state([
		{ id: 1, text: 'First item' },
		{ id: 2, text: 'Second item' },
		{ id: 3, text: 'Third item' }
	])

	let showList = $state(true)
</script>

<button onclick={() => (showList = !showList)}>
	{showList ? 'Hide' : 'Show'} List
</button>

{#if showList}
	<ul>
		{#each items as item (item.id)}
			<li in:fly={{ y: 20, duration: 300 }} out:fade={{ duration: 200 }}>
				{item.text}
			</li>
		{/each}
	</ul>
{/if}

`class` Condicional vs Bloques `#if`

A veces quieres mantener un elemento en el DOM pero alternar su visibilidad. Compara estos enfoques:

<script>
	let isVisible = $state(true)
</script>

<!-- Approach 1: {#if} block - removes from DOM -->
{#if isVisible}
	<div class="panel">I'm removed when hidden</div>
{/if}

<!-- Approach 2: CSS class toggle - stays in DOM -->
<div class="panel" class:hidden={!isVisible}>I'm always in DOM, just hidden</div>

<!-- Approach 3: Inline style -->
<div class="panel" style:display={isVisible ? 'block' : 'none'}>
	I'm always in DOM, display toggled
</div>

<style>
	.hidden {
		display: none;
	}
</style>

Cuándo usar cada uno:

Bloque #if: Cuando el contenido oculto es costoso de mantener (componentes complejos, muchos nodos DOM) o cuando necesitas transiciones de entrada/salida
Clase/estilo CSS: Cuando necesitas mostrar/ocultar de forma instantánea, cuando es importante preservar el estado del componente, o cuando el contenido es simple

Texto e Elementos en Línea

Los bloques if no requieren elementos envolventes—pueden renderizar contenido en línea de forma condicional:

<script>
	let user = $state({ name: 'Alice', isPremium: true })
	let unreadCount = $state(5)
</script>

<p>
	Welcome, {user.name}{#if user.isPremium}
		⭐{/if}!
</p>

<button>
	Messages
	{#if unreadCount > 0}
		<span class="badge">{unreadCount}</span>
	{/if}
</button>

<nav>
	<a href="/">Home</a>
	<a href="/about">About</a>
	{#if user.isPremium}
		<a href="/premium">Premium Content</a>
	{/if}
	<a href="/contact">Contact</a>
</nav>

Patrones Comunes y Casos de Uso

1. Estados de Carga

Problema: Los usuarios necesitan retroalimentación mientras se cargan los datos, y estados de error o vacío claros si la carga falla o no devuelve nada. Solución: Usa #if/{:else if}/{:else} para mostrar esqueletos, errores, datos cargados o indicaciones según corresponda.

<script>
	let isLoading = $state(true)
	let data = $state(null)
	let error = $state(null)

	async function fetchData() {
		isLoading = true
		error = null

		try {
			const response = await fetch('/api/data')
			if (!response.ok) throw new Error('Failed to fetch')
			data = await response.json()
		} catch (e) {
			error = e.message
		} finally {
			isLoading = false
		}
	}
</script>

<button onclick={fetchData}>Load Data</button>

{#if isLoading}
	<div class="skeleton-loader">
		<div class="skeleton-line"></div>
		<div class="skeleton-line short"></div>
		<div class="skeleton-line"></div>
	</div>
{:else if error}
	<div class="error-message">
		<p>Error: {error}</p>
		<button onclick={fetchData}>Retry</button>
	</div>
{:else if data}
	<div class="data-display">
		<h2>{data.title}</h2>
		<p>{data.content}</p>
	</div>
{:else}
	<p>Click the button to load data.</p>
{/if}

2. Retroalimentación de Validación de Formularios

Problema: Los usuarios necesitan retroalimentación inmediata y contextual al ingresar datos en un formulario, especialmente para errores de validación o éxito. Solución: Usa estado derivado y #if/{:else if} para mostrar sugerencias, errores o mensajes de éxito mientras el usuario interactúa con el formulario.

<script>
	let email = $state('')
	let touched = $state(false)

	let isValid = $derived(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
	let showError = $derived(touched && !isValid && email.length > 0)
	let showSuccess = $derived(touched && isValid)
</script>

<div class="form-field">
	<label for="email">Email Address</label>
	<input
		id="email"
		type="email"
		bind:value={email}
		onblur={() => (touched = true)}
		class={{ error: showError, success: showSuccess }}
	/>

	{#if showError}
		<p class="error-text">Please enter a valid email address</p>
	{:else if showSuccess}
		<p class="success-text">✓ Valid email format</p>
	{:else if !touched}
		<p class="hint-text">We'll never share your email</p>
	{/if}
</div>

<style>
	.error {
		border-color: #dc2626;
	}
	.success {
		border-color: #16a34a;
	}
	.error-text {
		color: #dc2626;
	}
	.success-text {
		color: #16a34a;
	}
	.hint-text {
		color: #6b7280;
	}
</style>

3. UI Basada en Permisos

Problema: No todos los usuarios tienen los mismos permisos—la UI debe adaptarse para mostrar/ocultar controles según los roles y permisos del usuario. Solución: Usa bloques #if para renderizar condicionalmente enlaces de navegación y controles basándose en verificaciones de permisos.

<script>
	let user = $state({
		role: 'editor',
		permissions: ['read', 'write', 'publish']
	})

	function hasPermission(permission) {
		return user.permissions.includes(permission)
	}
</script>

<nav class="admin-nav">
	<a href="/dashboard">Dashboard</a>

	{#if hasPermission('read')}
		<a href="/content">View Content</a>
	{/if}

	{#if hasPermission('write')}
		<a href="/content/new">Create Content</a>
	{/if}

	{#if hasPermission('publish')}
		<a href="/publish">Publish Queue</a>
	{/if}

	{#if user.role === 'admin'}
		<a href="/admin" class="admin-link">Admin Panel</a>
	{/if}
</nav>

<main>
	<h1>Content Editor</h1>

	<article>
		<h2>Article Title</h2>
		<p>Article content...</p>

		{#if hasPermission('write')}
			<div class="edit-controls">
				<button>Edit</button>

				{#if hasPermission('delete')}
					<button class="danger">Delete</button>
				{/if}
			</div>
		{/if}

		{#if hasPermission('publish')}
			<div class="publish-controls">
				<button class="primary">Publish</button>
				<button>Schedule</button>
			</div>
		{/if}
	</article>
</main>

4. Detección de Características/Responsividad

Problema: La UI debe adaptarse a las capacidades del dispositivo (táctil vs. ratón) y al tamaño de pantalla (móvil/tablet/escritorio). Solución: Usa bloques #if para renderizar distintos elementos de UI o sugerencias según el entorno o la detección de características.

<script>
	import { browser } from '$app/environment'

	let isTouchDevice = $state(false)
	let screenSize = $state('desktop')

	if (browser) {
		isTouchDevice = 'ontouchstart' in window

		function updateScreenSize() {
			if (window.innerWidth < 640) screenSize = 'mobile'
			else if (window.innerWidth < 1024) screenSize = 'tablet'
			else screenSize = 'desktop'
		}

		updateScreenSize()
		window.addEventListener('resize', updateScreenSize)
	}
</script>

<nav>
	{#if screenSize === 'mobile'}
		<button class="hamburger-menu">☰</button>
	{:else}
		<div class="nav-links">
			<a href="/">Home</a>
			<a href="/about">About</a>
			<a href="/contact">Contact</a>
		</div>
	{/if}
</nav>

<div class="interaction-hint">
	{#if isTouchDevice}
		<p>👆 Tap items to interact</p>
	{:else}
		<p>🖱️ Click items to interact</p>
	{/if}
</div>

5. Estados Vacíos

Problema: Cuando una lista o búsqueda no devuelve resultados, los usuarios necesitan retroalimentación clara y orientación sobre qué hacer a continuación. Solución: Usa #if/{:else if}/{:else} para mostrar estados iniciales, vacíos o con resultados para una mejor experiencia de usuario.

<script>
	let searchQuery = $state('')
	let searchResults = $state([])
	let hasSearched = $state(false)
</script>

<input type="search" bind:value={searchQuery} placeholder="Search..." />

<button
	onclick={() => {
		/* perform search */ hasSearched = true
	}}
>
	Search
</button>

{#if !hasSearched}
	<div class="initial-state">
		<img src="/search-illustration.svg" alt="" />
		<p>Enter a search term to find results</p>
	</div>
{:else if searchResults.length === 0}
	<div class="empty-state">
		<img src="/no-results.svg" alt="" />
		<h3>No results found</h3>
		<p>Try adjusting your search terms</p>
	</div>
{:else}
	<ul class="results">
		{#each searchResults as result}
			<li>{result.title}</li>
		{/each}
	</ul>
{/if}

6. Indicadores de Funcionalidades

Problema: Es posible que quieras habilitar o deshabilitar funcionalidades para ciertos usuarios o entornos sin cambiar la estructura del código. Solución: Usa bloques #if para renderizar condicionalmente componentes o UI basándose en los valores de los indicadores de funcionalidades.

<script>
	// Feature flags could come from environment, API, or config
	const features = {
		newDashboard: true,
		darkMode: true,
		betaExport: false,
		experimentalAI: false
	}
</script>

{#if features.newDashboard}
	<DashboardV2 />
{:else}
	<DashboardV1 />
{/if}

<div class="settings">
	{#if features.darkMode}
		<label>
			<input type="checkbox" /> Dark Mode
		</label>
	{/if}

	{#if features.betaExport}
		<button>Export (Beta)</button>
	{/if}

	{#if features.experimentalAI}
		<div class="ai-assistant">
			<button>Ask AI ✨</button>
		</div>
	{/if}
</div>

Usando `@const` Dentro de Bloques If

La directiva @const permite declarar constantes de ámbito de bloque, lo cual es especialmente útil dentro de bloques #if:

<script>
	let order = $state({
		items: [
			{ name: 'Widget', price: 29.99, quantity: 2 },
			{ name: 'Gadget', price: 49.99, quantity: 1 }
		],
		coupon: { code: 'SAVE10', discount: 0.1 }
	})
</script>

{#if order.items.length > 0}
	{@const subtotal = order.items.reduce((sum, item) => sum + item.price * item.quantity, 0)}
	{@const discount = order.coupon ? subtotal * order.coupon.discount : 0}
	{@const total = subtotal - discount}

	<div class="order-summary">
		<h2>Order Summary</h2>

		{#each order.items as item}
			<div class="line-item">
				<span>{item.name} × {item.quantity}</span>
				<span>${(item.price * item.quantity).toFixed(2)}</span>
			</div>
		{/each}

		<hr />

		<div class="subtotal">
			<span>Subtotal</span>
			<span>${subtotal.toFixed(2)}</span>
		</div>

		{#if order.coupon}
			{@const savings = discount.toFixed(2)}
			<div class="discount">
				<span>Discount ({order.coupon.code})</span>
				<span class="savings">-${savings}</span>
			</div>
		{/if}

		<div class="total">
			<span>Total</span>
			<span>${total.toFixed(2)}</span>
		</div>
	</div>
{:else}
	<div class="empty-cart">
		<p>Your cart is empty</p>
		<a href="/shop">Continue Shopping</a>
	</div>
{/if}

Problemas Comunes y Soluciones

1: Verificar la Longitud de un Array

Problema: Los arrays vacíos son truthy en JavaScript, por lo que {#if items} siempre es verdadero—incluso cuando el array está vacío. Solución: Siempre verifica .length para determinar si un array tiene elementos.

<script>
	let items = $state([])
</script>

<!-- AVOID: Empty arrays are truthy! -->
{#if items}
	<p>You have items!</p>
{/if}
<!-- This always shows, even when items is empty -->

<!-- PREFERRED: Check the length -->
{#if items.length > 0}
	<p>You have {items.length} items!</p>
{:else}
	<p>No items yet.</p>
{/if}

<!-- PREFERRED: Length is falsy when 0 -->
{#if items.length}
	<p>You have {items.length} items!</p>
{/if}

2: Verificar Propiedades de Objetos

Problema: Las cadenas vacías son falsy, por lo que {#if user.email} falla cuando la propiedad existe pero es una cadena vacía. Solución: Sé explícito—verifica undefined/null o usa 'propiedad' in objeto para comprobar la existencia de una propiedad.

<script>
	let user = $state({ name: 'Alice', email: '' })
</script>

<!-- AVOID: Empty string is falsy -->
{#if user.email}
	<p>Email: {user.email}</p>
{:else}
	<p>No email provided</p>
{/if}
<!-- Shows "No email provided" when email is "" -->

<!-- PREFERRED: Be explicit about what you're checking -->
{#if user.email !== undefined && user.email !== null}
	<p>Email: {user.email || '(empty)'}</p>
{:else}
	<p>Email not set</p>
{/if}

<!-- PREFERRED: Or check for the property existing -->
{#if 'email' in user}
	<p>Email: {user.email || '(not provided)'}</p>
{/if}

3: Encadenamiento Opcional en Condiciones

Problema: Acceder a propiedades anidadas en condiciones puede lanzar errores si algún elemento padre es null o undefined. Solución: Usa encadenamiento opcional (?.) o encadena verificaciones para acceder de forma segura a valores profundamente anidados.

<script>
	let data = $state(null)
	// Later: data = { user: { profile: { avatar: 'url' } } }
</script>

<!-- AVOID: Will throw if data or user is null -->
{#if data.user.profile.avatar}
	<img src={data.user.profile.avatar} alt="Avatar" />
{/if}

<!-- PREFERRED: Use optional chaining -->
{#if data?.user?.profile?.avatar}
	<img src={data.user.profile.avatar} alt="Avatar" />
{/if}

<!-- PREFERRED: Chain the checks -->
{#if data && data.user && data.user.profile && data.user.profile.avatar}
	<img src={data.user.profile.avatar} alt="Avatar" />
{/if}

4: Comparar Objetos

Problema: Comparar objetos con === verifica la referencia, no el valor—por lo que dos objetos con los mismos datos no son iguales a menos que sean la misma referencia. Solución: Compara por identificador único (como id), o asegúrate de usar la misma referencia.

<script>
  let selectedItem = $state({ id: 1, name: 'Widget' });
  let items = $state([
    { id: 1, name: 'Widget' },
    { id: 2, name: 'Gadget' }
  ]);
</script>

<!-- AVOID: Object comparison checks reference, not value -->
{#each items as item}
  {#if item === selectedItem}
    <p>Selected!</p>
  {/if}
{/each}
<!-- Never matches because they're different object references -->

<!-- PREFERRED: Compare by identifier -->
{#each items as item}
  {#if item.id === selectedItem.id}
    <p>Selected!</p>
  {/if}
{/each}

<!-- PREFERRED: Use the same reference -->
<script>
  let items = $state([
    { id: 1, name: 'Widget' },
    { id: 2, name: 'Gadget' }
  ]);
  let selectedItem = $state(items[0]); // Same reference
</script>

5: Datos Asíncronos en Condiciones

Problema: Al cargar datos asíncronos, no puedes distinguir entre "cargando", "sin datos" y "datos cargados" con una sola variable. Solución: Usa una variable de estado de carga explícita para diferenciar entre los estados de cargando, cargado y vacío.

<script>
  let user = $state(undefined); // Loading state

  async function loadUser() {
    const response = await fetch('/api/user');
    user = await response.json();
  }

  loadUser();
</script>

<!-- AVOID: Can't distinguish loading from no user -->
{#if user}
  <p>Welcome, {user.name}!</p>
{:else}
  <p>Please log in</p>
{/if}

<!-- PREFERRED: Use explicit loading state -->
<script>
  let user = $state(null);
  let isLoading = $state(true);

  async function loadUser() {
    isLoading = true;
    try {
      const response = await fetch('/api/user');
      user = await response.json();
    } finally {
      isLoading = false;
    }
  }

  loadUser();
</script>

{#if isLoading}
  <p>Loading...</p>
{:else if user}
  <p>Welcome, {user.name}!</p>
{:else}
  <p>Please log in</p>
{/if}

6: Múltiples Condiciones que Pueden Ser Todas Verdaderas

Problema: Usar {:else if} para condiciones no exclusivas significa que solo se muestra la primera condición verdadera, aunque otras también lo sean. Solución: Usa bloques #if separados para cada condición cuando múltiples puedan ser verdaderas al mismo tiempo.

<script>
	let notifications = $state({
		hasError: true,
		hasWarning: true,
		hasInfo: true
	})
</script>

<!-- AVOID: Only shows first match -->
{#if notifications.hasError}
	<p class="error">Error occurred!</p>
{:else if notifications.hasWarning}
	<p class="warning">Warning!</p>
{:else if notifications.hasInfo}
	<p class="info">FYI...</p>
{/if}
<!-- Only shows error, even though all are true -->

<!-- PREFERRED: Use separate if blocks for non-exclusive conditions -->
{#if notifications.hasError}
	<p class="error">Error occurred!</p>
{/if}

{#if notifications.hasWarning}
	<p class="warning">Warning!</p>
{/if}

{#if notifications.hasInfo}
	<p class="info">FYI...</p>
{/if}

Consideraciones de Rendimiento

Creación y Destrucción del DOM

Cada vez que cambia una condición #if, Svelte crea o destruye los nodos DOM internos. Para contenido simple, esto es rápido. Para componentes complejos con muchos hijos, considera:

<script>
	let showPanel = $state(false)
</script>

<!-- This destroys and recreates the component each toggle -->
{#if showPanel}
	<ExpensiveComponent />
{/if}

<!-- Alternative: Keep component alive, just hide it -->
<div style:display={showPanel ? 'block' : 'none'}>
	<ExpensiveComponent />
</div>

<!-- Or use CSS -->
<div class:hidden={!showPanel}>
	<ExpensiveComponent />
</div>

<style>
	.hidden {
		display: none;
	}
</style>

Evitar Recálculos Innecesarios

Cuando las condiciones dependen de expresiones complejas, extráelas a $derived:

<script>
	let items = $state([
		/* many items */
	])
	let filter = $state('')

	// AVOID: Recalculated on every render
	// {#if items.filter(i => i.name.includes(filter)).length > 0}

	// PREFERRED: Only recalculated when items or filter change
	let filteredItems = $derived(items.filter((i) => i.name.includes(filter)))
	let hasResults = $derived(filteredItems.length > 0)
</script>

{#if hasResults}
	<ul>
		{#each filteredItems as item}
			<li>{item.name}</li>
		{/each}
	</ul>
{:else}
	<p>No results</p>
{/if}

Resumen de Buenas Prácticas

Sé explícito sobre lo que estás verificando: Evita depender de la veracidad implícita para valores como 0, cadenas vacías o arreglos vacíos cuando esos son valores válidos.
Usa encadenamiento opcional: Cuando accedas a propiedades anidadas que podrían no existir, usa ?. para prevenir errores en tiempo de ejecución.
Extrae condiciones complejas a $derived: Esto mejora la legibilidad y garantiza actualizaciones eficientes.
Considera el ciclo de vida del DOM: Entiende que #if crea/destruye nodos. Usa visibilidad CSS para contenido costoso que se alterna con frecuencia.
No anides en exceso: Si tienes muchos niveles de anidamiento, considera extraer la lógica a estado derivado o componentes separados.
Usa {:else if} para estados mutuamente excluyentes: Esto es más eficiente que múltiples bloques #if separados.
Usa bloques #if separados para condiciones no excluyentes: Cuando múltiples condiciones pueden ser verdaderas simultáneamente.
Proporciona estados vacíos/de carga significativos: Los usuarios aprecian saber qué está pasando en lugar de no ver nada.
Combina con transiciones para mayor refinamiento: Anima el contenido condicional para una experiencia de usuario más fluida.
Documenta condiciones complejas: Si la lógica no es inmediatamente obvia, agrega comentarios que expliquen la lógica de negocio.

Referencia Rápida

<!-- Basic if -->
{#if condition}
	<p>Rendered when true</p>
{/if}

<!-- If-else -->
{#if condition}
	<p>True branch</p>
{:else}
	<p>False branch</p>
{/if}

<!-- Multiple branches -->
{#if condition1}
	<p>First match</p>
{:else if condition2}
	<p>Second match</p>
{:else if condition3}
	<p>Third match</p>
{:else}
	<p>Default</p>
{/if}

<!-- Inline conditional -->
<p>
	Status: {#if active}Active{:else}Inactive{/if}
</p>

<!-- With transitions -->
{#if visible}
	<div transition:fade>Animated content</div>
{/if}

<!-- With @const -->
{#if items.length > 0}
	{@const total = items.reduce((a, b) => a + b, 0)}
	<p>Total: {total}</p>
{/if}

<!-- Nested -->
{#if user}
	{#if user.isAdmin}
		<AdminPanel />
	{:else}
		<UserDashboard />
	{/if}
{:else}
	<LoginForm />
{/if}

Conclusión

El bloque #if es engañosamente simple en sintaxis, pero fundamental para construir interfaces de usuario dinámicas. Al entender la veracidad, aprovechar la reactividad de Svelte y seguir las buenas prácticas, puedes crear interfaces que respondan elegantemente a cualquier condición que encuentre tu aplicación. Su naturaleza declarativa transforma lo que sería una lógica imperativa de mostrar/ocultar en JavaScript puro en una sintaxis de plantilla limpia y legible que responde automáticamente a los cambios de estado.

El poder de los bloques #if no radica solo en su simplicidad, sino en cómo se combinan con el sistema reactivo de Svelte. Combinados con $derived para condiciones complejas, @const para cálculos en el ámbito del bloque y transiciones para animaciones fluidas, el renderizado condicional se convierte en un patrón arquitectónico de primera clase en lugar de algo secundario. Al dominar los matices de la veracidad, evitar errores comunes como el anidamiento excesivo y entender cuándo usar {:else if} en lugar de bloques separados, puedes construir interfaces que sean tanto eficientes como mantenibles.

Puntos Clave

Los bloques #if renderizan contenido condicionalmente basándose en la veracidad de JavaScript, con reactividad automática cuando las condiciones cambian: el contenido se agrega/elimina del DOM, no solo se oculta
La ramificación de tres vías usa {:else if} y {:else} con condiciones encadenadas ilimitadas: {#if}{:else if}{:else if}{:else}{/if}
La veracidad sigue las reglas de JavaScript: 0, "", null, undefined, NaN y false son falsos; todo lo demás (incluyendo [], {}, "0") es verdadero
Combina con transiciones para cambios de UI fluidos: las directivas transition:fade, in:fly o out:slide animan el contenido cuando entra/sale del DOM
Las condiciones reactivas usando $derived permiten predicados calculados complejos que se actualizan automáticamente: let showAdvanced = $derived(user?.role === 'admin' && settings.expertMode)
@const en el ámbito del bloque permite cálculos en línea dentro de las condiciones: {#if items.length > 0}{@const total = sum(items)}<p>Total: {total}</p>{/if}
Consideraciones de rendimiento: evita verificaciones de condiciones costosas en las plantillas: mueve los cálculos complejos a $derived en la sección del script para prevenir recálculos en cada renderizado
Las condiciones anidadas pueden perjudicar la legibilidad: considera la extracción a componentes, predicados con $derived o cláusulas de guarda cuando el anidamiento supere los 2-3 niveles

Ver También

Documentación Oficial de Svelte 5 - {#if}
Truthy/Falsy en JavaScript - Entendiendo la evaluación condicional
$derived - Valores reactivos calculados para condiciones complejas
Transiciones de Svelte - Animando contenido condicional