6 ms·

Seems like svelte is superior for not needing a key.

cphoover 5y ago
fair criticism I wonder how svelte optimizes for rerendering of long component lists. React uses keys to avoid rerendering the entire list.
- Mavvie 5y ago
  I believe you can specify a key in Svelte as well, but perhaps it's used slightly differently than react.
  - bdougherty 5y ago
    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.
- wruza 5y ago
  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.
winphone1974 5y ago
The key is used by the shadow Dom for update performance; the is no shadow Dom in svelte
- afavour 5y ago
  And yet Svelte is faster than React in pretty much every benchmark I’ve seen.
  - patrickthebold 5y ago
    That makes sense though right? One would assume that shadow dom and dom would be slower than direct dom manipulation.
    - thinkloop 5y ago
      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.
      - ttfkam 5y ago
        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 https://youtu.be/AdNJ3fydeao?t=247
- alserio 5y ago
  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.
s-lambert 5y ago
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 https://svelte.dev/tutorial/keyed-each-blocks [1] https://reactjs.org/docs/lists-and-keys.html https://reactjs.org/docs/lists-and-keys.html

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

Mavvie 5y ago
I believe you can specify a key in Svelte as well, but perhaps it's used slightly differently than react.
- bdougherty 5y ago
  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.
wruza 5y ago
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.

winphone1974 5y ago

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

afavour 5y ago
And yet Svelte is faster than React in pretty much every benchmark I’ve seen.
- patrickthebold 5y ago
  That makes sense though right? One would assume that shadow dom and dom would be slower than direct dom manipulation.
  - thinkloop 5y ago
    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.
    - ttfkam 5y ago
      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 https://youtu.be/AdNJ3fydeao?t=247
alserio 5y ago
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.

s-lambert 5y ago

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 https://svelte.dev/tutorial/keyed-each-blocks [1] https://reactjs.org/docs/lists-and-keys.html https://reactjs.org/docs/lists-and-keys.html