Apakah maksud "single source of truth"?

Question

Accepted Answer

**Single source of truth** bermaksud setiap kepingan data disimpan di **satu tempat sahaja**, dan segala yang memerlukannya membacanya dari situ — bukannya menyimpan beberapa salinan yang boleh menjadi tidak segerak.

## Masalah yang dicegahnya: state berduplikasi yang bercapah

```jsx
// ❌ the same data stored in two places → they can disagree
function Profile() {
  const [user, setUser] = useState({ name: "Ann" });
  const [displayName, setDisplayName] = useState("Ann"); // a COPY of user.name

function rename(newName) {
    setUser({ ...user, name: newName }); // updated user...
    // ...but forgot to update displayName → now they're out of sync! 🐛
  }
}
```

Apabila fakta yang sama wujud dalam dua state, setiap kemas kini mesti ingat untuk menukar kedua-duanya — dan tidak dapat tidak salah satunya akan terlepas, menghasilkan pepijat di mana UI memaparkan nilai yang tidak konsisten.

## Penyelesaiannya: satu sumber, terbitkan selebihnya

```jsx
// ✅ user.name is the single source; displayName is DERIVED, not stored
function Profile() {
  const [user, setUser] = useState({ name: "Ann" });
  const displayName = user.name.toUpperCase(); // computed on render — always in sync

function rename(newName) {
    setUser({ ...user, name: newName }); // one update, everything stays consistent
  }
}
```

Simpan nilai kanonik sekali sahaja; kira apa-apa yang boleh diterbitkan daripadanya secara serta-merta. Tiada apa-apa yang perlu disegerakkan.

## Di mana prinsip ini terpakai

```text
✓ Don't copy props into state (the prop is the source)
✓ Don't store derived values (compute them: totals, filtered lists, formatted text)
✓ Global stores (Redux/Pinia): one store is the source for shared data
✓ Server data: cache it once (React Query) rather than copying into many components
✓ URL as source: filters/page in the URL, read from there
```

## Mengapa ia penting

Single source of truth ialah prinsip asas pengurusan state yang boleh dipercayai — ia menghapuskan satu kelas pepijat yang disebabkan oleh data berduplikasi yang bercapah.

Ia ialah *sebab* anda menerbitkan nilai dan bukannya menyimpannya, *sebab* anda mengelak daripada menyalin props ke dalam state, dan *sebab* global store memusatkan data yang dikongsi.

Apabila data mempunyai satu rumah berautoriti dan segala-galanya membacanya dari situ, UI anda kekal konsisten secara reka bentuk.