Abin jiha ne ne abin da ake samun daga jiya ne me kuma me yunda a kamata mu cire shirinsa?

Question

Accepted Answer

**Abin jiha ne ne abin da ake samun** wani ƙimar da zai iya **ƙididdige daga jiha da akwai** maimakon ajiye ta waje. Ƙa'ida: idan za ka iya ƙididdige ta, kada ka ajiye ta — fita ta a kowane render. Ajiye abubuwan da ake iya samun suna amfani da su mu kasance soyaaye.

## Duwatsu mara kyau: ajiye abin da za ka iya ƙididdige

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

Yayin nan `total` abin ajiyewa ne na abin da yake a `items`. Kowane sauya ga `items` dole ne *ma* a sabunta `total`, kuma a lokacin da kake sakawa daya (share, sauya adadi), ba su yarda ba kuma UI yana nuna daidaitaccen jimla.

## Warwarewa: fita ta a 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
  }
}
```

Tare da `total` da ake samun, babu abin da sura yace a jiye abubuwa - sauya `items` kuma daidaitaccen jimla koyaushe yake daidai.

## A tuna kawai idan ƙididdige ya zama mai tsada

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

Gare da nauyin jiha (manyan tacewa/rarraba), `useMemo`/`computed`/selectors suna ajiye sakamakon don gida ya ƙididdige kawai lokacin da azalumma suka canja — amma har yanzu *fita* ne, ba a ajiye a matsayin jiha na kaje-kaje ba.

## Abubuwan jiya na gida

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

## Me ya sa haka mahimmanci

Ba da shirinsa abin jiha ne ne abin da ake samun shine aiki na kai-kai na tushe gida - yana kawar da jerin mafita inda kwafi sun warwara.

ƙa'ida ta "fita, kada ajiye" ke jiya jihinku ƙananne kuma UI na taimakawa ta hanyar gida.

Ganewa abin da ake iya samun (kuma damowa `useMemo`/computed/selectors ne kawai don aiki, ba gida don samar da tushe na biyu na gida) alamar tsafi, bugawa-matal gwamnatin jiha.