What React Muscle Memory Gets Wrong in Angular

React developers moving to Angular often spend their first month fighting ghost bugs caused by muscle memory. The mental reflexes that keep React code clean can cause subtle performance bottlenecks in Angular if applied blindly.

Trap #1: Over-Using Pipe Computations in Templates

In React, calling a helper function inside JSX is standard:

tsx

// React: Called on every re-render, fine for small calculations
return <div>{formatCurrency(item.price)}</div>;

In traditional Angular templates, putting a component method call directly in interpolation {{ formatCurrency(item.price) }} causes Angular's change detection to re-execute that function on EVERY single mouse movement or timer tick if Zone.js is active!

typescript

// Angular Solution: Use Pure Pipes or Computed Signals
@Pipe({ name: 'formatCurrency', standalone: true, pure: true })
export class FormatCurrencyPipe implements PipeTransform {
  transform(value: number): string {
    return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(value);
  }
}

Trap #2: Thinking Subscriptions Clean Up Automatically

In React's useEffect, you return a cleanup function. In Angular, subscribing to an RxJS Observable inside a component without takeUntilDestroyed() or the async pipe will leak memory indefinitely after the DOM element is destroyed.

typescript

// Angular Modern Idiomatic Subscriptions
@Component({ ... })
export class AnalyticsWidget {
  private destroyRef = inject(DestroyRef);
  private analytics = inject(AnalyticsService);
  ngOnInit() {
    this.analytics.eventStream$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(event => this.track(event));
  }
}

Summary

Respect the architectural differences. Angular provides guardrails like Pure Pipes, Dependency Injection, and Signals specifically to make enterprise application maintenance scalable.