matschik
refactor(lit): update lit examples with current patterns
Goals/Scope
I was using ComponentParty to help learn lit a couple months back and found it super helpful to compare the lifecycle methods of React vs Lit. Now with some more experiance I've notced that the lit examples are a little out of date with the current state of Lit/Lab.
In this PR i want to double check all the examples and add more modern patterns if possible, the current obvious one is the use .map() instead of the repeat directive.
Description
I noticed two patterns that I was able to upgrade:
repeat
While mapping over the array does work to render multiple items, lit provides the repeat directive which allows a key function to be passed helping make rerenders more performant.
Since React and other frameworks do this with the key prop directly in the returnd tag, I think its best to use the same permormance patterns.
task
Lit also provides a better way to manage async tasks with the task package. Defining a task can be return all the pattern matching on state without having to track it in the component. Makes for a much cleaner implementation.
Comments
Let me know if you want anything changed or updated 👍
👋 @matschik
Just want to poke and see if there is anything you're missing from my side for this 😄
task is very interesting !
About repeat suggestion, from Lit documentation (https://lit.dev/docs/templates/directives/#repeat):
If you're not using a key function, you should consider using map().
As you said, since we are using key in iteration on other examples, let's do it !
Ok good for me ! Thank you very much for your contribution and patience 🙏
