Introduction

Reactive properties and the reactive update cycle are an important part of the Lit library. Updating a reactive property can trigger a reactive update cycle, which in turn produces side effects—like re-rendering the element and updating its attributes.

If you did the Intro to Lit tutorial, you've already used some reactive properties. This tutorial digs a little deeper into reactive properties and the reactive update cycle:

• How reactive properties trigger an update (and how to trigger an update manually).
• Customizing when the component updates.
• Computing values during the update.
• Running code after the update completes.

The preview shows how an event can set a reactive property to trigger the element to render. You'll see how to implement this in the first step of the tutorial.