ஒவ்வொரு நிலையின் பகுதியும் எங்கு வாழ வேண்டும் என்பதை எவ்வாறு தீர்மானிக்கிறீர்கள்?

Question

Accepted Answer

**நிலை எங்கு வாழ்கிறது** என்பதை தீர்மானிக்கது மிக முக்கியமான ஆர்கிட்டெக்சர் திறன்களில் ஒன்றாகும். வழிகாட்டும் கொள்கை: ஒவ்வொரு நிலையின் பகுதியையும் **மிகக் குறுக்கமான நோக்கத்தில்** வைக்கவும், இது இன்னும் அதை தேவைப்படுவோர் அனைவரையும் திருப்திப்படுத்துகிறது — மற்றும் ஒவ்வொரு *வகை* நிலையையும் சரியான கருவியுடன் பொருத்தவும்.

## ஒரு முடிவு முறைக்கு

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

## வகைகள் மற்றும் அவற்றின் வீடுகள்

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

## முறை தடுக்கும் பொதுவான பிழைகள்

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

## URL குறைவாக பயன்படுத்தப்படும் நிலை

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

## இது ஏன் முக்கியமானது

நிலை எங்கு வாழ்கிறது என்பது ஒரு பயன்பாட்டின் எளிமை, செயல்திறன் மற்றும் பராமரிப்பு திறன் தீர்மானிக்கிறது.

திறன் என்பது எல்லாவற்றையும் உலகளாவிய வைக்க விரும்பும் வேட்டையை எதிர்ப்பது மற்றும் அதற்கு பதிலாக **முன்னிருப்பாக உள்ளூர்கமாக்குதல், ஒவ்வொரு வகை நிலையையும் அதன் சரியான கருவியுடன் பொருத்துதல்** (சேவையக தரவு → React Query, URL-பெறக்கூடிய → URL, UI → உள்ளூர்/store).

இதைச் சரியாகப் பெறுவது மிகவும் பொதுவான ஆர்கிட்டெக்சர் சிக்கல்களைத் தவிர்க்கிறது — சேவையக தரவு Redux ஐ நெருக்கியதாக, அதிக உலகளாவிய நிலை மறுறேண்டலை ஏற்படுத்துவது, மற்றும் URL க்கு பதிலாக கூறு நிலையில் வடிகட்டல்கள்.

இந்த판断் ஒரு சுத்தமான, அளவிடக்கூடிய நிலை ஆர்கிட்டெக்சரை ஒரு குழப்பமான ஒன்றிலிருந்து பிரிக்கும்.