Computed Signal in Angular: perché usarle al posto degli Effect

Le computed signal in Angular offrono un modo più semplice ed efficiente per derivare valori da stati reattivi rispetto agli effect, comunemente usati per operazioni collaterali. In questo post vedremo perché spesso conviene usare una computed signal invece di un effect, evidenziando i vantaggi in termini di semplicità, prestazioni e sicurezza del codice. Scoprirai come questo approccio possa rendere il tuo codice più pulito e reattivo, migliorando la gestione degli aggiornamenti automatici dei dati.

Se hai iniziato a lavorare con Angular, probabilmente hai già sentito parlare degli effect e di quanto possano essere utili per reagire ai cambiamenti di stato. Ma c'è un'altra arma nel tuo arsenale: le computed signal. Oggi vediamo insieme perché potresti voler usare una computed signal invece di un effect in molte situazioni.

Effetti vs. Computed Signal: una rapida panoramica

Per capire il vero potere delle computed signal, facciamo prima un rapido ripasso degli effect. Gli effect sono perfetti quando hai bisogno di eseguire operazioni collaterali in risposta a cambiamenti di stato. Magari stai aggiornando il DOM, re-renderizzando una mappa, o eseguendo altre operazioni imperative.

Ma cosa succede quando hai semplicemente bisogno di derivare un valore da altri valori reattivi? Ecco dove entrano in gioco le computed signal.

Che cosa sono le Computed Signal?

Le computed signal sono essenzialmente segnali derivati. Immagina di avere due variabili reattive, a e b, e di voler calcolare la loro somma ogni volta che una di esse cambia. Invece di creare un effect che aggiorna una terza variabile, puoi usare una computed signal per ottenere direttamente il risultato:

const a = signal(5);
const b = signal(10);

const sum = computed(() => a() + b());

Ora, ogni volta che a o b cambiano, sum() si aggiornerà automaticamente. Non c'è bisogno di effetti collaterali o logiche aggiuntive. È semplice, pulito, e molto potente.

Quando dovresti usare una Computed Signal?

Le computed signal sono ideali quando il tuo scopo è derivare nuovi dati da stati esistenti. Vediamo un esempio pratico.

Supponiamo di avere un'applicazione che calcola il prezzo totale di un carrello. Hai una lista di articoli con i loro prezzi e vuoi aggiornare automaticamente il totale ogni volta che la lista cambia.

Con un effect, potresti fare qualcosa del genere:

effect(() => {
    this.total = this.items.reduce((sum, item) => sum + item.price, 0);
});

Funziona, certo. Ma ogni volta che items cambia, l'effect viene eseguito, anche se potrebbe non essere necessario (ad esempio, se stai eseguendo altre operazioni più pesanti nello stesso effect). Inoltre, stai modificando this.total direttamente, il che potrebbe portare a comportamenti non desiderati se non stai attento.

Con una computed signal, puoi fare tutto questo in modo più diretto e sicuro:

const items = signal([
    { price: 10 },
    { price: 20 }
]);

const total = computed(() => items().reduce((sum, item) => sum + item.price, 0));

Ora, total() rifletterà automaticamente la somma aggiornata ogni volta che items() cambia. Non devi preoccuparti di aggiornare manualmente il valore o di gestire logiche complesse all'interno di un effect.

Vantaggi delle Computed Signal

  1. Semplicità e pulizia: Le computed signal ti permettono di derivare valori senza dover gestire manualmente gli aggiornamenti. Questo mantiene il tuo codice più semplice e leggibile.
  2. Prestazioni: Poiché le computed signal vengono aggiornate solo quando i loro valori dipendenti cambiano, sono più efficienti rispetto a un effect che potrebbe eseguire codice aggiuntivo anche quando non necessario.
  3. Sicurezza: Usare computed signal riduce la probabilità di effetti collaterali indesiderati. Non stai modificando variabili direttamente, quindi il rischio di introdurre bug è minore.

Quando usare ancora gli Effect

Naturalmente, gli effect hanno ancora il loro posto. Sono perfetti per gestire operazioni collaterali, come l'aggiornamento del DOM o l'esecuzione di richieste di rete. Ma quando si tratta di calcolare e derivare valori, le computed signal sono spesso la scelta migliore.

Conclusione

Le computed signal in Angular sono uno strumento potente e versatile che può semplificare notevolmente il tuo codice. Quando si tratta di derivare valori da stati reattivi, sono spesso la scelta più pulita e performante rispetto agli effect. Quindi, la prossima volta che ti trovi a dover calcolare qualcosa in risposta a un cambiamento di stato, pensa alle computed signal. Potresti scoprire che sono esattamente ciò di cui hai bisogno per mantenere il tuo codice elegante e funzionale!