Mit jelent az "single source of truth"?

Question

Accepted Answer

**Single source of truth** azt jelenti, hogy minden adat **pontosan egy helyen** van tárolva, és minden, amire szüksége van, onnan olvassa ki — ahelyett, hogy több másolatot tartanánk, amelyek szinkronizációs eltérésekhez vezethetnek.

## Az elkerülendő probléma: duplikált, eltérő állapot

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

Ha ugyanaz a tény két állapotban létezik, minden frissítésnek emlékeznie kell mindkettőt megváltoztatni — és elkerülhetetlenül az egyik kimarad, ami olyan hibákat okoz, ahol a felhasználói felület inkonzisztens értékeket mutat.

## A megoldás: egy forrás, a többi levezethető

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

Tároljon kanonikus értéket egyszer; számítson ki mindent, ami abból levezethető menet közben. Nincs semmi, amit szinkronizálni kellene.

## Ahol ez az elv alkalmazható

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

## Miért fontos

A single source of truth a megbízható állapotkezelés alapelve — kiküszöböl egy egész hibaosztályt, amelyet a duplikált adatok eltérése okoz.

Ezért *vezet le* értékeket tárolás helyett, ezért *kerüli el* az props másolását az állapotba, és ezért *központosítanak* a globális tárolók megosztott adatokat.

Ha az adatoknak egy mérvadó helye van, és minden onnan olvassa ki, a felhasználói felülete konstruktív módon konzisztens marad.