1

Per the LWC docs we have the following:

When a list changes, the framework uses the key to rerender only the item that changed. The key in the template is used for performance optimization and isn’t reflected in the DOM at run time.

Questions related to the above:

  1. Is there any sort of documentation / whitepaper on the LWC implementation of Virtual DOM? That description of key and performance optimization is vague and I feel like there's a lot to unpack under the hood. I figure understanding LWC Virtual DOM could be the right place to start.

  2. If the key is not reflected in the DOM at run time, is they value of the key still being "downloaded" (for back of a letter word) by the client? It sounds like it's being used client-side for performance optimization, but if it's not available in the DOM at all I'm having a hard time envisioning how that works.

I recognize that I don't have to understand everything under the hood to use LWC, but I think that understanding at least some framework details can help drive better implementations in the long haul.

Thanks!

1

There's a library used called Snabbdom for the VDOM. It's short, elegant, and will probably give you most of what you need to know.

At a high level, there are VNode elements that are placed in a VDOM (Virtual DOM). Changes to a @tracked member will set a dirty flag, which in turn will update the VDOM, which in turn updates the DOM. The key itself is stored in the VNode, which is why it does not appear in the DOM.

The VNode also has a link to the DOM element, thus allowing the relationship between the two to be maintained. From what I can tell, the framework only updates the VDOM, which itself is then responsible for updating the DOM. This should mostly make sense if you check the documentation for Snabbdom.

The components themselves are compiled into an AST (Abstract Syntax Tree), which is demonstrated in the lwc open source library. This is very sparsely documented/commented, however, so it may take a while to process how it all starts. Starting with the VDOM library first should help put everything into perspective.

As a side node, most (all?) of the LWC framework (aside from unit testing) is in TypeScript, so if you're not familiar with it, you'll need to do some more reading.

|improve this answer|||||
  • Thanks @sfdxfox, accepting this answer – Joe Flowers Nov 24 '19 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.