Why is slice an impure pipe?

user_1879175 0
Viewed 1204

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.

angular-pipe angular javascript
2 Answers

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.

user_37381710

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);
    }
}
user_48587770
Related