Lit Elementでattributeが変更されたら関数を実行したい

はじめに

Lit Elementでattributeで渡されているプロパティの変更を検知するのに迷ったところがあったのでまとめます

やりたいこと

Web Componentsに渡しているAttributeであるeventIdが変更されたら、画面に表示されているメンバーリストを取得するfetchMemberByIdを再度実行して画面を再レンダリングしたいです

解決方法

ライフサイクルのupdateを利用することでうまくできました

sample.ts

@customElement('my-element')
export class MyElement extends LitElement {
  @property() eventId = '';

  updated(changedProperties) {
    changedProperties.forEach((oldValue, propName) => {
      if (propName === 'eventId') {
        this.fetchMemberById(this.eventId);
      }
    });
  }

変更はPropertyに設定したものが変わった瞬間にupdateでchangePropertiesに変更されたプロパティの名前が取れるのでそこでfetchを行うようにしています

カイゼンする

updateを利用する場合、eventId以外のプロパティがあった場合にそれが変わった際に、再レンダリングされてしまいます

そこでライフサイクルをみてみます

この図からshouldUpdateを利用することで、eventIdが変更されたときのみ再レンダリングをするという最適化が可能になります

おわりに

Litで調べていたところドキュメントからよくわからずまとめてみました
よくやる操作かなと思ったので参考になると嬉しいです

参考