Wat betekent "single source of truth"?

Question

Accepted Answer

**Single source of truth** betekent dat elk stukje data **op exact één plek** wordt opgeslagen, en alles wat het nodig heeft, leest er van af — in plaats van meerdere kopieën te bewaren die uit elkaar kunnen groeien.

## Waarom het belangrijk is: gedupliceerde, uiteen drijvende toestand

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

Wanneer hetzelfde feit in twee toestanden leeft, moet elke update beide veranderen — en onvermijdelijk wordt er één gemist, wat bugs veroorzaakt waarbij de UI inconsistente waarden weergeeft.

## De oplossing: één bron, de rest afleiden

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

Sla de canonieke waarde eenmaal op; bereken alles wat ervan af te leiden is on-the-fly. Er is niets wat je gesynchroniseerd moet houden.

## Waar dit principe van toepassing is

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

## Waarom het belangrijk is

Single source of truth is een fundamenteel principe van betrouwbare state management — het elimineert een hele klasse van bugs veroorzaakt door gedupliceerde gegevens die uit elkaar groeien.

Het is *waarom* je waarden afleidt in plaats van ze op te slaan, *waarom* je vermijdt props in state te kopiëren, en *waarom* globale stores gedeelde gegevens centraliseren.

Wanneer gegevens één gezaghebbend thuis hebben en alles ervan afleest, blijft je UI consistent uit constructie.