React இல் state management approach ஐ எவ்வாறு தேர்வு செய்கிறீர்கள்?

Question

Accepted Answer

**வகையான** state க்கு tool ஐ பொருத்திக் கொள்ளுங்கள், நிறைவாக global store க்கு சாதாரணமாக செல்ல வேண்டாம். பெரும்பாலான "global state" சிக்கல்கள் உண்மையில் வேலைக்கான தவறான tool ஆகும்.

## முடிவு வழிகாட்டி

```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)
```

## மிக முக்கியமான insight: server state ≠ client state

API இலிருந்து தரவு என்பது தொலைதூர தரவின் **cache** ஆகும், நீங்கள்소유 செய்யும் state அல்ல. இதை Redux இல் வைப்பது என்றால் நீங்கள் loading, caching, refetching, மற்றும் invalidation ஐ கைவினையாக கையாள்ள வேண்டும் — வலியாகவும் பிழையாகவும் இருக்கும். Server-state library அனைத்தையும் செய்கிறது:

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

## வழிகாட்டிகள்

- state ஐ **local** வாக வைக்கவும்; இது பயன்படுத்தப்படும் இடத்திற்கு அருகிலேயே இணைக்கவும்.
- **Context** இல் வேகமாக மாறும் மதிப்புகளை வைக்க வேண்டாம் (இது அனைத்து consumers ஐ re-render செய்கிறது).
- Shared client state க்கு படிக்கப்பட்ட updates உடன், **selective subscriptions** கொண்ட store ஐ விரும்புங்கள் (Zustand/Jotai) அதனால் components கள் அவை படிக்கும் slice க்கு மட்டுமே re-render செய்யும்.
- Redux Toolkit க்கு எட்டவும் உங்களுக்கு அதன் devtools/middleware/structure தேவையாக இருக்கும் போது உண்மையாக சிக்கலான shared state இல்.

- உண்மையான skill என்பது **state ஐ குறைக்கிறது மற்றும் சரியாக வைக்கிறது** — library தேர்வு அல்ல.