Yadda Angular yake aiki da jujjuyawa, kuma OnPush yake yi da abin ya?

Question

Accepted Answer

**Jujjuyawa jujjuyawa** shine yadda Angular ke jiyya DOM tare da bayanan kwamfoni — bayan duk abin da zai iya canja halin, yana duba kwamfoni da sabunta gida inda bayanan suka canja. Tsohon gida ikon jujjuyawa shine fada; **`OnPush`** yana tamashe shi don aikin gaske.

## Yadda tsohon jujjuyawa jujjuyawa ke aiki

```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.
```

Tsohon tsohon (`Default` strategy), Angular yana duban **kowane kwamfon** akan kowane abin kari — daidai, amma mai bukatarwa a manyan itace.

## OnPush — tsaye duba kwamfoni waɗanda ba za su iya jujjuya ba

```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;
}
```

Tare da `OnPush`, Angular **tsaye** duban wannan kwamfon sai dai idan ɗaya daga cikin waɗannan ya faru:

```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()
```

Zan iya shafe karya a manyan itace — Angular yana musun duk itace-itace gida da ya san ba za su iya jujjuya ba.

## Babbar kasalwa: daidaito ana bukatarwa

```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` ya dogara kan **juyar da tunani** don inputs, don haka dole ne ka sabunta yajiye daidai (sabon abubuwa/jerin). Juyar da wuri a gida shine tsohon kasalwa ta OnPush — gida ba za ta sabunta ba.

## Jujjuyawa da hannu

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

## Gida mai zuwa: sarauta + zoneless

Sarauta suna ba da damar kari ƙarfi kaɗan, **haɓaka-kaɓaka** sabuntatawa (jiya kawai gida da ke duban sauran sarauta da suka jujjuya), mai nuni zuwa kashen Zone.js gida.

## Yadda ya shafi

Jujjuyawa jujjuyawa ita ce tsakiya don aikin Angular.

Jibi da tsohon strategy yana duba dukan itace — kuma `OnPush` + bayanan daidai yana tamashe duban zuwa kwamfoni waɗanda inputs su a gaske suka jujjuya — shi ne babbar takewa don inganta manyan apps.

Daidaito da ita bukatarwa shine tushen fa "me ya sa gida ta ba ta sabunta ba?" kasalwa, kuma sarauta suna wakilta inda Angular ke tafi don kari ƙarfi kaɗan, kari haɓaka, reactivity.