X'inhu l-istati derivat u għaliex għandu nievħa l-dublikazzjoni tiegħu?

Question

Accepted Answer

**L-istati derivat** hija kwalunkwe valur li tista' **tikkalkula minn istati eżistenti** minflok li tinħażnu separatament. Il-prinċipju: jekk tista' tikkalkula, tagħti - derivalha fuq kull render. L-ħżin ta' valuri derivabbli jinċita lilhom biex ikunu mħarrġa mill-isinkronizzazzjoni.

## L-anti-pattern: ħżin ta' dak li tista' tikkalkula

```jsx
// ❌ storing a derived value as separate state
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // DUPLICATE — derivable from items

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // must remember to update total too — easy to forget 🐛
  }
}
```

Issa `total` hija kopja tiegħa t-tieni ta' informazzjoni li diġà tinsab f' `items`. Kull bidla għal `items` għandha *wkoll* taġġorna `total`, u meta titfi waħda (neħħi, bidla ta' kwantità), huma jiddisagraw u l-UI turi t-total ħażin.

## Il-ħlas: derivaha fuq render

```jsx
// ✅ compute total from items — always correct, never out of sync
function Cart() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, i) => sum + i.price, 0); // derived each render

function addItem(item) {
    setItems([...items, item]); // ONE update; total recomputes automatically
  }
}
```

B' `total` derivat, m'hemmx xejn addizzjonali li għandu jinħabra - biddel `items` u t-total huwa dejjem tajjeb.

## Memoize biss jekk il-kalkolu huwa għali

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // expensive derivation
  [items]                                            // recompute only when items change
);
```

Għal derivazzjonijiet tqal (filtri/għodda kbira), `useMemo`/`computed`/selectors iħallu l-ħlas tal-cache sabiex jiġi rkalkula biss meta d-dipendenze jinbidlu — imma huwa xorta *derivat*, mhux immaħżun bħala istati indipendenti.

## Valuri derivati komuni

```text
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
```

## Għaliex huwa importanti

Mhux dublikazzjoni ta' istati derivat hija applikazzjoni diretta ta' single-source-of-truth — ttelimina klassi sħiħa ta' bugs fejn il-kopji jifdalkaw.

Ir-regola "derival, tagħti" tippreserva l-istati tiegħek minimalista u l-UI tiegħek konsistenti billi tinbinja.

Irrikonoxximent ta' dak li huwa derivabbli (u jilħqu l- `useMemo`/computed/selectors biss għall-prestazzjoni, qatt biex jinħolqu sors ta' verità t-tieni) hija karatteristika tal-disinn ta' istati nadif u reżistenti għall-bugs.