React useSyncExternalStore: வெளிப்புற நிலை ஒத்திசைவில் தேர்ச்சி பெறுதல்

useSyncExternalStore என்பது React 18-இல் அறிமுகப்படுத்தப்பட்ட ஒரு React hook ஆகும். இது கன்கரண்ட் ரெண்டரிங்குடன் இணக்கமான முறையில் வெளிப்புற தரவு மூலங்களிலிருந்து சந்தா செய்து படிக்க உங்களை அனுமதிக்கிறது. இந்த hook, React-இன் நிர்வகிக்கப்பட்ட நிலைக்கும், மூன்றாம் தரப்பு நூலகங்கள், பிரவுசர் API-கள் அல்லது பிற UI கட்டமைப்புகளிலிருந்து வரும் தரவு போன்ற வெளிப்புற நிலைக்கும் இடையே உள்ள இடைவெளியைக் குறைக்கிறது. இதன் நோக்கம், செயல்படுத்தல் மற்றும் நன்மைகளைப் பற்றி ஆழமாகப் புரிந்துகொள்வோம்.

useSyncExternalStore-இன் தேவையைப் புரிந்துகொள்ளுதல்

React-இன் உள்ளமைந்த நிலை மேலாண்மை (useState, useReducer, Context API) React காம்போனென்ட் ட்ரீயுடன் இறுக்கமாக இணைக்கப்பட்ட தரவுகளுக்கு மிகச் சிறப்பாக செயல்படுகிறது. இருப்பினும், பல பயன்பாடுகளுக்கு React-இன் கட்டுப்பாட்டிற்கு *வெளியே* உள்ள தரவு மூலங்களுடன் ஒருங்கிணைக்க வேண்டியுள்ளது. இந்த வெளிப்புற மூலங்களில் பின்வருவன அடங்கும்:

• மூன்றாம் தரப்பு நிலை மேலாண்மை நூலகங்கள்: Zustand, Jotai, அல்லது Valtio போன்ற நூலகங்களுடன் ஒருங்கிணைத்தல்.
• பிரவுசர் API-கள்: localStorage, IndexedDB, அல்லது Network Information API-இலிருந்து தரவை அணுகுதல்.
• சர்வர்களிலிருந்து பெறப்பட்ட தரவு: React Query மற்றும் SWR போன்ற நூலகங்கள் பெரும்பாலும் விரும்பப்பட்டாலும், சில நேரங்களில் நீங்கள் நேரடி கட்டுப்பாட்டை விரும்பலாம்.
• பிற UI கட்டமைப்புகள்: React மற்ற UI தொழில்நுட்பங்களுடன் இணைந்து இருக்கும் கலப்பின பயன்பாடுகளில்.

ஒரு React காம்போனென்டிற்குள் இந்த வெளிப்புற மூலங்களிலிருந்து நேரடியாகப் படிப்பதும் எழுதுவதும் சிக்கல்களுக்கு வழிவகுக்கும், குறிப்பாக கன்கரண்ட் ரெண்டரிங்கில். React ஒரு புதிய திரையைத் தயாரிக்கும் போது வெளிப்புற மூலம் மாறினால், React பழைய தரவுகளுடன் ஒரு காம்போனென்டை ரெண்டர் செய்யலாம். useSyncExternalStore, React வெளிப்புற நிலையுடன் பாதுகாப்பாக ஒத்திசைக்க ஒரு வழிமுறையை வழங்குவதன் மூலம் இந்த சிக்கலைத் தீர்க்கிறது.

useSyncExternalStore எவ்வாறு செயல்படுகிறது

useSyncExternalStore ஹூக் மூன்று ஆர்குமென்ட்களை ஏற்றுக்கொள்கிறது:

1. subscribe: ஒரு callback-ஐ ஏற்கும் ஒரு ஃபங்ஷன். வெளிப்புற ஸ்டோர் மாறும் போதெல்லாம் இந்த callback அழைக்கப்படும். இந்த ஃபங்ஷன், அழைக்கப்படும் போது, வெளிப்புற ஸ்டோரிலிருந்து சந்தாவை நீக்கும் ஒரு ஃபங்ஷனைத் திரும்பத் தர வேண்டும்.
2. getSnapshot: வெளிப்புற ஸ்டோரின் தற்போதைய மதிப்பைக் கொடுக்கும் ஒரு ஃபங்ஷன். React ரெண்டரிங்கின் போது ஸ்டோரின் மதிப்பைப் படிக்க இந்த ஃபங்ஷனைப் பயன்படுத்துகிறது.
3. getServerSnapshot (விருப்பத்தேர்வு): சர்வரில் வெளிப்புற ஸ்டோரின் ஆரம்ப மதிப்பைக் கொடுக்கும் ஒரு ஃபங்ஷன். இது சர்வர்-சைட் ரெண்டரிங்கிற்கு (SSR) மட்டுமே தேவை. வழங்கப்படாவிட்டால், React சர்வரில் getSnapshot-ஐப் பயன்படுத்தும்.

இந்த ஹூக், getSnapshot ஃபங்ஷனிலிருந்து பெறப்பட்ட வெளிப்புற ஸ்டோரின் தற்போதைய மதிப்பைக் கொடுக்கிறது. getSnapshot மூலம் வழங்கப்படும் மதிப்பு மாறும் போதெல்லாம், Object.is ஒப்பீட்டின் மூலம் தீர்மானிக்கப்பட்டு, காம்போனென்ட் மீண்டும் ரெண்டர் செய்யப்படுவதை React உறுதி செய்கிறது.

அடிப்படை எடுத்துக்காட்டு: localStorage உடன் ஒத்திசைத்தல்

useSyncExternalStore-ஐப் பயன்படுத்தி localStorage உடன் ஒரு மதிப்பை ஒத்திசைக்க ஒரு எளிய எடுத்துக்காட்டை உருவாக்குவோம்.

```javascript import { useSyncExternalStore, useState, useEffect } from 'react'; function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem('myValue') || 'default'; } function getServerSnapshot() { return 'default'; // Or fetch from a cookie on the server } function MyComponent() { const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const [localValue, setLocalValue] = useState(value); useEffect(() => { setLocalValue(value); }, [value]); const setValue = (newValue) => { localStorage.setItem('myValue', newValue); }; const handleInputChange = (event) => { setValue(event.target.value); }; return ( ); } export default MyComponent; ```

இந்த எடுத்துக்காட்டில்:

• subscribe: window ஆப்ஜெக்டில் storage நிகழ்வைக் கவனிக்கிறது. வேறு ஒரு டேப் அல்லது விண்டோ மூலம் localStorage மாற்றப்படும்போதெல்லாம் இந்த நிகழ்வு தூண்டப்படும்.
• getSnapshot: localStorage-இலிருந்து myValue-இன் மதிப்பைப் பெறுகிறது.
• getServerSnapshot: சர்வர்-சைட் ரெண்டரிங்கிற்கு ஒரு இயல்புநிலை மதிப்பைக் கொடுக்கிறது. பயனர் முன்பு ஒரு மதிப்பை அமைத்திருந்தால் இது ஒரு குக்கியிலிருந்து பெறப்படலாம்.
• MyComponent: localStorage-இல் ஏற்படும் மாற்றங்களுக்கு சந்தா செலுத்தவும், தற்போதைய மதிப்பைக் காட்டவும் useSyncExternalStore-ஐப் பயன்படுத்துகிறது.

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

1. மூன்றாம் தரப்பு நிலை மேலாண்மை நூலகங்களுடன் ஒருங்கிணைத்தல்

React காம்போனென்ட்களை வெளிப்புற நிலை மேலாண்மை நூலகங்களுடன் ஒருங்கிணைக்கும்போது useSyncExternalStore சிறப்பாகப் பிரகாசிக்கிறது. Zustand-ஐப் பயன்படுத்தி ஒரு எடுத்துக்காட்டைப் பார்ப்போம்:

```javascript import { useSyncExternalStore } from 'react'; import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); function MyComponent() { const count = useSyncExternalStore( useStore.subscribe, useStore.getState, useStore.getState // Initial state on the server ).count; const increment = useStore((state) => state.increment); const decrement = useStore((state) => state.decrement); return ( ); } export default MyComponent; ```

இந்த எடுத்துக்காட்டில், Zustand ஸ்டோரில் ஏற்படும் மாற்றங்களுக்கு சந்தா செலுத்த useSyncExternalStore பயன்படுத்தப்படுகிறது. useStore.subscribe மற்றும் useStore.getState ஆகியவற்றை நேரடியாக ஹூக்கிற்கு அனுப்புவதை கவனியுங்கள், இது ஒருங்கிணைப்பை தடையற்றதாக மாற்றுகிறது.

2. மெமோயிசேஷன் மூலம் செயல்திறனை மேம்படுத்துதல்

ஒவ்வொரு ரெண்டரிலும் getSnapshot அழைக்கப்படுவதால், அது செயல்திறன் மிக்கதாக இருப்பதை உறுதி செய்வது முக்கியம். getSnapshot-க்குள் அதிக செலவாகும் கணக்கீடுகளைத் தவிர்க்கவும். தேவைப்பட்டால், useMemo அல்லது அது போன்ற நுட்பங்களைப் பயன்படுத்தி getSnapshot-இன் முடிவை மெமோயிஸ் செய்யவும்.

இந்த (சாத்தியமான சிக்கலான) எடுத்துக்காட்டைக் கவனியுங்கள்:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { data: [...Array(10000).keys()], // Large array listeners: [], subscribe(listener) { this.listeners.push(listener); return () => { this.listeners = this.listeners.filter((l) => l !== listener); }; }, setState(newData) { this.data = newData; this.listeners.forEach((listener) => listener()); }, getState() { return this.data; }, }; function ExpensiveComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => externalStore.getState().map(x => x * 2) // Expensive operation ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

இந்த எடுத்துக்காட்டில், getSnapshot (useSyncExternalStore-க்கு இரண்டாவது ஆர்குமென்டாக அனுப்பப்பட்ட இன்லைன் ஃபங்ஷன்) ஒரு பெரிய அரேயில் அதிக செலவாகும் map செயல்பாட்டைச் செய்கிறது. அடிப்படைத் தரவு மாறாவிட்டாலும், இந்தச் செயல்பாடு *ஒவ்வொரு* ரெண்டரிலும் இயக்கப்படும். இதை மேம்படுத்த, நாம் முடிவை மெமோயிஸ் செய்யலாம்:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { // ... (same as before) }; function OptimizedComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => { return useMemo(() => externalStore.getState().map(x => x * 2), [externalStore.getState()]); } ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

இப்போது, externalStore.getState() மாறும் போது மட்டுமே map செயல்பாடு செய்யப்படுகிறது. குறிப்பு: ஸ்டோர் அதே ஆப்ஜெக்டை மாற்றினால், நீங்கள் உண்மையில் `externalStore.getState()`-ஐ டீப் கம்பேர் செய்ய வேண்டும் அல்லது வேறு ஒரு உத்தியைப் பயன்படுத்த வேண்டும். இந்த எடுத்துக்காட்டு விளக்கத்திற்காக எளிமைப்படுத்தப்பட்டுள்ளது.

3. கன்கரண்ட் ரெண்டரிங்கைக் கையாளுதல்

useSyncExternalStore-இன் முதன்மை நன்மை React-இன் கன்கரண்ட் ரெண்டரிங் அம்சங்களுடன் அதன் இணக்கத்தன்மையே ஆகும். கன்கரண்ட் ரெண்டரிங், React-ஐ ஒரே நேரத்தில் UI-இன் பல பதிப்புகளைத் தயாரிக்க அனுமதிக்கிறது. ஒரு கன்கரண்ட் ரெண்டரின் போது வெளிப்புற ஸ்டோர் மாறும்போது, DOM-இல் மாற்றங்களைச் செய்யும்போது React எப்போதும் மிகவும் புதுப்பித்த தரவைப் பயன்படுத்துவதை useSyncExternalStore உறுதி செய்கிறது.

useSyncExternalStore இல்லாமல், காம்போனென்ட்கள் பழைய தரவுகளுடன் ரெண்டர் ஆகலாம், இது காட்சி முரண்பாடுகள் மற்றும் எதிர்பாராத நடத்தைக்கு வழிவகுக்கும். useSyncExternalStore-இன் getSnapshot முறை ஒத்திசைவானதாகவும் வேகமானதாகவும் வடிவமைக்கப்பட்டுள்ளது, இது ரெண்டரிங்கின் போது வெளிப்புற ஸ்டோர் மாறிவிட்டதா என்பதை React விரைவாக தீர்மானிக்க அனுமதிக்கிறது.

4. சர்வர்-சைட் ரெண்டரிங் (SSR) கருத்தில் கொள்ள வேண்டியவை

சர்வர்-சைட் ரெண்டரிங்குடன் useSyncExternalStore-ஐப் பயன்படுத்தும் போது, getServerSnapshot ஃபங்ஷனை வழங்குவது அவசியம். இந்த ஃபங்ஷன் சர்வரில் வெளிப்புற ஸ்டோரின் ஆரம்ப மதிப்பைப் பெறப் பயன்படுகிறது. அது இல்லாமல், React சர்வரில் getSnapshot-ஐப் பயன்படுத்த முயற்சிக்கும், இது வெளிப்புற ஸ்டோர் பிரவுசர்-குறிப்பிட்ட API-களை (எ.கா., localStorage) நம்பியிருந்தால் சாத்தியமில்லாமல் போகலாம்.

getServerSnapshot ஃபங்ஷன் ஒரு இயல்புநிலை மதிப்பைக் கொடுக்க வேண்டும் அல்லது சர்வர்-சைட் மூலத்திலிருந்து (எ.கா., குக்கீகள், டேட்டாபேஸ்) தரவைப் பெற வேண்டும். இது சர்வரில் ரெண்டர் செய்யப்பட்ட ஆரம்ப HTML சரியான தரவைக் கொண்டிருப்பதை உறுதி செய்கிறது.

5. பிழை கையாளுதல்

குறிப்பாக வெளிப்புற தரவு மூலங்களைக் கையாளும் போது, வலுவான பிழை கையாளுதல் முக்கியமானது. சாத்தியமான பிழைகளைக் கையாள getSnapshot மற்றும் getServerSnapshot ஃபங்ஷன்களை try...catch பிளாக்குகளில் இணைக்கவும். பிழைகளை முறையாகப் பதிவுசெய்து, பயன்பாடு செயலிழப்பதைத் தடுக்க மாற்று மதிப்புகளை வழங்கவும்.

6. மறுபயன்பாட்டிற்கான கஸ்டம் ஹூக்ஸ்

குறியீடு மறுபயன்பாட்டை ஊக்குவிக்க, useSyncExternalStore தர்க்கத்தை ஒரு கஸ்டம் ஹூக்கிற்குள் இணைக்கவும். இது பல காம்போனென்ட்களில் தர்க்கத்தைப் பகிர்வதை எளிதாக்குகிறது.

எடுத்துக்காட்டாக, localStorage-இல் ஒரு குறிப்பிட்ட கீ-யை அணுகுவதற்கான ஒரு கஸ்டம் ஹூக்கை உருவாக்குவோம்:

```javascript import { useSyncExternalStore } from 'react'; function useLocalStorage(key, defaultValue) { function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem(key) || defaultValue; } function getServerSnapshot() { return defaultValue; } const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const setValue = (newValue) => { localStorage.setItem(key, newValue); }; return [value, setValue]; } export default useLocalStorage; ```

இப்போது, நீங்கள் எந்தவொரு காம்போனென்டிலும் இந்த ஹூக்கை எளிதாகப் பயன்படுத்தலாம்:

```javascript import useLocalStorage from './useLocalStorage'; function MyComponent() { const [name, setName] = useLocalStorage('userName', 'Guest'); return ( ); } ```

சிறந்த நடைமுறைகள்

• getSnapshot-ஐ வேகமாக வைத்திருங்கள்: getSnapshot ஃபங்ஷனுக்குள் அதிக செலவாகும் கணக்கீடுகளைத் தவிர்க்கவும். தேவைப்பட்டால் முடிவை மெமோயிஸ் செய்யவும்.
• SSR-க்கு getServerSnapshot-ஐ வழங்கவும்: சர்வரில் ரெண்டர் செய்யப்பட்ட ஆரம்ப HTML சரியான தரவைக் கொண்டிருப்பதை உறுதி செய்யவும்.
• கஸ்டம் ஹூக்ஸ் பயன்படுத்தவும்: சிறந்த மறுபயன்பாடு மற்றும் பராமரிப்பிற்காக useSyncExternalStore தர்க்கத்தை கஸ்டம் ஹூக்ஸில் இணைக்கவும்.
• பிழைகளை நளினமாகக் கையாளவும்: getSnapshot மற்றும் getServerSnapshot-ஐ try...catch பிளாக்குகளில் இணைக்கவும்.
• சந்தாக்களைக் குறைக்கவும்: காம்போனென்டிற்கு உண்மையில் தேவைப்படும் வெளிப்புற ஸ்டோரின் பகுதிகளுக்கு மட்டுமே சந்தா செலுத்தவும். இது தேவையற்ற மறு-ரெண்டர்களைக் குறைக்கிறது.
• மாற்றுகளைக் கருத்தில் கொள்ளுங்கள்: useSyncExternalStore உண்மையிலேயே அவசியமானதா என்பதை மதிப்பீடு செய்யவும். எளிய நிகழ்வுகளுக்கு, பிற நிலை மேலாண்மை நுட்பங்கள் மிகவும் பொருத்தமானதாக இருக்கலாம்.

useSyncExternalStore-க்கு மாற்றுகள்

useSyncExternalStore ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், அது எப்போதும் சிறந்த தீர்வு அல்ல. இந்த மாற்றுகளைக் கருத்தில் கொள்ளுங்கள்:

• உள்ளமைந்த நிலை மேலாண்மை (useState, useReducer, Context API): தரவு React காம்போனென்ட் ட்ரீயுடன் இறுக்கமாக இணைக்கப்பட்டிருந்தால், இந்த உள்ளமைந்த விருப்பங்கள் பெரும்பாலும் போதுமானவை.
• React Query/SWR: தரவுப் பெறுதலுக்கு, இந்த நூலகங்கள் சிறந்த கேச்சிங், இன்வாலிடேஷன், மற்றும் பிழை கையாளும் திறன்களை வழங்குகின்றன.
• Zustand/Jotai/Valtio: இந்த மினிமலிஸ்ட் நிலை மேலாண்மை நூலகங்கள் பயன்பாட்டு நிலையை நிர்வகிக்க ஒரு எளிய மற்றும் திறமையான வழியை வழங்குகின்றன.
• Redux/MobX: குளோபல் ஸ்டேட் கொண்ட சிக்கலான பயன்பாடுகளுக்கு, Redux அல்லது MobX ஒரு சிறந்த தேர்வாக இருக்கலாம் (அவை அதிக பாய்லர்பிளேட்டை அறிமுகப்படுத்தினாலும்).

தேர்வு உங்கள் பயன்பாட்டின் குறிப்பிட்ட தேவைகளைப் பொறுத்தது.

முடிவுரை

useSyncExternalStore என்பது React-இன் கருவித்தொகுப்பிற்கு ஒரு மதிப்புமிக்க கூடுதலாகும், இது கன்கரண்ட் ரெண்டரிங்குடன் இணக்கத்தன்மையைப் பேணுகையில் வெளிப்புற நிலை மூலங்களுடன் தடையற்ற ஒருங்கிணைப்பை செயல்படுத்துகிறது. அதன் நோக்கம், செயல்படுத்தல் மற்றும் மேம்பட்ட பயன்பாட்டு நிகழ்வுகளைப் புரிந்துகொள்வதன் மூலம், பல்வேறு மூலங்களிலிருந்து வரும் தரவுகளுடன் திறம்பட தொடர்பு கொள்ளும் வலுவான மற்றும் செயல்திறன் மிக்க React பயன்பாடுகளை உருவாக்க இந்த ஹூக்கை நீங்கள் பயன்படுத்தலாம்.

useSyncExternalStore-ஐப் பயன்படுத்துவதற்கு முன்பு, செயல்திறனுக்கு முன்னுரிமை அளிக்கவும், பிழைகளை நளினமாகக் கையாளவும், மாற்றுத் தீர்வுகளைக் கருத்தில் கொள்ளவும் நினைவில் கொள்ளுங்கள். கவனமான திட்டமிடல் மற்றும் செயல்படுத்தலுடன், இந்த ஹூக் உங்கள் React பயன்பாடுகளின் நெகிழ்வுத்தன்மையையும் சக்தியையும் கணிசமாக மேம்படுத்தும்.

மேலும் ஆராய

• useSyncExternalStore-க்கான React ஆவணங்கள்
• பல்வேறு நிலை மேலாண்மை நூலகங்களுடன் எடுத்துக்காட்டுகள் (Zustand, Jotai, Valtio)
• useSyncExternalStore-ஐ மற்ற அணுகுமுறைகளுடன் ஒப்பிடும் செயல்திறன் அளவீடுகள்