Suggest an edit

Improve this article

Refine the answer for “Single source of truth”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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"

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

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

```javascript
// 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts409 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.