Hacker News Reader

Comment by ksdnjweusdnkl21 | Hacker News Reader

Seems like svelte is superior for not needing a key.

Both Svelte[0] and React[1] are the same in this regard, the key is there as an optimization and isn't required in either framework. The only difference is that React's key is on the element whereas Svelte is as part of the each expression.

[0] https://svelte.dev/tutorial/keyed-each-blocks

[1] https://reactjs.org/docs/lists-and-keys.html

The key is used by the shadow Dom for update performance; the is no shadow Dom in svelte

And yet Svelte is faster than React in pretty much every benchmark I’ve seen.

That makes sense though right? One would assume that shadow dom and dom would be slower than direct dom manipulation.

I'm not sure that's a fair assumption, one of the original sells of a shadow dom was that manipulting the dom directly is extremely slow, so doing as much work away from it is faster.

Because React's model requires tracking the entire DOM tree for changes and rewriting whole branches where a change is detected.

Svelte bypasses the whole problem for the most part. https://youtu.be/AdNJ3fydeao?t=247

List diffing is done even in svelte at runtime. Keys are used the same way as any other frameworks or frontend libraries, virtual DOM or reactive.

fair criticism I wonder how svelte optimizes for rerendering of long component lists. React uses keys to avoid rerendering the entire list.

I believe you can specify a key in Svelte as well, but perhaps it's used slightly differently than react.

Yeah it's not strictly necessary, but if you are updating the list (adding/removing especially), Svelte can know how to reuse elements properly if they are keyed. You also need keys for animations to work properly.

Keys are also essential to retaining an element identity, which is structurally more important than performance, because 1) code may have a reference to an element and think that it relates to some data, 2) an element may have an explicit state (like focused, animating, etc).

Keys are a hugely leaking abstraction, but are inevitable when you bridge a declarative immediate mode rendering into a stateful one.

Reply on news.ycombinator.com