Managing Angular Application Lifecycle with Hooks

Learn how to effectively manage component lifecycles using Angular lifecycle hooks to optimize performance and resource management.

0 likes
50 views

Rule Content

{
  "title": "Managing Angular Application Lifecycle with Hooks",
  "description": "Learn how to effectively manage component lifecycles using Angular lifecycle hooks to optimize performance and resource management.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "pattern": "class\\s+\\w+\\s+implements\\s+.*?\\{",
      "message": "Ensure lifecycle hooks are implemented in the correct order: OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy.",
      "severity": "warning"
    },
    {
      "pattern": "ngOnInit\\(\\)\\s*:\\s*void\\s*\\{[^}]*\\}",
      "message": "Avoid placing heavy logic directly in ngOnInit; delegate to private methods to maintain readability and testability.",
      "severity": "warning"
    },
    {
      "pattern": "ngOnDestroy\\(\\)\\s*:\\s*void\\s*\\{[^}]*\\}",
      "message": "Ensure all subscriptions and resources are properly cleaned up in ngOnDestroy to prevent memory leaks.",
      "severity": "error"
    },
    {
      "pattern": "ngDoCheck\\(\\)\\s*:\\s*void\\s*\\{[^}]*\\}",
      "message": "Use ngDoCheck sparingly; excessive use can lead to performance issues due to frequent change detection cycles.",
      "severity": "warning"
    },
    {
      "pattern": "ngAfterViewInit\\(\\)\\s*:\\s*void\\s*\\{[^}]*\\}",
      "message": "Use ngAfterViewInit for DOM manipulations that require the view to be fully initialized.",
      "severity": "info"
    }
  ]
}