Why is state considered the single source of truth for data that changes in a React component?

Keeping data in state rather than scattered across variables or the actual DOM ensures React always knows the current, correct value, and can reliably re render the screen to match it. If the same piece of data existed in more than one place, they could easily fall out of sync and show incorrect or confusing information.

// Risky, two separate places tracking similar information
let isOpenVariable = false; // a plain variable, React does not track this
const [isOpen, setIsOpen] = useState(false); // the actual source of truth

// Correct, only state controls whether the menu is shown
return isOpen && <Menu />;