One way your component can react to property changes is to compute values based on the new and existing property values.

The willUpdate() callback is the ideal place to do these calculations in Lit. It's called near the beginning up the update cycle, before the component renders, so any properties you calculate during willUpdate() are available in your render() method.

The willUpdate() callback receives a map of changed properties as an argument, where the keys are property names and the values are the old values for each changed property.

If your computed value is only used for rendering and is cheap to compute, you can do the computation in the render() method itself. However, if the property is expensive to compute, it's best to compute in willUpdate() and do so only when the inputs to the computation change. When computing a value in willUpdate(), it should be stored as a property on the element. This way the value can be used in render(), in an event listener, or it could be part of the element's public API.

In this example, the component has two string properties, forward and backward. The user can update either one, and the component needs to determine which property the user updated, and update the other property.

Add the willUpdate() callback:

  willUpdate(changedProperties: PropertyValues<this>) {
    if (changedProperties.has('forward')) {
      this.backward = this.forward.split('').reverse().join('');
    }

    if (changedProperties.has('backward')) {
      this.forward = this.backward.split('').reverse().join('');
    }
  }

  willUpdate(changedProperties) {
    if (changedProperties.has('forward')) {
      this.backward = this.forward.split('').reverse().join('');
    }

    if (changedProperties.has('backward')) {
      this.forward = this.backward.split('').reverse().join('');
    }
  }

Updating a reactive property during an update cycle callback like willUpdate() or render() does not trigger a new update cycle. Setting backward or forward in willUpdate() makes the new value available to render(), but doesn't trigger another update!