Angular में घटक जीवनचक्र हुक्स क्या हैं?

Question

Accepted Answer

**Lifecycle hooks** एंगुलर द्वारा कॉल किए गए तरीके हैं जो एक घटक के जीवन में विशिष्ट क्षणों पर — निर्माण, इनपुट परिवर्तन, रेंडरिंग और विनाश। आप उन्हें अपनी घटक कक्षा में इंटरफ़ेस विधियों को जोड़कर लागू करते हैं।

## The main hooks in order

```ts
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from "@angular/core";

@Component({ ... })
export class MyComponent implements OnInit, OnDestroy, OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    // called when an @Input value changes (before ngOnInit the first time)
  }
  ngOnInit() {
    // called ONCE after the first ngOnChanges — do initialization, fetch data
  }
  ngOnDestroy() {
    // called just before the component is removed — CLEAN UP here
  }
}
```

## The full sequence

```text
constructor          → DI happens; inputs NOT yet available
ngOnChanges          → when @Input values are set/changed
ngOnInit             → once, after first ngOnChanges ★ (init, fetch data)
ngDoCheck            → every change detection run (custom change detection)
ngAfterContentInit   → projected content (<ng-content>) initialized
ngAfterViewInit      → the component's view + child views ready ★ (access @ViewChild)
ngAfterViewChecked   → after each view check
ngOnDestroy          → before removal ★ (unsubscribe, clear timers)
```

## The three you use most

```ts
ngOnInit() {
  this.userService.getUsers().subscribe(u => this.users = u); // init/fetch — inputs are ready
}
ngAfterViewInit() {
  this.chart.nativeElement.focus(); // the DOM/@ViewChild exists now
}
ngOnDestroy() {
  this.subscription.unsubscribe();   // prevent memory leaks!
  clearInterval(this.timer);
}
```

- **`ngOnInit`** — आरंभीकरण और डेटा प्राप्ति के लिए मानक स्थान (कन्सट्रक्टर के विपरीत, `@Input`s यहाँ उपलब्ध हैं)।
- **`ngAfterViewInit`** — जब बाल दृश्य और `@ViewChild` संदर्भ मौजूद हों।
- **`ngOnDestroy`** — सफाई: Observables से सदस्यता समाप्त करें, टाइमर साफ़ करें, श्रोता हटाएं।

## Why ngOnInit over the constructor

कन्सट्रक्टर को केवल DI करना चाहिए; इनपुट अभी तक बाध्य नहीं हैं। `ngOnInit` एंगुलर द्वारा घटक और इसके इनपुट सेट करने के बाद चलता है — स्टार्टअप लॉजिक के लिए सही स्थान।

## यह क्यों मायने रखता है

जीवनचक्र हुक्स आपको सही समय पर तर्क चलाने देते हैं — `ngOnInit` में शुरू करें, `ngAfterViewInit` में प्रदान किए गए दृश्य को एक्सेस करें, और महत्वपूर्ण रूप से `ngOnDestroy` में **सफाई करें** (Observables से सदस्यता समाप्त करना Angular में मेमोरी लीक से बचने का #1 तरीका है)।

प्रत्येक हुक के क्रम और भूमिका को जानना सही डेटा प्राप्ति, DOM पहुँच और संसाधन प्रबंधन के लिए आवश्यक है।