Why is slice an impure pipe?

Question

I've always believed that slice is pure and it's sole advantage over calling slice method on string or array is caching mechanism of pure pipes in Angular.

Turns out it isn't the case and slice is impure. Moreover implementation is very basic: it guards against nulls and delegates to slice method. No internal comparison of last transformed input.

I suspect it is designed to align with behavior of ngFor, but is it a viable reason? Newcomers would complain that Angular is broken otherwise I suppose, but then again why should I use this pipe?

Am I correct that it creates new arrays in every change detection run, which leads to triggering even OnPush change detection down the three and nullifying performance optimizations?

Edit: This question is based on assumption that one should use immutable data.

Never had to use it, im slicing arrays on component backend . — Antoniossss, Sep 11 '18 at 10:28

Guerric P · Accepted Answer · 2018-09-12T08:31:43.767

6

This pipe is impure because it would otherwise return the same result until the array reference changes, so it wouldn't work when the array items change.

I personally think it is bad design to use such pipes. They removed the FilterPipe because of performance issues. Indeed, a pipe is triggered on every change detection, and there are many! I think the slice pipe should be removed as well. For me it's a quick and dirty solution, that brings more problems than it solves.

I suggest you slice your arrays yourself when needed.

edited Sep 12 '18 at 08:31

answered Sep 11 '18 at 10:39

Guerric P

30,447
6
48
86

I think it there should be injection token that conditionally configures pure variant of pipes like `slice` & newest `keyvalue` for advanced users. – Tomasz Błachut Sep 11 '18 at 10:47
@TomaszBłachut yes that could be good, then we could push changes by reassigning an array, like the `OnPush` change detection behavior for components – Guerric P Sep 11 '18 at 10:58
You can do it by yourself while it's not built-in! – Guerric P Sep 11 '18 at 11:03

score 2 · Answer 2 · answered May 22 '20 at 14:48

In addition to Guerric P answer, sometimes it might be convenient to have a pure slice pipe. Fortunately it's easy to create one:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'pureSlice'
})
export class PureSlicePipe implements PipeTransform {
    transform(str: string, start?: number, end?: number): string;
    transform<T>(arr: readonly T[], start?: number, end?: number): T[];
    transform(obj: string | readonly unknown[], start?: number, end?: number): string | unknown[] {
        return obj.slice(start, end);
    }
}

Why is slice an impure pipe?

2 Answers2