[fix] Prevent rerender when route state did not change (#5654)

* [fix] Prevent rerender when route state did not change

Fixes #3732

* adjust code to fix only session case, tests

* format

* fix test expectation

Co-authored-by: Simon Holthausen <[email protected]>

.changeset/red-rivers-approve.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Prevent rerender when route state did not change

packages/kit/src/runtime/client/client.js

@@ -117,6 +117,9 @@ export function create_client({ target, session, base, trailing_slash }) {
 		if (!ready) return;
 		session_id += 1;
 
+		const current_load_uses_session = current.branch.some((node) => node?.uses.session);
+		if (!current_load_uses_session) return;
+
 		update(new URL(location.href), [], true);
 	});
 	ready = true;

packages/kit/test/apps/basics/src/routes/load/change-detection/session/unused.svelte

@@ -0,0 +1,23 @@
+<script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
+	export async function load() {
+		return {
+			props: {
+				// Needs to be an object, else Svelte will do by-value-comparison and skip rerender
+				obj: {}
+			}
+		};
+	}
+</script>
+
+<script>
+	import { session } from '$app/stores';
+	/** @type {any} */
+	export let obj;
+
+	let count = 0;
+	$: obj && count++;
+</script>
+
+<h2>{count}</h2>
+<button on:click={() => ($session.calls = 123)}>Update $session</button>

packages/kit/test/apps/basics/src/routes/load/change-detection/session/used.svelte

@@ -0,0 +1,24 @@
+<script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
+	export async function load({ session }) {
+		session;
+		return {
+			props: {
+				// Needs to be an object, else Svelte will do by-value-comparison and skip rerender
+				obj: {}
+			}
+		};
+	}
+</script>
+
+<script>
+	import { session } from '$app/stores';
+	/** @type {any} */
+	export let obj;
+
+	let count = 0;
+	$: obj && count++;
+</script>
+
+<h2>{count}</h2>
+<button on:click={() => ($session.calls = 123)}>Update $session</button>

packages/kit/test/apps/basics/test/client.test.js

@@ -358,6 +358,18 @@ test.describe('Load', () => {
 		expect(await page.textContent('h2')).toBe('x: b: 2');
 	});
 
+	test('load function is only called on session change when used in load', async ({ page }) => {
+		await page.goto('/load/change-detection/session/used');
+		expect(await page.textContent('h2')).toBe('1');
+		await page.click('button');
+		expect(await page.textContent('h2')).toBe('2');
+
+		await page.goto('/load/change-detection/session/unused');
+		expect(await page.textContent('h2')).toBe('1');
+		await page.click('button');
+		expect(await page.textContent('h2')).toBe('1');
+	});
+
 	test('accessing url.hash from load errors and suggests using page store', async ({ page }) => {
 		await page.goto('/load/url-hash#please-dont-send-me-to-load');
 		expect(await page.textContent('#message')).toBe(

packages/kit/test/apps/basics/test/test.js

@@ -1079,11 +1079,11 @@ test.describe('$app/stores', () => {
 		await page.goto('/store');
 
 		expect(await page.textContent('h1')).toBe('Test');
-		expect(await page.textContent('h2')).toBe(javaScriptEnabled ? 'Calls: 2' : 'Calls: 1');
+		expect(await page.textContent('h2')).toBe('Calls: 1');
 
 		await clicknav('a[href="/store/result"]');
 		expect(await page.textContent('h1')).toBe('Result');
-		expect(await page.textContent('h2')).toBe(javaScriptEnabled ? 'Calls: 2' : 'Calls: 0');
+		expect(await page.textContent('h2')).toBe(javaScriptEnabled ? 'Calls: 1' : 'Calls: 0');
 
 		const oops = await page.evaluate(() => window.oops);
 		expect(oops).toBeUndefined();