key() — svelte Function Reference

Architecture documentation for the key() function in key.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 4

Entity Profile

ClientRuntime→ Hydration→ key() — svelte Function Reference

Dependency Diagram

graph TD
  821ef2fc_9e43_0097_23f6_64596cef64f8["key()"]
  bd26e691_6923_66a9_e681_a0f9ca8ce88b["key.js"]
  821ef2fc_9e43_0097_23f6_64596cef64f8 -->|defined in| bd26e691_6923_66a9_e681_a0f9ca8ce88b
  b31601aa_35ce_7827_5394_99fb97fa27d2["hydrate_next()"]
  821ef2fc_9e43_0097_23f6_64596cef64f8 -->|calls| b31601aa_35ce_7827_5394_99fb97fa27d2
  ad360ec3_c98b_ac47_212b_923d0363a0ce["is_runes()"]
  821ef2fc_9e43_0097_23f6_64596cef64f8 -->|calls| ad360ec3_c98b_ac47_212b_923d0363a0ce
  1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b["block()"]
  821ef2fc_9e43_0097_23f6_64596cef64f8 -->|calls| 1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b
  8783b6d3_ff2d_7032_cf54_f6a71da85e37["ensure()"]
  821ef2fc_9e43_0097_23f6_64596cef64f8 -->|calls| 8783b6d3_ff2d_7032_cf54_f6a71da85e37
  style 821ef2fc_9e43_0097_23f6_64596cef64f8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/blocks/key.js lines 16–40

export function key(node, get_key, render_fn) {
	if (hydrating) {
		hydrate_next();
	}

	var branches = new BranchManager(node);

	var legacy = !is_runes();

	block(() => {
		var key = get_key();

		// NaN !== NaN, hence we do this workaround to not trigger remounts unnecessarily
		if (key !== key) {
			key = /** @type {any} */ (NAN);
		}

		// key blocks in Svelte <5 had stupid semantics
		if (legacy && key !== null && typeof key === 'object') {
			key = /** @type {V} */ ({});
		}

		branches.ensure(key, render_fn);
	});
}