Ce este starea derivată și de ce să evitați duplicarea acesteia?

Question

IT Interview Practice · Accepted Answer

**Starea derivată** este orice valoare pe care o puteți **calcula din starea existentă** în loc să o stocați separat. Principiul: dacă puteți să o calculați, nu o stocați — derivați-o la fiecare randare. Stocarea valorilor derivabile le invită să se desincronizeze.

## Anti-model: stocarea ceea ce puteți calcula

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

Acum `total` este o a doua copie a informațiilor deja din `items`. Fiecare schimbare a `items` trebuie *de asemenea* să actualizeze `total`, și în momentul în care omiți o actualizare (o ștergere, o schimbare de cantitate), ele nu mai sunt sincronizate și interfața afișează totalul greșit.

## Soluția: derivați-o la randare

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

Cu `total` derivat, nu există nimic suplimentar de menținut în sincronizare — schimbați `items` și totalul va fi întotdeauna corect.

## Memorați doar dacă calculul este costisitor

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

Pentru derivări grele (filtrări/sortări mari), `useMemo`/`computed`/selectori memorează rezultatul pentru ca acesta să se recalculeze doar atunci când dependențele se schimbă — dar rămâne în continuare *derivat*, nu stocat ca stare independentă.

## Valori derivate comune

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

## De ce contează

Ne-duplicarea stării derivate este o aplicație directă a principiului singurei surse de adevăr — elimină o întreagă clasă de erori unde copiile se desincronizează.

Regula "derivați, nu stocați" ține starea dvs. minimală și interfața dvs. constantă prin construcție.

Recunoașterea ceea ce este derivabil (și apelarea la `useMemo`/computed/selectori doar pentru performanță, niciodată pentru a crea o a doua sursă de adevăr) este o caracteristică a designului stării curat și rezistent la erori.

Anti-model: stocarea ceea ce puteți calcula

Soluția: derivați-o la randare

Memorați doar dacă calculul este costisitor

Valori derivate comune

De ce contează

Întrebări conexe