Single source of truth
What this means
"Single source of truth" is a principle by which all data in an application is stored in one place, and every part of the interface reads it from that single source, rather than keeping its own copies.
In simpler terms: all application state should be centralized, so there is no duplication or divergence between parts of the interface.
Example in React
Without a "single source of truth"
function Parent() {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
return (
<>
<Child1 count={count1} setCount={setCount1} />
<Child2 count={count2} setCount={setCount2} />
</>
);
}Here two components manage separate states, even though they display the same value. If they need to be kept in sync, chaos begins: the values can diverge.
With a "single source of truth"
function Parent() {
const [count, setCount] = useState(0); // ← single source of truth
return (
<>
<Child1 count={count} setCount={setCount} />
<Child2 count={count} setCount={setCount} />
</>
);
}Now the count state is stored in one place - in the parent.
Both child components get their data from it and always see the current value.
The principle in Redux and other state managers
Redux is literally built on this principle:
The entire application state is stored in one store - this is exactly the "Single Source of Truth".
Any component gets its data from this single store, and when the store changes, everyone subscribed to it updates automatically.
// Redux store - the single source of truth
const store = configureStore({
reducer: rootReducer
});What happens without SSOT
If this principle is violated, you get:
- desynchronization between components,
- unnecessary UI updates,
- hard debugging (who changed the data?),
- unpredictable application behavior.
Summary
| What | Description |
|---|---|
| Definition | All data must have one authoritative source |
| Goal | Eliminate duplication and inconsistency of state |
| In React | Keep state higher in the hierarchy and pass it down via props |
| In Redux / Zustand / MobX | All state in one store |
| Result | The application is predictable, easy to test, and easy to extend |
In React this is expressed simply: A component should get data "from above" (via props or context), not keep its own copies of the same state.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.