Pse është imutabiliteti i rëndësishëm në menaxhimin e gjendjes?

Question

Accepted Answer

**Imutabiliteti** do të thotë se asnjëherë nuk modifikoni gjendjen në vend — në vend të kësaj, ju krijoni një **objekt/array të ri** me ndryshimet. Kjo është qendrore në mënyrën se si React, Redux dhe mjete të ngjashme zbulojnë ndryshimet dhe përditësojnë ndërfaqen e përdoruesit në mënyrë korrekte.

## Problemi me mutimin

```jsx
// ❌ mutating — React doesn't detect the change
function addItem(item) {
  items.push(item);   // same array reference → React sees "no change" → no re-render
  setItems(items);    // passing the same reference back
}

// ✅ immutable — a NEW array, new reference → React re-renders
function addItem(item) {
  setItems([...items, item]); // create a new array
}
```

React (dhe Redux) zbulojnë ndryshimet duke krahasuar **referencat** (`oldState === newState`), jo përmbajtjen e thellë — për arsye të performancës. Nëse mutoni në vend, referenca mbetet e njëjtë, kështu që korniza mendon se asgjë nuk ka ndryshuar dhe e anashkalon ri-renderimin.

## Modele të përditësimit të imutabl

```js
// arrays
setItems([...items, newItem]);                  // add
setItems(items.filter(i => i.id !== id));        // remove
setItems(items.map(i => i.id === id ? { ...i, done: true } : i)); // update one

// objects
setUser({ ...user, name: "Bob" });               // update a field
setUser({ ...user, address: { ...user.address, city: "NY" } }); // nested update
```

Operatori spread krijon kopje të cekëta; për të dhëna të mbivendosura ju kopjoni secilin nivel që ndryshoni.

## Pse imutabiliteti sjell më shumë përfitime

```text
✓ Reliable change detection → correct, efficient re-renders (reference equality)
✓ Enables performance optimizations (React.memo, OnPush, useMemo) that compare references
✓ Predictable state — old state is never altered, easing debugging
✓ Time-travel debugging & undo/redo (keep past state snapshots)
```

## Mjetet që ndihmojnë

```js
// Immer (used by Redux Toolkit) lets you "mutate" a draft → produces an immutable result
produce(state, draft => { draft.items.push(item); }); // safe + readable
```

Immer e bën përditësimin e imutabl të mbivendosur ergonomik duke ju lejuar të shkruani kod që duket se mutim në një draft që ai e konverton në një përditësim të imutabl.

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

Imutabiliteti është mekanizmi që e bën të funksionojë zbulimin e ndryshimit të bazuar në referenca — është *pse* `[...items]` shkakton ri-renderim por `items.push()` nuk e bën.

Për më tepër se korrektësia, ai hap mundësi për optimizime të performancës (memoizimi krahasohet referencat) dhe veçori të fuqishme (undo/redo, time-travel).

Komprehensioni i modeleve të përditësimit të imutabl (dhe mjeteve si Immer) është thelbësor për të punuar në mënyrë korrekte me React/Redux; mutimi i gjendjes është një nga gabimet më të zakonshme të fillestarëve.