Skip to content

Commit

Permalink
[fix] Prevent needless prop updates causing rerenders
Browse files Browse the repository at this point in the history
Fixes #5247 by not adding unchanged layout or page props to the root props
  • Loading branch information
dummdidumm committed Jul 22, 2022
1 parent 3a0c210 commit 0dc0dd2
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/nasty-falcons-ring.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/kit': patch
---

Prevent needless prop updates causing rerenders
7 changes: 5 additions & 2 deletions packages/kit/src/runtime/client/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -424,8 +424,11 @@ export function create_client({ target, session, base, trailing_slash }) {
};

for (let i = 0; i < filtered.length; i += 1) {
const loaded = filtered[i].loaded;
result.props[`props_${i}`] = loaded ? await loaded.props : null;
// Only set props if the node actually updated. This prevents needless rerenders.
if (!current.branch.some((node) => node === filtered[i])) {
const loaded = filtered[i].loaded;
result.props[`props_${i}`] = loaded ? await loaded.props : null;
}
}

const page_changed =
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<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>
/** @type {any} */
export let obj;
let count = 0;
$: obj && count++;
</script>

<h1>{count}</h1>
<slot />
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<h2>On a</h2>
<a href="/load/layout-props/b">to b</a>
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<h2>On b</h2>
<a href="/load/layout-props/a">to a</a>
7 changes: 7 additions & 0 deletions packages/kit/test/apps/basics/test/client.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,13 @@ test.describe('Load', () => {
expect(await page.textContent('h1')).toBe("I didn't break!");
});

test("layout props don't cause rerender when unchanged", async ({ page, clicknav }) => {
await page.goto('/load/layout-props/a');
expect(await page.textContent('h1')).toBe('1');
await clicknav('[href="/load/layout-props/b"]');
expect(await page.textContent('h1')).toBe('1');
});

if (process.env.DEV) {
test('using window.fetch causes a warning', async ({ page }) => {
const port = 5173;
Expand Down

0 comments on commit 0dc0dd2

Please sign in to comment.