Hoe bepaal je waar elk stukje state moet leven?

Question

Accepted Answer

Bepalen **waar state leeft** is een van de belangrijkste architectuurvaardigheden. Het leidende principe: plaats elk stukje state in het **smalste bereik** dat nog steeds iedereen die het nodig heeft tevreden stelt — en match elk *soort* state met het juiste hulpmiddel.

## Waarom het belangrijk is

```text
1. Who needs this state?
   - One component                  → local state (useState)
   - A few related components        → lift to common parent / small context
   - Many distant components         → global store or context

2. What KIND of state is it?
   - Server/remote data              → server-state library (React Query/SWR)
   - UI/client state                 → useState / Zustand / Redux
   - URL-derivable (filters, page)    → the URL (searchParams)
   - Form input                       → form library or local state

3. How OFTEN does it change?
   - Rarely, widely shared (theme)    → Context is fine
   - Frequently, widely shared        → store with selective subscriptions
```

## De categorieën en hun huizen

```text
State type     Lives in                       Examples
─────────────────────────────────────────────────────────────────
Local UI       component (useState)           input text, isOpen, hover
Shared UI      lifted parent / Context / store modal state, selected item
Server data    React Query / SWR / RTK Query  users, products (cached remote)
URL state      router / searchParams          filters, page, search query, tab
Form state     React Hook Form / local         field values, validation
Global app     Zustand / Redux / Context      auth user, theme, cart
```

## Veelgemaakte fouten die het framework voorkomt

```text
❌ Server data in Redux       → use React Query (it's a cache, not UI state)
❌ Everything global "just in case" → over-coupling, extra re-renders; keep local
❌ Filters/page in state       → put in the URL (shareable, bookmarkable, back-button)
❌ Duplicating derivable values → derive instead (single source of truth)
❌ Form state in a global store → usually overkill; keep local or use a form lib
```

## De URL is ondergebruikt state

```text
Filters, pagination, search, active tab → belong in the URL.
Benefits: shareable links, browser back/forward works, survives refresh, SEO.
```

## Waarom het belangrijk is

Waar state leeft bepaalt de eenvoud, prestaties en onderhoudbaarheid van een app.

De vaardigheid is weerstand bieden aan de drang om alles globaal te maken en in plaats daarvan **standaard lokaliseren, elk soort state aan het juiste hulpmiddel toekennen** (serverdata → React Query, URL-afleidbaar → de URL, UI → lokaal/store).

Dit goed doen voorkomt de meest voorkomende architectuurproblemen — serverdata in Redux gepropt, over-geglobaliseerde state die re-renders veroorzaakt, en filters in componentstate in plaats van in de URL.

Deze afweging is wat een schone, schaalbare state-architectuur van een ingewikkelde onderscheidt.