Angular-এ চেঞ্জ ডিটেকশন কীভাবে কাজ করে, এবং OnPush কী করে?

Question

Accepted Answer

**চেঞ্জ ডিটেকশন** হল কীভাবে Angular DOM-কে কম্পোনেন্ট ডেটার সাথে সিঙ্ক রাখে — যেকোনো সম্ভাব্য স্টেট-পরিবর্তনকারী ইভেন্টের পরে, এটি কম্পোনেন্টগুলি চেক করে এবং যেখানে ডেটা পরিবর্তিত হয়েছে সেখানে ভিউ আপডেট করে। ডিফল্টরূপে এই চেকিং ব্যাপক; **`OnPush`** পারফরম্যান্সের জন্য এটিকে সীমিত করে।

## ডিফল্ট চেঞ্জ ডিটেকশন কীভাবে কাজ করে

```text
An async event fires (click, HTTP response, setTimeout) →
Zone.js notifies Angular → Angular checks the ENTIRE component tree
top-to-bottom → updates any bindings whose values changed.
```

ডিফল্টরূপে (`Default` স্ট্র্যাটেজি), Angular প্রতিটি ইভেন্টে **প্রতিটি কম্পোনেন্ট** পুনরায় চেক করে — সঠিক, তবে বড় ট্রিতে সম্ভাব্যভাবে অপচয়কর।

## OnPush — এমন কম্পোনেন্টগুলি এড়িয়ে যান যা পরিবর্তিত হতে পারে না

```ts
import { ChangeDetectionStrategy, Component } from "@angular/core";

@Component({
  selector: "app-user",
  changeDetection: ChangeDetectionStrategy.OnPush, // opt in
  template: `{{ user.name }}`,
})
export class UserComponent {
  @Input() user!: User;
}
```

`OnPush`-এর সাথে, Angular এই কম্পোনেন্টটি চেক করা **এড়িয়ে যায়** যদি না এই একটি ঘটে:

```text
1. An @Input REFERENCE changes (new object, not a mutation of the same one)
2. An event fires from within the component (click, etc.)
3. An Observable bound via the async pipe emits
4. You manually call markForCheck()
```

এটি বড় ট্রিতে কাজটি নাটকীয়ভাবে কমাতে পারে — Angular সম্পূর্ণ সাবট্রি উপেক্ষা করে যা পরিবর্তিত হতে পারে না বলে জানে।

## মূল সমস্যা: অপরিবর্তনীয়তা প্রয়োজন

```ts
// ❌ mutating doesn't change the reference → OnPush won't detect it
this.user.name = "Bob";

// ✅ create a NEW object → reference changes → OnPush updates
this.user = { ...this.user, name: "Bob" };
```

`OnPush` ইনপুটগুলির জন্য **রেফারেন্স পরিবর্তন**ের উপর নির্ভর করে, তাই আপনাকে অবশ্যই স্টেটটি অপরিবর্তনীয়ভাবে আপডেট করতে হবে (নতুন অবজেক্ট/অ্যারে)। স্থানে পরিবর্তন করা হল ক্লাসিক OnPush বাগ — ভিউ আপডেট হবে না।

## ম্যানুয়াল নিয়ন্ত্রণ

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // mark this component for the next check
this.cdr.detectChanges();   // run change detection now
```

## ভবিষ্যত: signals + zoneless

Signals আরও নির্ভুল, **সূক্ষ্ম-দানাদার** আপডেটগুলি সক্ষম করে (শুধুমাত্র একটি পরিবর্তিত সিগন্যাল পড়া ভিউ), Zone.js সম্পূর্ণরূপে সরানোর দিকে নির্দেশ করে।

## এটি কেন গুরুত্বপূর্ণ

চেঞ্জ ডিটেকশন Angular পারফরম্যান্সের জন্য কেন্দ্রীয়।

বোঝা যে ডিফল্ট স্ট্র্যাটেজি সম্পূর্ণ ট্রি চেক করে — এবং যে `OnPush` + অপরিবর্তনীয় ডেটা চেকগুলি এমন কম্পোনেন্টের মধ্যে সীমিত করে যাদের ইনপুট প্রকৃতপক্ষে পরিবর্তিত হয়েছে — এটি বড় অ্যাপগুলি অপ্টিমাইজ করার জন্য প্রধান লিভার।

অপরিবর্তনীয়তা প্রয়োজনীয়তা হল "আমার ভিউ কেন আপডেট হচ্ছে না?" বাগগুলির একটি ঘন ঘন উৎস, এবং signals আরও সূক্ষ্ম-দানাদার, আরও দক্ষ প্রতিক্রিয়াশীলতার জন্য Angular কোথায় যাচ্ছে তা প্রতিনিধিত্ব করে।