Renderizado Declarativo de Listas

En el corazón de toda aplicación web dinámica está la necesidad de renderizar colecciones de datos—listas de usuarios, catálogos de productos, feeds de notificaciones, filas de tablas, elementos de navegación. Aunque JavaScript ofrece Array.prototype.map() para transformar arrays, el bloque #each de Svelte 5 proporciona algo mucho más poderoso: un mecanismo declarativo, reactivo y altamente optimizado para renderizar listas que se actualiza automáticamente cuando cambian tus datos.

Entender #each en profundidad no se trata solo de aprender sintaxis—se trata de comprender cómo Svelte rastrea los elementos del DOM, por qué las claves importan para el rendimiento y la corrección, y cómo aprovechar la desestructuración y los patrones para escribir código más limpio y mantenible. Este tutorial explora cada faceta del renderizado de listas en Svelte 5, desde la iteración básica hasta patrones avanzados que harán que tus aplicaciones sean tanto eficientes como elegantes.

Los Fundamentos

Sintaxis Básica del Bloque Each

El bloque #each itera sobre cualquier valor que pueda usarse con Array.from()—arrays, objetos similares a arrays (cualquier cosa con una propiedad length), o iterables como Map y Set.

{#each expression as name}
	<!-- rendered for each item -->
{/each}

Este es el ejemplo más sencillo:

<script>
	let fruits = $state(['Apple', 'Banana', 'Cherry', 'Date'])
</script>

<ul>
	{#each fruits as fruit}
		<li>{fruit}</li>
	{/each}
</ul>

Esto renderiza una lista desordenada con cuatro elementos. Cuando fruits cambia—se agregan, eliminan o modifican elementos—Svelte actualiza automáticamente el DOM para reflejar el nuevo estado.

Manejo de `null` y `undefined`

Si la expresión se evalúa como null o undefined, Svelte la trata como un array vacío. Esto significa que no se renderiza ningún elemento, y cualquier bloque {:else} (que se cubre más adelante) aparecerá:

<script>
	let items = $state(null)

	async function loadItems() {
		const response = await fetch('/api/items')
		items = await response.json()
	}
</script>

{#each items as item}
	<div>{item.name}</div>
{:else}
	<p>No items to display</p>
{/each}

<!-- Before loadItems() completes, "No items to display" shows -->

Este comportamiento elimina la necesidad de verificaciones explícitas de null en tus plantillas.

Acceso al Índice

Con frecuencia necesitas conocer la posición de un elemento dentro de la lista. El bloque #each proporciona un segundo parámetro opcional—el índice:

{#each expression as name, index}
	<!-- index is 0-based -->
{/each}

<script>
	let steps = $state(['Create account', 'Verify email', 'Complete profile', 'Start exploring'])
</script>

<ol class="setup-wizard">
	{#each steps as step, i}
		<li class="step">
			<span class="step-number">{i + 1}</span>
			<span class="step-label">{step}</span>
		</li>
	{/each}
</ol>

El índice es equivalente al segundo argumento en array.map((item, index) => ...). Comienza en cero y se actualiza automáticamente cuando los elementos se reordenan, agregan o eliminan.

Uso del Índice para Estilos Condicionales

<script>
	let tableData = $state([
		{ name: 'Alice', role: 'Developer', department: 'Engineering' },
		{ name: 'Bob', role: 'Designer', department: 'Product' },
		{ name: 'Charlie', role: 'Manager', department: 'Operations' },
		{ name: 'Diana', role: 'Analyst', department: 'Finance' }
	])
</script>

<table>
	<thead>
		<tr>
			<th>#</th>
			<th>Name</th>
			<th>Role</th>
			<th>Department</th>
		</tr>
	</thead>
	<tbody>
		{#each tableData as row, index}
			<tr class={{ even: index % 2 === 0, odd: index % 2 === 1 }}>
				<td>{index + 1}</td>
				<td>{row.name}</td>
				<td>{row.role}</td>
				<td>{row.department}</td>
			</tr>
		{/each}
	</tbody>
</table>

<style>
	.even {
		background: #f8fafc;
	}
	.odd {
		background: #ffffff;
	}
</style>

Detección del Primer y Último Elemento

<script>
	let breadcrumbs = $state([
		{ label: 'Home', href: '/' },
		{ label: 'Products', href: '/products' },
		{ label: 'Electronics', href: '/products/electronics' },
		{ label: 'Laptops', href: '/products/electronics/laptops' }
	])
</script>

<nav aria-label="Breadcrumb">
	<ol class="breadcrumb">
		{#each breadcrumbs as crumb, i}
			{@const isFirst = i === 0}
			{@const isLast = i === breadcrumbs.length - 1}

			<li class={{ first: isFirst, current: isLast }}>
				{#if isLast}
					<span aria-current="page">{crumb.label}</span>
				{:else}
					<a href={crumb.href}>{crumb.label}</a>
					<span class="separator">/</span>
				{/if}
			</li>
		{/each}
	</ol>
</nav>

Bloques Each con Clave

Aquí es donde #each se vuelve verdaderamente poderoso—y donde muchos desarrolladores encuentran sus primeros errores sutiles.

{#each expression as name (key)}
	<!-- key uniquely identifies each item -->
{/each}

Por Qué Importan las Claves

Sin una clave, Svelte actualiza la lista por índice. Cuando los elementos cambian, Svelte compara los arrays antiguo y nuevo posición por posición:

Posición 0: Actualiza si es diferente
Posición 1: Actualiza si es diferente
Y así sucesivamente...

Esto funciona bien para casos simples, pero falla cuando los elementos se reordenan, se insertan en el medio o se eliminan desde cualquier lugar que no sea el final.

El Problema Sin Claves:

<script>
	let todos = $state([
		{ id: 1, text: 'Learn Svelte', done: false },
		{ id: 2, text: 'Build an app', done: false },
		{ id: 3, text: 'Deploy', done: false }
	])

	function removeFirst() {
		todos = todos.slice(1)
	}
</script>

<!-- WITHOUT key: BUGGY -->
{#each todos as todo}
	<div class="todo">
		<input type="checkbox" bind:checked={todo.done} />
		<span>{todo.text}</span>
	</div>
{/each}

<button onclick={removeFirst}>Remove First</button>

Si marcas el primer checkbox y luego haces clic en "Remove First," podrías esperar que desaparezca el primer todo. Pero sin una clave, Svelte actualiza por índice:

La posición 0 ahora tiene "Build an app" → actualiza el texto, mantiene el estado del checkbox
La posición 1 ahora tiene "Deploy" → actualiza el texto, mantiene el estado del checkbox
La posición 2 ya no existe → elimina el último elemento del DOM

El resultado: El elemento "Build an app" ahora aparece marcado, ¡lo cual es incorrecto!

La Solución Con Claves:

{#each todos as todo (todo.id)}
	<div class="todo">
		<input type="checkbox" bind:checked={todo.done} />
		<span>{todo.text}</span>
	</div>
{/each}

Ahora Svelte rastrea cada elemento del DOM por su todo.id. Cuando eliminas el primer todo:

Svelte ve que id: 1 desapareció → elimina ese elemento específico del DOM
Los elementos con id: 2 e id: 3 permanecen intactos

El estado del checkbox permanece con el elemento correcto.

¿Qué Hace una Buena Clave?

Las claves deben identificar de forma única cada elemento dentro de la lista. Las buenas claves son:

Únicas: No debe haber dos elementos con la misma clave
Estables: El mismo elemento debe tener siempre la misma clave en cada renderizado
Simples: Se prefieren strings y números (mantienen la identidad incluso cuando cambia la referencia al objeto)

<!-- PREFERRED: Using unique database IDs -->
{#each users as user (user.id)}

<!-- PREFERRED: Using unique slugs or codes -->
{#each products as product (product.sku)}

<!-- PREFERRED: Compound keys when needed -->
{#each orderItems as item (`${item.orderId}-${item.productId}`)}

<!-- RISKY: Using index as key (same as no key for reordering) -->
{#each items as item, i (i)}

<!-- AVOID: Using non-unique values -->
{#each users as user (user.role)}  <!-- Multiple users can share a role! -->

<!-- AVOID: Using object references that change -->
{#each items as item (item)}  <!-- New object reference = new key -->

Claves con Índice

Puedes usar tanto una clave como un índice juntos:

{#each items as item, index (item.id)}
	<div>
		{index + 1}. {item.name}
	</div>
{/each}

La clave rastrea la identidad del elemento en el DOM, mientras que el índice refleja la posición actual.

Cuándo las Claves Son Esenciales

Usa siempre claves cuando:

Los elementos tienen estado interno (inputs de formulario, estado de componentes, animaciones)
Los elementos pueden reordenarse (arrastrar y soltar, ordenamiento)
Los elementos pueden insertarse o eliminarse desde el medio
Se usan transiciones o animaciones (Svelte necesita saber qué elementos animar)
Los componentes mantienen su propio estado

<script>
	import { flip } from 'svelte/animate'
	import { fade } from 'svelte/transition'

	let items = $state([
		{ id: 1, name: 'Item A' },
		{ id: 2, name: 'Item B' },
		{ id: 3, name: 'Item C' }
	])

	function shuffle() {
		items = items.sort(() => Math.random() - 0.5)
	}
</script>

<button onclick={shuffle}>Shuffle</button>

<ul>
	{#each items as item (item.id)}
		<li animate:flip={{ duration: 300 }} transition:fade>
			{item.name}
		</li>
	{/each}
</ul>

Sin la clave, la animación FLIP no funcionaría correctamente—Svelte no sabría qué elemento se movió a dónde.

Acceso Más Limpio a las Propiedades de los Elementos

El bloque #each de Svelte soporta completamente los patrones de desestructuración de JavaScript, lo que te permite extraer propiedades directamente en la declaración del bucle.

Desestructuración de Objetos

Problema: Acceder a propiedades con user.property dentro del bloque each puede resultar verboso y repetitivo, especialmente con muchas propiedades.

Solución: Usa la desestructuración de objetos en la declaración #each para acceder a las propiedades directamente y hacer tu marcado más limpio.

<script>
	let users = $state([
		{ id: 1, name: 'Alice Chen', email: 'alice@example.com', role: 'Admin' },
		{ id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'User' },
		{ id: 3, name: 'Carol Davis', email: 'carol@example.com', role: 'Moderator' }
	])
</script>

<!-- Without destructuring -->
{#each users as user (user.id)}
	<div class="user-card">
		<h3>{user.name}</h3>
		<p>{user.email}</p>
		<span class="role">{user.role}</span>
	</div>
{/each}

<!-- With destructuring -->
{#each users as { id, name, email, role } (id)}
	<div class="user-card">
		<h3>{name}</h3>
		<p>{email}</p>
		<span class="role">{role}</span>
	</div>
{/each}

Nota que al desestructurar, aún puedes referenciar las propiedades desestructuradas en la expresión de clave.

Desestructuración Anidada

Problema: Acceder a propiedades profundamente anidadas (como order.customer.address.city) dentro del bloque each puede saturar tu marcado y dificultar su lectura.

Solución: Usa la desestructuración anidada en la declaración #each para extraer valores anidados directamente.

<script>
	let orders = $state([
		{
			id: 'ORD-001',
			customer: { name: 'Alice', address: { city: 'Seattle', zip: '98101' } },
			total: 149.99
		},
		{
			id: 'ORD-002',
			customer: { name: 'Bob', address: { city: 'Portland', zip: '97201' } },
			total: 89.5
		}
	])
</script>

{#each orders as { id, customer: { name, address: { city } }, total } (id)}
	<div class="order-row">
		<span class="order-id">{id}</span>
		<span class="customer">{name}</span>
		<span class="city">{city}</span>
		<span class="total">${total.toFixed(2)}</span>
	</div>
{/each}

Desestructuración con Valores Predeterminados

Problema: Algunos elementos de tu array pueden tener propiedades faltantes u opcionales, lo que puede generar valores undefined en tu marcado.

Solución: Usa valores predeterminados en la desestructuración para proporcionar alternativas a las propiedades faltantes.

<script>
	let notifications = $state([
		{ id: 1, message: 'Welcome!', type: 'info' },
		{ id: 2, message: 'Error occurred' }, // type is missing
		{ id: 3, message: 'Success!', type: 'success' }
	])
</script>

{#each notifications as { id, message, type = 'default' } (id)}
	<div class="notification notification-{type}">
		{message}
	</div>
{/each}

Desestructuración con Índice

Problema: Quieres acceder tanto a las propiedades del elemento como al índice actual en el bucle, pero referenciar ambos puede ser verboso.

Solución: Desestructura tanto el elemento como el índice en la declaración #each para un acceso conciso.

{#each items as { id, name, value }, index (id)}
	<div class="item">
		<span class="position">#{index + 1}</span>
		<span class="name">{name}</span>
		<span class="value">{value}</span>
	</div>
{/each}

Bloques Else

Manejo de Listas Vacías

La cláusula {:else} se renderiza cuando la lista está vacía (o es null/undefined):

{#each expression as name}
	<!-- items -->
{:else}
	<!-- shown when list is empty -->
{/each}

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

	async function search() {
		hasSearched = true
		const response = await fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`)
		searchResults = await response.json()
	}
</script>

<form
	onsubmit={(e) => {
		e.preventDefault()
		search()
	}}
>
	<input bind:value={searchQuery} placeholder="Search..." />
	<button type="submit">Search</button>
</form>

{#each searchResults as result (result.id)}
	<div class="result-item">
		<h3>{result.title}</h3>
		<p>{result.description}</p>
	</div>
{:else}
	{#if hasSearched}
		<div class="no-results">
			<p>No results found for "{searchQuery}"</p>
			<p>Try different keywords or check your spelling.</p>
		</div>
	{:else}
		<div class="search-prompt">
			<p>Enter a search term to find results.</p>
		</div>
	{/if}
{/each}

Componentes de Estado Vacío

Problema: Quieres mostrar una interfaz de estado vacío amigable y reutilizable cuando una lista está vacía, en lugar de solo texto plano.

Solución: Usa el bloque {:else} para renderizar un componente de estado vacío personalizado cuando el array está vacío.

<script>
	import EmptyState from './EmptyState.svelte'

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

<div class="notifications-panel">
	<h2>Notifications</h2>

	{#each notifications as notification (notification.id)}
		<div class="notification notification-{notification.type}">
			<span class="icon">{notification.icon}</span>
			<p>{notification.message}</p>
			<time>{notification.timestamp}</time>
		</div>
	{:else}
		<EmptyState
			icon="🔔"
			title="No notifications"
			message="You're all caught up! Check back later for updates."
		/>
	{/each}
</div>

Iteración sobre Diferentes Estructuras de Datos

Maps

Problema: Quieres iterar sobre un Map de JavaScript y renderizar tanto la clave como el valor de cada entrada.

Solución: Usa desestructuración de arrays en el bloque #each para acceder tanto a la clave como al valor directamente.

<script>
	let userRoles = $state(
		new Map([
			['alice', 'Admin'],
			['bob', 'Editor'],
			['carol', 'Viewer']
		])
	)
</script>

<ul>
	{#each userRoles as [username, role] (username)}
		<li>
			<strong>{username}</strong>: {role}
		</li>
	{/each}
</ul>

Sets

Problema: Quieres renderizar una lista de etiquetas únicas de un Set y permitir que los usuarios las eliminen de forma interactiva.

Solución: Usa un bloque #each para iterar sobre el Set, y actualiza el Set de forma reactiva cuando se elimine una etiqueta.

<script>
	let tags = $state(new Set(['svelte', 'javascript', 'frontend', 'web']))

	function removeTag(tag) {
		tags.delete(tag)
		tags = new Set(tags) // Trigger reactivity
	}
</script>

<div class="tag-list">
	{#each tags as tag (tag)}
		<span class="tag">
			{tag}
			<button onclick={() => removeTag(tag)}>×</button>
		</span>
	{/each}
</div>

Entradas de Objetos

Problema: Quieres renderizar una tabla de pares clave-valor de un objeto, permitiendo editar cada valor, incluidos los booleanos.

Solución: Usa Object.entries() con un bloque #each para iterar sobre las propiedades del objeto, y renderiza los controles de entrada apropiados para cada tipo de valor.

<script>
	let config = $state({
		theme: 'dark',
		language: 'en',
		notifications: true,
		autoSave: false
	})
</script>

<table class="config-table">
	<thead>
		<tr>
			<th>Setting</th>
			<th>Value</th>
		</tr>
	</thead>
	<tbody>
		{#each Object.entries(config) as [key, value] (key)}
			<tr>
				<td>{key}</td>
				<td>
					{#if typeof value === 'boolean'}
						<input
							type="checkbox"
							checked={value}
							onchange={(e) => (config[key] = e.target.checked)}
						/>
					{:else}
						<input type="text" {value} oninput={(e) => (config[key] = e.target.value)} />
					{/if}
				</td>
			</tr>
		{/each}
	</tbody>
</table>

Funciones Generadoras

Problema: Quieres renderizar una lista de números generados por una función generadora, como la secuencia de Fibonacci, y mostrarlos en la interfaz.

Solución: Usa un generador para producir la secuencia, conviértela a un array e itera con un bloque #each.

<script>
	function* fibonacci(limit) {
		let a = 0,
			b = 1
		while (a <= limit) {
			yield a
			;[a, b] = [b, a + b]
		}
	}

	let maxValue = $state(100)
	let fibNumbers = $derived([...fibonacci(maxValue)])
</script>

<input type="range" bind:value={maxValue} min="10" max="1000" />
<p>Fibonacci numbers up to {maxValue}:</p>

<div class="number-grid">
	{#each fibNumbers as num, i (i)}
		<span class="fib-number">{num}</span>
	{/each}
</div>

Bloques Each Anidados

Las estructuras de datos complejas frecuentemente requieren iteraciones anidadas:

<script>
	let departments = $state([
		{
			name: 'Engineering',
			teams: [
				{ name: 'Frontend', members: ['Alice', 'Bob'] },
				{ name: 'Backend', members: ['Carol', 'Dave', 'Eve'] },
				{ name: 'DevOps', members: ['Frank'] }
			]
		},
		{
			name: 'Design',
			teams: [
				{ name: 'UI/UX', members: ['Grace', 'Henry'] },
				{ name: 'Brand', members: ['Ivy'] }
			]
		}
	])
</script>

<div class="org-chart">
	{#each departments as dept (dept.name)}
		<section class="department">
			<h2>{dept.name}</h2>

			{#each dept.teams as team (team.name)}
				<div class="team">
					<h3>{team.name}</h3>

					<ul class="members">
						{#each team.members as member (member)}
							<li>{member}</li>
						{/each}
					</ul>
				</div>
			{/each}
		</section>
	{/each}
</div>

Aplanamiento con Seguimiento de Índice

A veces necesitas mantener conciencia de múltiples niveles de anidamiento:

<script>
	let categories = $state([
		{
			name: 'Electronics',
			products: [
				{ id: 'e1', name: 'Laptop', price: 999 },
				{ id: 'e2', name: 'Phone', price: 699 }
			]
		},
		{
			name: 'Clothing',
			products: [
				{ id: 'c1', name: 'Jacket', price: 149 },
				{ id: 'c2', name: 'Shoes', price: 89 },
				{ id: 'c3', name: 'Hat', price: 29 }
			]
		}
	])
</script>

<table>
	<thead>
		<tr>
			<th>Category</th>
			<th>#</th>
			<th>Product</th>
			<th>Price</th>
		</tr>
	</thead>
	<tbody>
		{#each categories as category, categoryIndex (category.name)}
			{#each category.products as product, productIndex (product.id)}
				<tr>
					{#if productIndex === 0}
						<td rowspan={category.products.length} class="category-cell">
							{category.name}
						</td>
					{/if}
					<td>{productIndex + 1}</td>
					<td>{product.name}</td>
					<td>${product.price}</td>
				</tr>
			{/each}
		{/each}
	</tbody>
</table>

Reactividad y Bloques Each

Entender cómo #each interactúa con el sistema de reactividad de Svelte 5 es fundamental para construir aplicaciones de alto rendimiento.

Arrays Reactivos con `$state`

<script>
	let todos = $state([
		{ id: 1, text: 'Learn Svelte', done: false },
		{ id: 2, text: 'Build something', done: false }
	])

	let newTodoText = $state('')

	function addTodo() {
		if (!newTodoText.trim()) return

		todos.push({
			id: Date.now(),
			text: newTodoText,
			done: false
		})
		newTodoText = ''
	}

	function removeTodo(id) {
		const index = todos.findIndex((t) => t.id === id)
		if (index !== -1) {
			todos.splice(index, 1)
		}
	}

	function toggleTodo(id) {
		const todo = todos.find((t) => t.id === id)
		if (todo) {
			todo.done = !todo.done
		}
	}
</script>

<form
	onsubmit={(e) => {
		e.preventDefault()
		addTodo()
	}}
>
	<input bind:value={newTodoText} placeholder="New todo..." />
	<button type="submit">Add</button>
</form>

<ul>
	{#each todos as todo (todo.id)}
		<li class={{ done: todo.done }}>
			<input type="checkbox" checked={todo.done} onchange={() => toggleTodo(todo.id)} />
			<span>{todo.text}</span>
			<button onclick={() => removeTodo(todo.id)}>Delete</button>
		</li>
	{/each}
</ul>

<style>
	.done span {
		text-decoration: line-through;
		opacity: 0.6;
	}
</style>

En Svelte 5, las mutaciones de arrays como push, splice y las asignaciones de propiedades se rastrean automáticamente cuando el array se declara con $state.

Listas Derivadas con `$derived`

<script>
	let products = $state([
		{ id: 1, name: 'Laptop', price: 999, category: 'electronics', inStock: true },
		{ id: 2, name: 'Mouse', price: 29, category: 'electronics', inStock: true },
		{ id: 3, name: 'Notebook', price: 5, category: 'office', inStock: false },
		{ id: 4, name: 'Keyboard', price: 79, category: 'electronics', inStock: true },
		{ id: 5, name: 'Pen', price: 2, category: 'office', inStock: true }
	])

	let categoryFilter = $state('all')
	let showInStockOnly = $state(false)
	let sortBy = $state('name')
	let sortOrder = $state('asc')

	let filteredProducts = $derived.by(() => {
		let result = products

		// Filter by category
		if (categoryFilter !== 'all') {
			result = result.filter((p) => p.category === categoryFilter)
		}

		// Filter by stock
		if (showInStockOnly) {
			result = result.filter((p) => p.inStock)
		}

		// Sort
		result = [...result].sort((a, b) => {
			let aVal = a[sortBy]
			let bVal = b[sortBy]

			if (typeof aVal === 'string') {
				return sortOrder === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal)
			}
			return sortOrder === 'asc' ? aVal - bVal : bVal - aVal
		})

		return result
	})

	let categories = $derived([...new Set(products.map((p) => p.category))])
</script>

<div class="filters">
	<select bind:value={categoryFilter}>
		<option value="all">All Categories</option>
		{#each categories as category (category)}
			<option value={category}>{category}</option>
		{/each}
	</select>

	<label>
		<input type="checkbox" bind:checked={showInStockOnly} />
		In stock only
	</label>

	<select bind:value={sortBy}>
		<option value="name">Sort by Name</option>
		<option value="price">Sort by Price</option>
	</select>

	<button onclick={() => (sortOrder = sortOrder === 'asc' ? 'desc' : 'asc')}>
		{sortOrder === 'asc' ? '↑' : '↓'}
	</button>
</div>

<p>{filteredProducts.length} of {products.length} products</p>

<div class="product-grid">
	{#each filteredProducts as product (product.id)}
		<div class={['product-card', !product.inStock && 'out-of-stock']}>
			<h3>{product.name}</h3>
			<p class="price">${product.price}</p>
			<span class="category">{product.category}</span>
			{#if !product.inStock}
				<span class="badge">Out of Stock</span>
			{/if}
		</div>
	{:else}
		<p class="no-results">No products match your filters.</p>
	{/each}
</div>

Animaciones y Transiciones

El bloque #each se integra perfectamente con el sistema de animaciones de Svelte.

Transiciones de Entrada y Salida

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

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

	function addItem() {
		items.push({
			id: Date.now(),
			text: `Item ${items.length + 1}`
		})
	}

	function removeItem(id) {
		const index = items.findIndex((i) => i.id === id)
		if (index !== -1) items.splice(index, 1)
	}
</script>

<button onclick={addItem}>Add Item</button>

<ul>
	{#each items as item (item.id)}
		<li transition:slide={{ duration: 300 }}>
			<span>{item.text}</span>
			<button onclick={() => removeItem(item.id)}>Remove</button>
		</li>
	{/each}
</ul>

Animaciones FLIP para Reordenamiento

La directiva animate:flip crea animaciones suaves cuando los elementos de la lista cambian de posición:

<script>
	import { flip } from 'svelte/animate'
	import { quintOut } from 'svelte/easing'

	let items = $state([
		{ id: 1, name: 'Apple', votes: 0 },
		{ id: 2, name: 'Banana', votes: 0 },
		{ id: 3, name: 'Cherry', votes: 0 },
		{ id: 4, name: 'Date', votes: 0 }
	])

	// Sort by votes (highest first) whenever votes change
	let sortedItems = $derived([...items].sort((a, b) => b.votes - a.votes))

	function vote(id) {
		const item = items.find((i) => i.id === id)
		if (item) item.votes++
	}
</script>

<p>Click to vote! Items reorder by popularity.</p>

<ul class="voting-list">
	{#each sortedItems as item (item.id)}
		<li animate:flip={{ duration: 400, easing: quintOut }}>
			<button onclick={() => vote(item.id)}>
				<span class="name">{item.name}</span>
				<span class="votes">{item.votes} votes</span>
			</button>
		</li>
	{/each}
</ul>

<style>
	.voting-list {
		list-style: none;
		padding: 0;
	}

	.voting-list li {
		margin: 0.5rem 0;
	}

	.voting-list button {
		width: 100%;
		padding: 1rem;
		display: flex;
		justify-content: space-between;
		background: #f8fafc;
		border: 1px solid #e2e8f0;
		border-radius: 8px;
		cursor: pointer;
		transition: background 0.2s;
	}

	.voting-list button:hover {
		background: #e2e8f0;
	}
</style>

Combinación de Transiciones y Animaciones

<script>
	import { flip } from 'svelte/animate'
	import { fade, scale } from 'svelte/transition'

	let items = $state([
		{ id: 1, text: 'Item A' },
		{ id: 2, text: 'Item B' },
		{ id: 3, text: 'Item C' }
	])

	function shuffle() {
		items = items.sort(() => Math.random() - 0.5)
	}

	function addItem() {
		items.push({ id: Date.now(), text: `Item ${items.length + 1}` })
	}

	function removeItem(id) {
		const index = items.findIndex((i) => i.id === id)
		if (index !== -1) items.splice(index, 1)
	}
</script>

<div class="controls">
	<button onclick={addItem}>Add</button>
	<button onclick={shuffle}>Shuffle</button>
</div>

<ul>
	{#each items as item (item.id)}
		<li
			animate:flip={{ duration: 300 }}
			in:scale={{ duration: 200, start: 0.8 }}
			out:fade={{ duration: 150 }}
		>
			<span>{item.text}</span>
			<button onclick={() => removeItem(item.id)}>×</button>
		</li>
	{/each}
</ul>

Problemas Comunes y Soluciones

1: Elementos que no se Actualizan Correctamente

Problema: Modificas una propiedad de un elemento, pero la interfaz no se actualiza.

<script>
	// AVOID: This might not update correctly in older patterns
	let items = [{ id: 1, count: 0 }]

	function increment(id) {
		const item = items.find((i) => i.id === id)
		item.count++ // Direct mutation
	}
</script>

Solución: Usa $state para reactividad automática:

<script>
	// PREFERRED: With $state, mutations are tracked
	let items = $state([{ id: 1, count: 0 }])

	function increment(id) {
		const item = items.find((i) => i.id === id)
		if (item) item.count++
	}
</script>

2: Problemas con Claves en Objetos

Problema: Usar el objeto en sí mismo como clave provoca re-renders innecesarios.

<!-- AVOID: Using object - references change, causing all items to re-render -->
{#each items as item (item)}
	<Component data={item} />
{/each}

Solución: Usa un identificador único y estable:

<!-- PREFERRED: Stable key -->
{#each items as item (item.id)}
	<Component data={item} />
{/each}

3: Pérdida del Estado del Componente al Reordenar

Problema: El reordenamiento mediante arrastrar y soltar restablece el estado interno del componente.

Causa: Claves faltantes o incorrectas hacen que Svelte recree los componentes en lugar de moverlos.

Solución: Usa siempre claves únicas y estables con componentes hijos con estado:

<script>
	import EditableCard from './EditableCard.svelte'

	let cards = $state([
		{ id: 'card-1', title: 'First' },
		{ id: 'card-2', title: 'Second' },
		{ id: 'card-3', title: 'Third' }
	])
</script>

{#each cards as card (card.id)}
	<!-- EditableCard maintains its own editing state -->
	<!-- The key ensures it's preserved across reorders -->
	<EditableCard data={card} />
{/each}

4: Rendimiento con Listas Grandes

Problema: Renderizar miles de elementos provoca una interfaz lenta.

Solución 1: Desplazamiento virtual (renderizar solo los elementos visibles):

<script>
	let items = $state(
		Array.from({ length: 10000 }, (_, i) => ({
			id: i,
			text: `Item ${i + 1}`
		}))
	)

	let containerHeight = 400
	let itemHeight = 40
	let scrollTop = $state(0)

	let visibleItems = $derived.by(() => {
		const startIndex = Math.floor(scrollTop / itemHeight)
		const visibleCount = Math.ceil(containerHeight / itemHeight) + 1
		const endIndex = Math.min(startIndex + visibleCount, items.length)

		return items.slice(startIndex, endIndex).map((item, i) => ({
			...item,
			offset: (startIndex + i) * itemHeight
		}))
	})

	let totalHeight = $derived(items.length * itemHeight)
</script>

<div
	class="virtual-list"
	style="height: {containerHeight}px"
	onscroll={(e) => (scrollTop = e.target.scrollTop)}
>
	<div class="spacer" style="height: {totalHeight}px">
		{#each visibleItems as item (item.id)}
			<div class="item" style="position: absolute; top: {item.offset}px; height: {itemHeight}px">
				{item.text}
			</div>
		{/each}
	</div>
</div>

<style>
	.virtual-list {
		overflow-y: auto;
		position: relative;
	}
	.spacer {
		position: relative;
	}
	.item {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 1rem;
		box-sizing: border-box;
	}
</style>

Solución 2: Paginación:

<script>
	let allItems = $state([
		/* large array */
	])
	let page = $state(1)
	let pageSize = 20

	let paginatedItems = $derived(allItems.slice((page - 1) * pageSize, page * pageSize))

	let totalPages = $derived(Math.ceil(allItems.length / pageSize))
</script>

{#each paginatedItems as item (item.id)}
	<div>{item.name}</div>
{/each}

<div class="pagination">
	<button disabled={page === 1} onclick={() => page--}>Previous</button>
	<span>Page {page} of {totalPages}</span>
	<button disabled={page === totalPages} onclick={() => page++}>Next</button>
</div>

5: Advertencia de Claves Duplicadas

Problema: La consola muestra advertencias de "duplicate key".

Causa: Dos o más elementos tienen el mismo valor de clave.

Solución: Asegúrate de que las claves sean verdaderamente únicas, o crea claves compuestas:

<script>
	// If items from different sources might have same IDs:
	let itemsFromSourceA = $state([{ id: 1, name: 'A1' }])
	let itemsFromSourceB = $state([{ id: 1, name: 'B1' }]) // Same ID!

	let allItems = $derived([
		...itemsFromSourceA.map((i) => ({ ...i, source: 'A' })),
		...itemsFromSourceB.map((i) => ({ ...i, source: 'B' }))
	])
</script>

<!-- Use compound key -->
{#each allItems as item (`${item.source}-${item.id}`)}
	<div>{item.name}</div>
{/each}

6: Datos Asíncronos en Listas

Problema: Cada elemento necesita obtener datos adicionales.

Solución: Usa {#await} dentro de #each:

<script>
	let userIds = $state([1, 2, 3, 4, 5])

	async function fetchUser(id) {
		const response = await fetch(`/api/users/${id}`)
		return response.json()
	}
</script>

<ul>
	{#each userIds as userId (userId)}
		<li>
			{#await fetchUser(userId)}
				<span class="loading">Loading user {userId}...</span>
			{:then user}
				<span>{user.name} - {user.email}</span>
			{:catch error}
				<span class="error">Failed to load user {userId}</span>
			{/await}
		</li>
	{/each}
</ul>

Resumen de Buenas Prácticas

Usa siempre claves para listas con elementos con estado, reordenamiento o animaciones. La única excepción son las listas verdaderamente estáticas que nunca cambian.
Usa identificadores únicos y estables como claves: IDs de base de datos, UUIDs o slugs únicos. Evita usar índices de arreglo excepto para datos verdaderamente estáticos.
Aprovecha la desestructuración para hacer las plantillas más limpias y legibles. Extrae solo lo que necesitas.
Usa $derived para listas filtradas, ordenadas o transformadas. Mantén la lógica de transformación en la sección de script, no en la plantilla.
Combina con {:else} para manejar los estados vacíos de manera elegante. Nunca dejes que los usuarios vean una pantalla en blanco.
Usa {@const} dentro de los bloques each para valores calculados específicos de cada elemento.
Considera el rendimiento para listas grandes. Implementa desplazamiento virtual o paginación cuando trabajes con cientos o miles de elementos.
Prueba el comportamiento al reordenar cuando uses componentes hijos con estado. Asegúrate de que las claves estén configuradas correctamente.
Usa animaciones FLIP (animate:flip) para efectos de reordenamiento suaves.
Maneja los datos asíncronos de manera apropiada: ya sea obteniendo todos los datos antes de renderizar, o usando {#await} por elemento con los estados de carga correspondientes.

Referencia Rápida

<!-- Basic iteration -->
{#each items as item}
	<div>{item.name}</div>
{/each}

<!-- With index -->
{#each items as item, index}
	<div>{index + 1}. {item.name}</div>
{/each}

<!-- With key (recommended for dynamic lists) -->
{#each items as item (item.id)}
	<div>{item.name}</div>
{/each}

<!-- Key with index -->
{#each items as item, index (item.id)}
	<div>{index}: {item.name}</div>
{/each}

<!-- Object destructuring -->
{#each items as { id, name, value } (id)}
	<div>{name}: {value}</div>
{/each}

<!-- Array destructuring -->
{#each coordinates as [x, y] (x + '-' + y)}
	<div>({x}, {y})</div>
{/each}

<!-- Rest pattern -->
{#each items as { id, ...rest } (id)}
	<Component {...rest} />
{/each}

<!-- Without item (repeat N times) -->
{#each { length: 5 } as, i}
	<div>Item {i + 1}</div>
{/each}

<!-- With else block -->
{#each items as item (item.id)}
	<div>{item.name}</div>
{:else}
	<p>No items found.</p>
{/each}

<!-- With animations -->
{#each items as item (item.id)}
	<div animate:flip={{ duration: 300 }} transition:fade>
		{item.name}
	</div>
{/each}

<!-- Nested each blocks -->
{#each categories as category (category.id)}
	<section>
		<h2>{category.name}</h2>
		{#each category.items as item (item.id)}
			<div>{item.name}</div>
		{/each}
	</section>
{/each}

Conclusión

El bloque #each es engañosamente simple en su forma básica, pero dominar sus matices —claves, desestructuración, reactividad, animaciones— permite construir interfaces de usuario sofisticadas, eficientes y mantenibles. Comprender por qué importan las claves, cuándo usar el estado derivado y cómo manejar los casos extremos te será de gran utilidad a medida que construyas aplicaciones Svelte cada vez más complejas. Este bloque fundamental transforma arreglos de datos sin procesar en componentes de interfaz interactivos, animados y reactivos con una eficiencia notable.

El verdadero poder de #each emerge cuando se combina con el ecosistema de Svelte: $derived para transformaciones de listas, @const para cálculos por elemento, bind: para arreglos de formularios y animate: para reordenamiento fluido. Al entender el modelo de reactividad —que #each responde a la reasignación de arreglos, no a la mutación— e implementar estrategias de clave adecuadas, puedes construir interfaces de lista que sean tanto eficientes como mantenibles. Ya sea renderizando listas simples o jerarquías anidadas complejas, #each proporciona la base para interfaces orientadas a datos.

Puntos Clave

Los bloques #each iteran arreglos de forma reactiva, respondiendo tanto a mutaciones directas (como push, splice, asignaciones de propiedades) como a reasignaciones cuando se declaran con $state — la reactividad basada en proxies de Svelte 5 rastrea todos los cambios automáticamente
Las expresiones de clave son críticas para el rendimiento - usa identificadores únicos como (item.id) para habilitar la comparación eficiente del DOM y evitar mezclas de estado durante el reordenamiento
La desestructuración simplifica el acceso a los elementos con #each items as { id, name, price } extrayendo propiedades directamente, y as item, index proporcionando índices posicionales de base cero
Los bloques {:else} manejan arreglos vacíos de manera elegante, renderizando una interfaz alternativa cuando items.length === 0 sin lógica condicional adicional
El parámetro de índice es de base cero y reactivo - se actualiza automáticamente cuando se agregan o eliminan elementos, pero evita usarlo como clave para elementos que pueden reordenarse
@const con alcance de bloque permite cálculos por elemento como {@const total = price * quantity} sin contaminar el script del componente con lógica de presentación
Las animaciones requieren la directiva animate: con expresiones de clave - animate:flip reposiciona los elementos de manera fluida durante el reordenamiento, requiriendo claves únicas para rastrear el movimiento
Los bloques #each anidados soportan datos jerárquicos como árboles o listas agrupadas, con cada nivel manteniendo contextos de iteración independientes y espacios de claves propios

Ver También

Documentación Oficial de Svelte 5 - {#each}
Animaciones de Svelte - animate: - La animación flip para reordenamiento suave
$derived - Transformaciones reactivas de listas (filtrado, ordenamiento, mapeo)
Transiciones de Svelte - Animaciones de entrada/salida para elementos de lista
MDN - Métodos de Array - Técnicas de manipulación de arreglos en JavaScript