PureパイプとImpureパイプ

デフォルトでは Pure パイプ

Pure パイプが高速な理由

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changes

参照の変更と値の変更

// this will NOT re-run a pure pipe:
this.items.push("new");

// this WILL, new reference:
this.items = [...this.items, "new"];

Impure パイプの宣言

@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
  transform(items: string[], term: string) {
    return items.filter(i => i.includes(term));
  }
}

Impure パイプを使う場面

Impure パイプのコスト

async パイプは Impure

<p>{{ data$ | async }}</p>

// component
data$ = this.http.get("/api/data");

async パイプによる自動購読解除

@Component({
  template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
  count$ = interval(1000);
}

Pure パイプでのミューテーション回避

// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };

Pure と Impure の選択

Impure パイプのベストプラクティス

@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
  private last = "";
  private cache: string[] = [];
  transform(items: string[], term: string) {
    if (term === this.last) return this.cache;
    this.last = term;
    this.cache = items.filter(i => i.includes(term));
    return this.cache;
  }
}

理解度チェック

まとめ