Async logic in the lit element lifecycle/shouldUpdate

[danielvanmil]

Hello,

Also related to #2151

For me it's not completely clear how to use the Lit element lifecycle in some use cases.

For example:

https://lit.dev/playground/#gist=4de71cf093a94f841b8aefa9db8c27c1

contains an example of a property "asyncPropB" that depends on some property "a":

• In here the value is calculated in the "willUpdate" lifecycle method as is advised.
• The render method is invoked twice then (which is not expensive, so this would not be a real problem)
• To avoid the multiple rendering we could add a "shouldUpdate" function as can be seen in the example, but when we do this (by uncommenting the commented line in the function) the "willUpdate" is not invoked anymore.

So my questions are:

• How should data that depends on some property and async logic be fetched/managed?
• When should "shouldUpdate" be used or avoided?
  • In comparison the same lifecycle method in React the doc (https://www.geeksforgeeks.org/reactjs-shouldcomponentupdate-method/) mentions: "The shouldComponentUpdate method is majorly used for optimizing the performance and to increase the responsiveness of the website but do not rely on it to prevent rendering as it may lead to bugs."
  • https://lit.dev/tutorials/reactivity/#4 DOES use the shouldUpdate to prevent rendering

Thanks.

[graynorton]

I tend not to use Lit's reactive lifecycle to manage async stuff. Not everything has to be a reactive property; I generally use them only for things that should directly trigger a re-render. In the case of your example, that would only be asyncPropB.

Here's a modification of your example where propA is not a Lit reactive property; it's just a public interface provided by a custom setter / getter pair and backed by a private field. In the setter, we conditionally trigger an async function that sets asyncPropB. You'll see that the component only renders when asyncPropB is actually set: https://lit.dev/playground/#gist=7aa2d1884e1cd067f371addafe3bf5ae

More generally, there are lots of reasonable patterns for triggering an async update based on interaction with a component and then updating the component when the async work is done; Lit tends not to be overly prescriptive about things like this. Reactive controllers in general, and the Task controller in Lit Labs specifically, are likely to be useful in more complicated cases.

BTW, although I wouldn't suggest using the Lit reactive lifecycle for your use case, the shouldUpdate() method is specifically intended to provide you a spot to prevent rendering when it's unnecessary, generally for performance optimization. It comes before willUpdate() in the lifecycle, though, which is why your original example didn't work when you tried short-circuiting the process.