Kif tagħżel approċċ ta' state management f'React?

Question

Accepted Answer

Tqabbel l-għodda mal-**tip** ta' state, minflok li b'mod awtomatiku tmur għal global store. Ħafna minn il-problemi ta' "global state" huma fil-fatt l-għodda sbieħa għall-ħidma.

## Gwida għad-deċiżjoni

```text
Local UI state (toggle, input)      → useState / useReducer
Shared, low-frequency (theme, user) → Context
Server/API data                     → React Query / SWR  (NOT a global store)
Complex global client state         → Zustand / Jotai / Redux Toolkit
URL-shareable state (filters, page) → the URL (search params)
```

## L-iktar insight importanti: server state ≠ client state

Id-data minn API hija **cache** ta' data remota, mhux state li inti possedi. Jiddejja fi Redux jfisser li inti manwali thawwel loading, caching, refetching, u invalidation — maħmuġa u susceptibbli għal bugs. Librerija ta' server-state tagħmel dan kollu:

```jsx
// handles caching, dedup, background refetch, stale-while-revalidate for free
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## Linji gwida

- Żomm il-state **lokali** kemm jista' jkun; colocate ħdejha ta' fejn tintuża.
- L-ebda valuri li jinbidlu malajr f'**Context** (irinder mill-ġdid il-konsumers kollha).
- Għal shared client state b'aġġornamenti frekwenti, tfaddal store b'**selective subscriptions** (Zustand/Jotai) sabiex il-komponenti irinder mill-ġdid biss għas-slice li jaqraw.
- Ikkunjata għal Redux Toolkit meta trid il-devtools/middleware/structure tiegħu fuq state kondiviż verament kumplessa.

L-għarifa reali hija **minimizzar u nposizzjonar state b'mod korrett** — mhux għażla ta' librerija.