Renderização Condicional Declarativa no Svelte 5

Toda interface de usuário precisa tomar decisões. Mostrar este botão quando o usuário estiver logado. Exibir uma mensagem de erro quando a validação falhar. Revelar opções avançadas quando o usuário acionar um interruptor. Esses padrões de renderização condicional são fundamentais para construir aplicações dinâmicas e responsivas.

O bloco #if do Svelte 5 oferece uma abordagem elegante e declarativa para renderização condicional que se integra perfeitamente ao sistema de reatividade do framework. Ao contrário de abordagens imperativas, onde você manipula o DOM manualmente ou alterna classes CSS, a sintaxe de template do Svelte permite descrever o que deve ser renderizado e em quais condições — o framework cuida do como.

Este tutorial explora o bloco #if de forma abrangente: desde condicionais básicos até lógica complexa com múltiplos ramos, da integração com estado reativo aos efeitos de transição, dos erros comuns aos padrões avançados. Seja construindo interfaces simples de alternância ou UIs complexas baseadas em permissões, você dominará as técnicas necessárias para renderizar conteúdo condicionalmente com confiança.

O Problema

Por Que Condicionais Declarativos São Importantes

Antes de mergulhar na sintaxe, vamos entender por que a renderização condicional declarativa importa. Considere uma abordagem tradicional em 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'
	}
}

Essa abordagem sofre de vários problemas:

Lógica dispersa: o gerenciamento do estado da UI está espalhado entre JavaScript e HTML
Sincronização manual: você precisa lembrar de chamar updateUI() sempre que o estado mudar
Propenso a erros: é fácil esquecer de atualizar um elemento quando as condições mudam
Baixa legibilidade: a relação entre dados e UI não é imediatamente clara

A abordagem declarativa do Svelte elimina esses 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}

A UI reflete automaticamente o estado. Mude isLoggedIn, e o Svelte atualiza o DOM. A relação entre dados e renderização é explícita no template.

Sintaxe Básica

Bloco If Simples

A forma mais básica renderiza conteúdo condicionalmente quando uma expressão é verdadeira (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}

O conteúdo dentro do bloco — incluindo todos os elementos, texto e até outros componentes — só é renderizado quando showMessage é true. Quando se torna false, o Svelte remove o conteúdo do DOM completamente.

Bloco If-Else

Para estados binários em que você precisa mostrar uma coisa ou outra:

{#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>

Condições com Múltiplos Ramos

Para múltiplas condições exclusivas, encadeie com {: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}

As condições são avaliadas em ordem — a primeira expressão verdadeira (truthy) vence, e as condições subsequentes não são verificadas. Isso é importante para o desempenho e a correção da lógica.

Valores Truthy e Falsy

O bloco #if do Svelte usa a avaliação de veracidade do JavaScript. Entender o que é truthy e falsy ajuda a evitar bugs:

Valores Falsy

Estes valores são avaliados como false:

false
0 (zero)
-0 (zero negativo)
0n (BigInt zero)
"" (string vazia)
null
undefined
NaN

Valores Truthy

Todo o resto é truthy, incluindo:

true
Qualquer número diferente de zero (incluindo números negativos)
Qualquer string não vazia (incluindo "false" e "0")
Objetos e arrays (mesmo os vazios: {} e [])
Funções

<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 -->

Conversão Explícita para Booleano

Quando a semântica de veracidade puder ser confusa, seja 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}

Integração com Reatividade usando Runes

O bloco #if responde automaticamente às mudanças de estado reativo. Com as runes do Svelte 5, essa integração é fluida e intuitiva.

Condicionais Reativos 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}

Quando count ou threshold mudam, o Svelte reavalia as condições e atualiza o DOM de acordo.

Estado Derivado em Condições

Use $derived para condições computadas:

<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 Objeto Complexo

Os condicionais funcionam perfeitamente com estado de objetos e arrays:

<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}

Aninhando Blocos `#if`

Os blocos #if podem ser aninhados em qualquer profundidade, permitindo lógica condicional complexa:

<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}

Embora o aninhamento seja poderoso, condicionais profundamente aninhados podem se tornar difíceis de ler. Considere extrair lógicas complexas para estado derived ou componentes separados.

Renderização Condicional com Transições

As diretivas de transição do Svelte funcionam muito bem com blocos #if, animando o conteúdo conforme ele entra e sai:

<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}

Transições `in:` e `out:` Separadas

Use in: e out: para animações de entrada/saída diferentes:

<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 Blocos `#if`

Às vezes você quer manter um elemento no DOM, mas alternar sua visibilidade. Compare essas abordagens:

<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>

Quando usar cada um:

Bloco #if: Quando o conteúdo oculto é custoso para manter (componentes complexos, muitos nós DOM) ou quando você precisa de transições de entrada/saída
Classe/estilo CSS: Quando você precisa de exibição/ocultação instantânea, quando preservar o estado do componente é importante ou quando o conteúdo é simples

Texto e Elementos Inline

Blocos if não exigem elementos de wrapper — eles podem renderizar conteúdo inline condicionalmente:

<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>

Padrões Comuns e Casos de Uso

1. Estados de Carregamento

Problema: Os usuários precisam de feedback enquanto os dados estão carregando, e estados claros de erro ou vazio caso o carregamento falhe ou não retorne nada. Solução: Use #if/{:else if}/{:else} para exibir skeletons, erros, dados carregados ou prompts conforme apropriado.

<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. Feedback de Validação de Formulário

Problema: Os usuários precisam de feedback imediato e contextual ao inserir dados em formulários, especialmente para erros de validação ou sucesso. Solução: Use estado derivado e #if/{:else if} para exibir dicas, erros ou mensagens de sucesso conforme o usuário interage com o formulário.

<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 Baseada em Permissões

Problema: Nem todos os usuários têm as mesmas permissões — a UI deve se adaptar para exibir/ocultar controles com base nas funções e permissões do usuário. Solução: Use blocos #if para renderizar condicionalmente links de navegação e controles com base em verificações de permissão.

<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. Detecção Responsiva/de Recursos

Problema: A UI deve se adaptar às capacidades do dispositivo (toque vs. mouse) e ao tamanho da tela (mobile/tablet/desktop). Solução: Use blocos #if para renderizar diferentes elementos de UI ou dicas com base no ambiente ou detecção de recursos.

<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 Vazios

Problema: Quando uma lista ou busca não retorna resultados, os usuários precisam de feedback claro e orientação sobre o que fazer a seguir. Solução: Use #if/{:else if}/{:else} para exibir estados iniciais, vazios ou com resultados para uma melhor experiência do usuário.

<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. Feature Flags

Problema: Você pode querer habilitar ou desabilitar funcionalidades para determinados usuários ou ambientes sem alterar a estrutura do código. Solução: Use blocos #if para renderizar condicionalmente componentes ou UI com base nos valores de feature flags.

<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 Blocos If

A diretiva @const permite declarar constantes com escopo de bloco, o que é particularmente útil dentro de blocos #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}

Dificuldades Comuns e Soluções

1: Verificando o Comprimento de Arrays

Problema: Arrays vazios são truthy em JavaScript, então {#if items} é sempre verdadeiro — mesmo quando o array está vazio. Solução: Sempre verifique .length para determinar se um array possui itens.

<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: Verificando Propriedades de Objetos

Problema: Strings vazias são falsy, então {#if user.email} falha quando a propriedade existe mas é uma string vazia. Solução: Seja explícito — verifique undefined/null ou use 'propriedade' in objeto para testar a existência da propriedade.

<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: Encadeamento Opcional em Condições

Problema: Acessar propriedades aninhadas em condições pode lançar erros se algum pai for null ou undefined. Solução: Use encadeamento opcional (?.) ou encadeie verificações para acessar com segurança valores profundamente aninhados.

<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: Comparando Objetos

Problema: Comparar objetos com === verifica a referência, não o valor — portanto, dois objetos com os mesmos dados não são iguais a menos que sejam a mesma referência. Solução: Compare por identificador único (como id), ou garanta que você está usando a mesma referência.

<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: Dados Assíncronos em Condições

Problema: Ao carregar dados assíncronos, não é possível distinguir entre "carregando", "sem dados" e "dados carregados" com uma única variável. Solução: Use uma variável de estado de carregamento explícita para diferenciar entre os estados de carregando, carregado e vazio.

<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últiplas Condições que Podem Ser Todas Verdadeiras

Problema: Usar {:else if} para condições não exclusivas faz com que apenas a primeira condição verdadeira seja exibida, mesmo que outras também sejam verdadeiras. Solução: Use blocos #if separados para cada condição quando múltiplas puderem ser verdadeiras ao mesmo tempo.

<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}

Considerações de Desempenho

Criação e Destruição do DOM

Cada vez que uma condição #if muda, o Svelte cria ou destrói os nós DOM internos. Para conteúdo simples, isso é rápido. Para componentes complexos com muitos filhos, considere:

<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>

Evitando Recálculos Desnecessários

Quando as condições dependem de expressões complexas, extraia-as para $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}

Resumo das Melhores Práticas

Seja explícito sobre o que está verificando: Evite depender de veracidade implícita para valores como 0, strings vazias ou arrays vazios quando esses são valores válidos.
Use encadeamento opcional: Ao acessar propriedades aninhadas que podem não existir, use ?. para evitar erros em tempo de execução.
Extraia condições complexas para $derived: Isso melhora a legibilidade e garante atualizações eficientes.
Considere o ciclo de vida do DOM: Entenda que #if cria/destrói nós. Use visibilidade CSS para conteúdo caro que é alternado com frequência.
Não aninhe em excesso: Se você tiver muitos níveis de aninhamento, considere extrair a lógica para estado derivado ou componentes separados.
Use {:else if} para estados mutuamente exclusivos: Isso é mais eficiente do que múltiplos blocos #if separados.
Use blocos #if separados para condições não exclusivas: Quando múltiplas condições podem ser verdadeiras simultaneamente.
Forneça estados significativos de vazio/carregamento: Os usuários apreciam saber o que está acontecendo em vez de não ver nada.
Combine com transições para refinamento: Anime o conteúdo condicional para uma experiência de usuário mais suave.
Documente condições complexas: Se a lógica não for imediatamente óbvia, adicione comentários explicando a lógica de negócio.

Referência 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}

Conclusão

O bloco #if é enganosamente simples em sintaxe, mas fundamental para construir interfaces de usuário dinâmicas. Ao compreender a veracidade, abraçar a reatividade do Svelte e seguir as melhores práticas, você pode criar interfaces que respondem elegantemente a qualquer condição encontrada pela sua aplicação. Sua natureza declarativa transforma o que seria uma lógica imperativa de mostrar/ocultar em JavaScript puro em uma sintaxe de template limpa e legível que responde automaticamente às mudanças de estado.

O poder dos blocos #if não está apenas em sua simplicidade, mas em como eles se compõem com o sistema reativo do Svelte. Combinados com $derived para condições complexas, @const para cálculos com escopo de bloco e transições para animações suaves, a renderização condicional se torna um padrão arquitetural de primeira classe em vez de uma reflexão tardia. Ao dominar as nuances da veracidade, evitar armadilhas comuns como aninhamento excessivo e entender quando usar {:else if} versus blocos separados, você pode construir interfaces que são tanto eficientes quanto manuteníveis.

Principais Conclusões

Blocos #if renderizam conteúdo condicionalmente com base na veracidade do JavaScript, com reatividade automática quando as condições mudam — o conteúdo é adicionado/removido do DOM, não apenas ocultado
O ramificamento em três vias usa {:else if} e {:else} com condições encadeadas ilimitadas: {#if}{:else if}{:else if}{:else}{/if}
A veracidade segue as regras do JavaScript — 0, "", null, undefined, NaN e false são falsos; tudo o mais (incluindo [], {}, "0") é verdadeiro
Combine com transições para mudanças suaves na interface — as diretivas transition:fade, in:fly ou out:slide animam o conteúdo ao entrar/sair do DOM
Condições reativas usando $derived habilitam predicados computados complexos que se atualizam automaticamente: let showAdvanced = $derived(user?.role === 'admin' && settings.expertMode)
@const com escopo de bloco habilita cálculos inline dentro das condições: {#if items.length > 0}{@const total = sum(items)}<p>Total: {total}</p>{/if}
Considerações de desempenho: evite verificações de condição caras em templates — mova cálculos complexos para $derived na seção de script para evitar recálculo a cada renderização
Condições aninhadas podem prejudicar a legibilidade — considere extração de componente, predicados $derived ou cláusulas de guarda quando o aninhamento ultrapassar 2-3 níveis

Veja Também

Documentação Oficial do Svelte 5 - {#if}
Truthy/Falsy em JavaScript - Compreendendo a avaliação condicional
$derived - Valores reativos computados para condições complexas
Transições do Svelte - Animando conteúdo condicional