Single source of truth means each piece of data is stored in exactly one place, and everything that needs it reads from there — rather than keeping multiple copies that can drift out of sync.
The problem it prevents: duplicated, diverging state
// ❌ 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! 🐛
}
}
When the same fact lives in two states, every update must remember to change both — and inevitably one gets missed, producing bugs where the UI shows inconsistent values.
The fix: one source, derive the rest
// ✅ 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
}
}
Store the canonical value once; compute anything derivable from it on the fly. There's nothing to keep in sync.
Where this principle applies
✓ 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
Why it matters
Single source of truth is a foundational principle of reliable state management — it eliminates an entire class of bugs caused by duplicate data drifting apart.
It's why you derive values instead of storing them, why you avoid copying props into state, and why global stores centralize shared data.
When data has one authoritative home and everything reads from it, your UI stays consistent by construction.