Setting a reactive property or calling requestUpdate() triggers a reactive update cycle. At the beginning of an update cycle, Lit calls the shouldUpdate() method, passing in a map of changed properties.

By default, shouldUpdate() always returns true. You can override shouldUpdate() to determine whether the component needs to update itself.

For example, take the component on the right. The component is supposed to update whenever you press the Animate button. But as you can see from the render counter, it also updates when you change the animation speed from Fast to Slow ... Even though there's no visual change.

To fix this, add the following method to the component class:

  shouldUpdate(changedProperties: PropertyValues<this>): boolean {
    return !(changedProperties.size === 1 && changedProperties.has('duration'));
  }

  shouldUpdate(changedProperties) {
    return !(changedProperties.size === 1 && changedProperties.has('duration'));
  }

Try changing the animation speed and watch the render count.