Pure and Impure Pipes in Angular

Introduction

During the creation of custom pipes in Angular, we can define the type of pipes as pure or impure pipes. By default, every custom pipe is a pure pipe. A pure pipe uses a pure function. 
A pure function is a function that produces the same output on giving the same inputs. It doesn't have any internal state that will affect the output. All the operations carried out by a pure function are independent of any state. In pure function, the input value can determine the output value change. Only one instance can be used across many usages of the pure function. 

An impure function has an internal state that affects the output change. It can produce different output results on giving the same input value as well. We can't share this function as it depends on internal state which can be changed.

Pure pipes

A pure pipe uses a pure function. It is only called when Angular detects a change in the value or the parameters passed as an input to a pipe. A pure pipe has many advantages over impure pipe:
  • A pure pipe will revaluate only when there is a change in the value or parameter passed. 
  • A pure pipe will cache the results of the previous value or inputs. So a pure pipe can bind the output from a cache without revaluating if the input doesn't change.
  • A single instance of the pure pipe is used all over the components.
  • We just have to test it against known inputs and outputs. 
  • Pure pipes evaluate to pure change in either the input value(String, number, boolean) or in the object reference(Date, Array, Object).
  • Inputs should not be mutable in case of pure pipes. 

Impure Pipes

An impure pipe is called on every change detection cycle in Angular. It is called on every digest cycle irrespective of the change in the input or value. If we need some pipe to be called on every change detection, mark the pipe as impure. In the case of impure pipes, Angular will call the transform() method on every change cycle. 
  • Multiple instances are created for impure pipes.
  • Impure pipes are not re-used.
  • We can't use cache in case of impure pipes.
  • Depends on some internal state.
  • Called at every change detection cycle.
  • Inputs passed to this pipe can be mutable.
During the creation of a custom pipe, we can mark the pipe as pure or impure as shown below:
@Pipe({
  name: 'myPipe', 
  pure: true/false -------> Define true if pure pipe else false.     
})
export class MyPipe {}

Examples of Impure Pipes

Async Pipe - This is an impure pipe. As async pipe deals with observables, it is marked as impure. This pipe has its own internal state which deals with the subscription of the observables under the hood. Angular has to create the instance of this pipe every single time as it is used with different observables. We can't use the same instance of this pipe as this will interfere observables with each other. This pipe is called on every change detection cycle as observable can produce new value at any point in time. So we need to process the value at every digest cycle.

JsonPipe and SlicePipe - These both pipes are considered impure as the inputs passed to both are mutable. If the input is of type mutable, we need to call the pipe at every change detection cycle. An input object can be changed without changing the object reference. These both pipes doesn't have any internal state. But still considered as impure.

Comments