React Context vs Zustand: எப்போது எதைப் பயன்படுத்த வேண்டும்
டெவலப்பர்கள் பெரும்பாலும் React state-இல் ஒரு தவறு செய்கிறார்கள். அவர்கள் Context-ஐத் தவறாகப் பயன்படுத்துகிறார்கள், பின்னர் செயல்திறன் (performance) சிக்கல்களுக்கு Context-ஐக் குற்றம் சாட்டுகிறார்கள்.
இந்தப் பிரச்சனை பொதுவாக ஒரு பெரிய context object-ஆல் ஏற்படுகிறது. அந்த object-இல் உள்ள ஒரு மதிப்பு மாறும்போது, அந்த context-ஐப் பயன்படுத்தும் ஒவ்வொரு component-உம் மீண்டும் render (re-render) ஆகும். ஒரு component-க்கு ஒரு சிறிய தரவு மட்டும் தேவைப்பட்டாலும் கூட, அந்த object-இல் ஏற்படும் ஒவ்வொரு மாற்றத்திற்கும் அது எதிர்வினையாற்றும்.
உங்கள் notifications ஒவ்வொரு 30 வினாடிக்கும் மாறினால், உங்கள் Navbar பயனர் பெயரை (user name) மட்டுமே கவனித்தாலும் கூட, அது மீண்டும் render ஆகும். இது செயல்திறனைப் பாதிக்கும்.
எந்தவொரு library இல்லாமலேயே இதைச் சரிசெய்யலாம். உங்கள் contexts எவ்வளவு அடிக்கடி மாறுகின்றன என்பதைப் பொறுத்து அவற்றைப்பிரித்துக் கொள்ளலாம்.
ஒரு பெரிய context-க்கு பதிலாக, பலவற்றைத் தனித்தனியாகப் பயன்படுத்தவும்: • பயனர் தரவுகளுக்கு (user data) UserContext • sidebar state-க்கு UIContext • அறிவிப்புகளுக்கு (alerts) NotificationContext
இப்போது, பயனர் தரவு மாறும்போது மட்டுமே உங்கள் Navbar மீண்டும் render ஆகும். இந்த எளிய பிரிப்பு பெரும்பாலான செயல்திறன் புகார்களைத் தீர்க்கும்.
நிலையான மதிப்புகளுக்கு (stable values) React Context-ஐப் பயன்படுத்தவும்: • Themes • Auth status • Language settings
Context, Server Components-உடன் சிறப்பாகச் செயல்படும். Zustand கிளையண்ட் பக்கத்தில் (client side) மட்டுமே செயல்படும்.
உங்களுக்குத் தேவையான குறிப்பிட்ட பகுதிகளை மட்டும் (selective subscriptions) கண்காணிக்க வேண்டியிருக்கும் போது Zustand-ஐப் பயன்படுத்தவும். Zustand, குறிப்பிட்ட state slices-களை மட்டும் components சந்தாதாரராக (subscribe) இருக்க அனுமதிக்கிறது. உங்கள் store-இன் ஒரு பகுதி மாறினால், அந்த குறிப்பிட்ட பகுதியை மட்டும் கவனிக்கும் components மட்டுமே மீண்டும் render ஆகும்.
புதிய state-களுக்கு இந்தத் தர்க்கத்தைப் (logic) பின்பற்றவும்:
பின்வரும் சூழல்களில் React Context-ஐப் பயன்படுத்தவும்: • தரவு நிலையானது என்றால் (theme, auth, locale). • அது SSR அல்லது Server Components-உடன் செயல்பட வேண்டும் என்றால். • Context-களைப் பிரிப்பதன் மூலம் prop drilling-ஐத் தவிர்க்க விரும்பினால்.
பின்வரும் சூழல்களில் Zustand-ஐப் பயன்படுத்தவும்: • தரவு அடிக்கடி மாறினால். • Components குறிப்பிட்ட state slices-களைக் கண்காணிக்க வேண்டியிருந்தால். • உங்கள் தர்க்கம் (logic) சிக்கலானதாக இருந்தால்.
நில்லுங்கள். API தரவுகளுக்கு இவை இரண்டையும் பயன்படுத்த வேண்டாம். நீங்கள் ஒரு சர்வரிலிருந்து தரவைப் பெறுகிறீர்கள் என்றால், TanStack Query-ஐப் பயன்படுத்தவும். Context மற்றும் Zustand ஆகியவை caching அல்லது background refetching ஆகியவற்றைச் செய்வதில்லை.
சுருக்கம்: • ஒரு பெரிய context object மீண்டும் render ஆவதற்குக் காரணமாகிறது. அதைப்பிரிக்கவும். • நிலையான மதிப்புகளுக்கு Zustand-ஐப் பயன்படுத்துவது தேவையற்றது (overkill). • அடிக்கடி மாறும் விஷயங்களுக்கு Context-ஐப் பயன்படுத்துவது தாமதத்தை (lag) ஏற்படுத்தும். • Server state-க்கு Zustand-ஐப் பயன்படுத்துவது தவறான கருவியாகும்.