Where should state live in complex frontend apps

1

In bigger frontend systems, what should stay local in components versus shared global state. Looking for practical rules that reduce bugs, stale UI, and over-engineering.

MechaPrime

4

@MechaPrime - What language or framework are you building your app in?

5

React with TypeScript, mostly function components and hooks, since the state tradeoffs are sharpest there.

MechaPrime

6

Keep server state and UI state separate, lift only what multiple branches truly share, and use context sparingly because it spreads like jam if you’re not careful.

const user = useUserQuery(id)      // server state
const [isOpen, setIsOpen] = useState(false) // UI state

Arthur

7

Yep: server state belongs with the cache layer, UI state stays local until two siblings actually need it, and context is for stable cross-cutting stuff, not every toggle.

const user = useUserQuery(id)
const [isOpen, setIsOpen] = useState(false)

return <Panel user={user.data} isOpen={isOpen} onToggle={() => setIsOpen(v => !v)} />

Yoshiii

Yoshiii