{#key path} in layout

[josh-collinsworth]

{#key path} in layout

[josh-collinsworth]

@vhscom Can you please elaborate on what you mean by "layout thrashing" and why it's an issue?

[josh-collinsworth]

I wasn't familiar with the term, but after searching a bit, I assume it's a reference to this.

If so, I'm not sure whether that applies here or not (or to what extent, if so), given that the "thrashing" would only happen on subsequent navigation, after the initial page load. The first load will be from static HTML that is then hydrated.

I'm sure there's still a performance cost, but I wouldn't think it would be a significant one in most cases (particularly since SvelteKit is already injecting routing by default).

But if there's something I'm missing on that front, I'm definitely keen to hear it.

[vhscom]

Yep, that's the concept of layout thrashing. You got it. I'm guessing {#key foo} was added because something wasn't getting updated between page loads? If that's right, you should be able to avoid it by ensuring the props passed into components are triggering the component to update when it should. Is it the worst thing in the world. No, probably not. But it's a pattern we should try and keep out of starters where possible as it'll become a crutch to devs who see it and don't tackle the root cause problem.

Here's an example where I had to use {#key foo} to destroy a component and I'm still not particularly happy with it. But it's limited to a smaller portion of the page and not the whole page: https://svelte.dev/repl/f9d3e46908904e6ea835a7f1b1e23bbf?version=3.46.4. I think it has something to do with using string and not a unique object such as a Symbol() as pointed out in the Svelte docs here where they talk about context keys.

Anyway, I just wanted to bring it to your attention as it will hurt the UI and could potentially lead to memory leaks or users losing cursor focus or form data when navigating back and forth between pages. Regardless, nothing is perfect it was just some code smell that jumped out at me as I was looking at starters and thought I'd point it out. 😊

EDIT: To your point about the app being static. Yeah, that probably makes this a non issue unless someone tries to switch adapters. But I haven't looked into it very deeply as I'm just scanning starters right now looking at the great stuff people have made.

[josh-collinsworth]

I'm guessing {#key foo} was added because something wasn't getting updated between page loads?

Anyway, I just wanted to bring it to your attention as it will hurt the UI and could potentially lead to memory leaks or users losing cursor focus or form data when navigating back and forth between pages. Regardless, nothing is perfect it was just some code smell that jumped out at me as I was looking at starters and thought I'd point it out. 😊

I appreciate the feedback. The reason is actually just to create a nice transition effect between pages when navigating. I figured it would be simple enough for users to either customize or remove the transition as desired.

I'm going to close this issue for the time being, but I'll keep an eye out for problems that may arise. Please feel free to ping me again if you discover more.