Why Mixing State, Derived State, and Effects Breaks Frontend Architecture

Modern frontend development often groups API payloads, computed values, and side-effect results under the broad label of 'state,' blurring critical architectural boundaries. Experts argue that true state should serve as the sole source of truth in a data flow, while derived values — such as filtered lists or form validation statuses — should be computed automatically rather than stored independently. When derived state is promoted to standalone state, developers must manually synchronize it, introducing risks like data drift and timing-dependent bugs. A common React pattern using useEffect to keep a filtered user list in sync illustrates how this approach fragments a simple derivation into three disjointed, fragile parts. The core argument is that Effects are among the most abused mechanisms in frontend development because their flexibility tempts developers to offload data-flow problems into them rather than addressing structural design.