Çfarë është gjendja e derivuar dhe pse duhet të shmangni përsëritjen e saj?

Question

Accepted Answer

**Gjendja e derivuar** është çdo vlerë që **mund ta llogarisni nga gjendja ekzistuese** në vend që ta ruani veçmas. Parimi: nëse mund ta llogarisni, mos e ruani — e nxirrni në çdo render. Ruajtja e vlerave të derivuara ju poshtëzon t'i lini të bien në mosmarrëveshje.

## Modeli i keq: ruajtja e asaj që mund ta llogarisni

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

Tani `total` është një kopje e dytë e informacionit që është tashmë në `items`. Çdo ndryshim në `items` duhet *gjithashtu* të përditësojë `total`, dhe në momentin kur lini njërin (një heqje, një ndryshim të sasisë), ata nuk bien dakord dhe ndërfaqja shfaq shumën e gabuar.

## Rregullimi: e nxirrni gjatë renderimit

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

Me `total` të derivuar, nuk ka asgjë shtesë për të mbajtur sinkron — ndryshoni `items` dhe totali është gjithmonë i saktë.

## Memorizohet vetëm nëse llogaritja është e shtrenjtë

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

Për derivime të rënda (filtra/radhëzime të mëdha), `useMemo`/`computed`/selectors ruajnë rezultatin në cache në mënyrë që të rillogaritet vetëm kur ndryshojnë varësitë — por është ende *i derivuar*, jo i ruajtur si gjendje e pavarur.

## Vlerat e zakonshme të derivuara

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

## Pse është e rëndësishme

Mos përsëritja e gjendjes së derivuar është një zbatim i drejtpërdrejtë i burimit të vetëm të së vërtetës — ajo eliminon një klasë të plotë defektesh ku kopjet devijon.

Rregulla "nxirr, mos ruaj" e mban gjendjen tuaj minimale dhe ndërfaqjen tuaj konsistente sipas konstruksionit.

Fjohja se çfarë është e derivueshme (dhe arritja për `useMemo`/computed/selectors vetëm për performancë, kurrë për të krijuar një burim të dytë të së vërtetës) është një shenjë e dizajnit të gjendjes të pastra dhe rezistente ndaj gabimeve.