# Where should state live in complex frontend apps

**URL:** <https://forum.kirupa.com/t/where-should-state-live-in-complex-frontend-apps/679650>\
**Category:** Uncategorized\
**Created:** [March 29, 2026, 1:00am UTC](https://forum.kirupa.com/t/where-should-state-live-in-complex-frontend-apps/679650 "2026-03-29T01:00:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [March 29, 2026, 1:00am UTC](https://forum.kirupa.com/t/where-should-state-live-in-complex-frontend-apps/679650/1 "2026-03-29T01:00:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 29, 2026, 4:44am UTC](https://forum.kirupa.com/t/where-should-state-live-in-complex-frontend-apps/679650/4 "2026-03-29T04:44:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [March 29, 2026, 4:44am UTC](https://forum.kirupa.com/t/where-should-state-live-in-complex-frontend-apps/679650/5 "2026-03-29T04:44:30Z")

</div>

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

MechaPrime

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [March 29, 2026, 6:42pm UTC](https://forum.kirupa.com/t/where-should-state-live-in-complex-frontend-apps/679650/6 "2026-03-29T18:42:06Z")

</div>

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.

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

```

Arthur

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [March 30, 2026, 12:21am UTC](https://forum.kirupa.com/t/where-should-state-live-in-complex-frontend-apps/679650/7 "2026-03-30T00:21:07Z")

</div>

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.

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

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

```

Yoshiii

> **[Swup Fragment Plugin](https://swup-fragment-plugin.netlify.app/)**
>
> A demo site for the swup fragment plugin

Yoshiii