How to Improve Performance in Angular with Memoize Pipe

Angular — is a powerful tool for creating complex web applications. But, as in any other framework, there are some difficulties. One of these problems is frequent restarts of heavy functions in templates, which greatly affects performance. If the application starts to slow down, then it’s time to think about optimization. And here comes to the rescue Memoize Pipewhich can save your interface from unnecessary calculations.

Problem: Repeated function calls

Every time Angular checks for changes, it re-calls the functions in the template, ignoring the previous result. This can be a problem when it comes to complex calculations or API calls.

@Component({
  ...
  template: `
    {{ heavyComputation(person, index) }}
  `,
})
export class AppComponent {
  heavyComputation(name: string, index: number) {
    // Очень тяжелые вычисления
  }
}

Solution: Memoize Pipe for Better Performance

Creating a separate pipe for each function is not always convenient, especially if the function is not used anywhere else. You want a universal and flexible solution, and this is exactly what Memoize Pipe. It allows you to remember the results of functions, avoiding their re-call if the input data remains unchanged. This reduces the load on the application and improves performance.

Example of use:

Initially you have a template with a function call:

@Component({
  ...
  template: `
    {{ heavyComputation(person, index) }}
  `,
})
export class AppComponent {
  heavyComputation(name: string, index: number) {
    // Очень тяжелые вычисления
  }
}

Now let's add memoization:

Let's install the library:

npm i @ngx-rock/memoize-pipe

Then we import FnPipe and use it in the template:

@Component({
  ...
  template: `
    {{ heavyComputation | fn : person : index }}
  `,
})
export class AppComponent {
  heavyComputation(name: string, index: number) {
    // Очень тяжелые вычисления
  }
}

Now Angular will not recalculate the function every time if the values ​​of its arguments have not changed (primitives and references for arrays and objects).

Preserving this context

If your function depends on the component variables, you need to save the context. This can be done using an arrow function:

@Component(...)
export class AppComponent {     
  heavyComputation = (name: string, index: number) => {
    // Очень тяжелые вычисления
  }
}

Support for standalone modules

Latest versions Memoize Pipe implemented as standalone modules.

import { FnPipe } from "@ngx-rock/memoize-pipe";

@Component({
  ...
  standalone: true,
  imports: [ FnPipe, ... ]
  ...
})
export class AppComponent { ... }

Conclusion: Simple optimization – tangible results

When it comes to performance, sometimes the simplest solutions are the most effective. Memoize Pipe is just such a solution: it helps reduce the number of function calls, speeding up the application. In addition, it simplifies the process of writing code.

@ngx-rock/memoize-pipe