Signals computed() and effect(): Reactive Logic Done Right

Signals become powerful when you combine:
- computed() for values derived from other signals
- effect() for side effects (logging, saving, calling APIs carefully)

## computed(): derived values

```ts
import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-cart',
  standalone: true,
  template: `
    <p>Items: {{ items() }}</p>
    <p>Price each: ${{ price() }}</p>
    <p>Total: ${{ total() }}</p>
  `,
})
export class CartComponent {
  items = signal(2);
  price = signal(25);

  total = computed(() => this.items() * this.price());
}
```

If items or price changes, total updates automatically.

## effect(): react when signals change

```ts
import { effect } from '@angular/core';

constructor() {
  effect(() => {
    console.log('Total changed:', this.total());
  });
}
```

### Important rule
Use `effect` for side effects, not for computing values.  
For computed values, use `computed`.

## Practical use case
Auto-save a draft when text changes:

```ts
draft = signal('');

constructor() {
  effect(() => {
    const value = this.draft();
    localStorage.setItem('draft', value);
  });
}
```

> Next: Signals vs Observables, when to choose which one.