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

நவீன ரியாக்ட் பயன்பாடுகளில், ஸ்டேட்டை திறம்பட நிர்வகிப்பது மிகவும் முக்கியமானது. ரியாக்ட் useState மற்றும் useReducer போன்ற உள்ளமைக்கப்பட்ட ஸ்டேட் மேலாண்மை தீர்வுகளை வழங்கினாலும், வெளிப்புற தரவு மூலங்கள் அல்லது மூன்றாம் தரப்பு ஸ்டேட் மேலாண்மை நூலகங்களுடன் ஒருங்கிணைப்பதற்கு ஒரு நுட்பமான அணுகுமுறை தேவைப்படுகிறது. இங்குதான் useSyncExternalStore வருகிறது.

useSyncExternalStore என்றால் என்ன?

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

• மூன்றாம் தரப்பு ஸ்டேட் மேலாண்மை நூலகங்கள்: Redux, Zustand, Jotai போன்றவை.
• உலாவி API-கள்: localStorage, IndexedDB போன்றவை.
• வெளிப்புற தரவு மூலங்கள்: சர்வரில் இருந்து அனுப்பப்படும் நிகழ்வுகள் (Server-sent events), WebSockets போன்றவை.

useSyncExternalStore வருவதற்கு முன்பு, வெளிப்புற ஸ்டோர்களை ஒத்திசைப்பது, குறிப்பாக ரியாக்ட்டின் ஒரேநேர ரெண்டரிங் அம்சங்களுடன், 'டேரிங்' (tearing) மற்றும் முரண்பாடுகளுக்கு வழிவகுத்தது. இந்த ஹூக், வெளிப்புற தரவை உங்கள் ரியாக்ட் காம்போனென்ட்களுடன் இணைக்க ஒரு தரப்படுத்தப்பட்ட மற்றும் செயல்திறன்மிக்க வழியை வழங்குவதன் மூலம் இந்த சிக்கல்களைத் தீர்க்கிறது.

useSyncExternalStore ஏன் பயன்படுத்த வேண்டும்? நன்மைகள் மற்றும் சிறப்பம்சங்கள்

useSyncExternalStore பயன்படுத்துவது பல முக்கிய நன்மைகளை வழங்குகிறது:

• ஒரேநேர செயலாக்கப் பாதுகாப்பு (Concurrency Safety): ஒரேநேர ரெண்டர்களின் போதும் உங்கள் காம்போனென்ட் எப்போதும் வெளிப்புற ஸ்டோரின் ஒரு சீரான காட்சியை காண்பிப்பதை உறுதி செய்கிறது. இது உங்கள் UI-இன் சில பகுதிகள் முரண்பாடான தரவைக் காண்பிக்கும் 'டேரிங்' சிக்கல்களைத் தடுக்கிறது.
• செயல்திறன்: செயல்திறனுக்காக மேம்படுத்தப்பட்டது, தேவையற்ற மறு-ரெண்டர்களைக் குறைக்கிறது. இது மாற்றங்களுக்கு திறமையாக சந்தா செலுத்தவும், தேவைப்படும்போது மட்டுமே காம்போனென்ட்டைப் புதுப்பிக்கவும் ரியாக்ட்டின் உள் வழிமுறைகளைப் பயன்படுத்துகிறது.
• தரப்படுத்தப்பட்ட API: அடிப்படைச் செயலாக்கம் எதுவாக இருந்தாலும், வெளிப்புற ஸ்டோர்களுடன் தொடர்புகொள்வதற்கு ஒரு சீரான மற்றும் கணிக்கக்கூடிய API-ஐ வழங்குகிறது.
• குறைக்கப்பட்ட Boilerplate குறியீடு: வெளிப்புற ஸ்டோர்களுடன் இணைக்கும் செயல்முறையை எளிதாக்குகிறது, நீங்கள் எழுத வேண்டிய தனிப்பயன் குறியீட்டின் அளவைக் குறைக்கிறது.
• இணக்கத்தன்மை: பரந்த அளவிலான வெளிப்புற தரவு மூலங்கள் மற்றும் ஸ்டேட் மேலாண்மை நூலகங்களுடன் தடையின்றி செயல்படுகிறது.

useSyncExternalStore எப்படி வேலை செய்கிறது: ஒரு ஆழமான பார்வை

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

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

இந்த ஆர்குமென்ட்கள் எப்படி ஒன்றாக வேலை செய்கின்றன என்பதற்கான ஒரு விளக்கம் இங்கே:

1. காம்போனென்ட் மவுண்ட் ஆகும்போது, useSyncExternalStore ஒரு கால்பேக்கைப் பதிவுசெய்ய subscribe ஃபங்ஷனை அழைக்கிறது.
2. வெளிப்புற ஸ்டோர் மாறும்போது, அது subscribe மூலம் பதிவுசெய்யப்பட்ட கால்பேக்கை செயல்படுத்துகிறது.
3. அந்த கால்பேக், காம்போனென்ட் மறு-ரெண்டர் செய்யப்பட வேண்டும் என்று ரியாக்ட்டிடம் கூறுகிறது.
4. ரெண்டரின் போது, useSyncExternalStore வெளிப்புற ஸ்டோரிலிருந்து சமீபத்திய தரவைப் பெற getSnapshot-ஐ அழைக்கிறது.
5. ரியாக்ட் தற்போதைய ஸ்னாப்ஷாட்டை முந்தைய ஸ்னாப்ஷாட் உடன் ஒப்பிடுகிறது. அவை வேறுபட்டால், காம்போனென்ட் புதிய தரவுடன் புதுப்பிக்கப்படுகிறது.
6. காம்போனென்ட் அன்மவுண்ட் ஆகும்போது, மெமரி லீக்குகளைத் தடுக்க subscribe மூலம் திரும்ப அனுப்பப்பட்ட அன்சப்ஸ்கிரைப் ஃபங்ஷன் அழைக்கப்படுகிறது.

அடிப்படைச் செயலாக்க உதாரணம்: localStorage உடன் ஒருங்கிணைத்தல்

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

            import { useSyncExternalStore } from 'react';

function getLocalStorageItem(key: string): string | null {
  try {
    return localStorage.getItem(key);
  } catch (error) {
    console.error("Error accessing localStorage:", error);
    return null; // Handle potential errors like `localStorage` being unavailable.
  }
}

function useLocalStorage(key: string): [string | null, (value: string) => void] {
  const subscribe = (callback: () => void) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const getSnapshot = () => getLocalStorageItem(key);

  const serverSnapshot = () => null; // Or a default value if appropriate for your SSR setup

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  const setValue = (newValue: string) => {
    try {
      localStorage.setItem(key, newValue);
      // Dispatch a storage event on the current window to trigger updates in other tabs.
      window.dispatchEvent(new StorageEvent('storage', {
        key: key,
        newValue: newValue,
        storageArea: localStorage,
      } as StorageEventInit));
    } catch (error) {
      console.error("Error setting localStorage:", error);
    }
  };

  return [value, setValue];
}

function MyComponent() {
  const [name, setName] = useLocalStorage('name');

  return (
    <div>
      <p>Hello, {name || 'World'}</p>
      <input
        type="text"
        value={name || ''}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default MyComponent;
            

              
                Copy
              
            
          

விளக்கம்:

• getLocalStorageItem: சாத்தியமான பிழைகளைக் கையாண்டு, localStorage-இலிருந்து மதிப்பை பாதுகாப்பாகப் பெறுவதற்கான ஒரு உதவி ஃபங்ஷன்.
• useLocalStorage: useSyncExternalStore-ஐப் பயன்படுத்தி localStorage உடன் தொடர்புகொள்வதற்கான லாஜிக்கை உள்ளடக்கிய ஒரு கஸ்டம் ஹூக்.
• subscribe: 'storage' நிகழ்வைக் கேட்கிறது, இது மற்றொரு டேப் அல்லது விண்டோவில் localStorage மாற்றப்படும்போது தூண்டப்படுகிறது. முக்கியமாக, *அதே* விண்டோவில் புதுப்பிப்புகளைச் சரியாகத் தூண்டுவதற்காக, ஒரு புதிய மதிப்பை அமைத்த பிறகு நாம் ஒரு ஸ்டோரேஜ் நிகழ்வை அனுப்புகிறோம்.
• getSnapshot: localStorage-இலிருந்து தற்போதைய மதிப்பைத் தருகிறது.
• serverSnapshot: சர்வர்-சைட் ரெண்டரிங்கிற்காக `null` (அல்லது ஒரு இயல்புநிலை மதிப்பை) தருகிறது.
• setValue: localStorage-இல் மதிப்பை புதுப்பித்து, மற்ற டேப்களுக்கு சிக்னல் அனுப்ப ஒரு ஸ்டோரேஜ் நிகழ்வை அனுப்புகிறது.
• MyComponent: ஒரு பெயரை காண்பிக்கவும் புதுப்பிக்கவும் useLocalStorage ஹூக்கைப் பயன்படுத்தும் ஒரு எளிய காம்போனென்ட்.

localStorage-க்கான முக்கியக் குறிப்புகள்:

• பிழை கையாளுதல்: localStorage முடக்கப்பட்டிருக்கும்போது அல்லது கிடைக்காதபோது (எ.கா., பிரைவேட் பிரவுசிங் மோடில்) போன்ற சாத்தியமான பிழைகளைக் கையாள, எப்போதும் localStorage அணுகலை try...catch பிளாக்குகளில் வைக்கவும்.
• ஸ்டோரேஜ் நிகழ்வுகள்: 'storage' நிகழ்வு, அதே விண்டோவில் அல்லாமல் *மற்றொரு* டேப் அல்லது விண்டோவில் localStorage மாற்றப்படும்போது மட்டுமே தூண்டப்படுகிறது. எனவே, ஒரு மதிப்பை அமைத்த பிறகு நாம் கைமுறையாக ஒரு புதிய StorageEvent-ஐ அனுப்புகிறோம்.
• தரவு சீரியலைசேஷன்: localStorage ஸ்டிரிங்குகளை மட்டுமே சேமிக்கிறது. சிக்கலான தரவு அமைப்புகளை JSON.stringify மற்றும் JSON.parse பயன்படுத்தி சீரியலைஸ் மற்றும் டீசீரியலைஸ் செய்ய வேண்டியிருக்கலாம்.
• பாதுகாப்பு: localStorage-இல் நீங்கள் சேமிக்கும் தரவைப் பற்றி கவனமாக இருங்கள், ஏனெனில் அது அதே டொமைனில் உள்ள ஜாவாஸ்கிரிப்ட் குறியீட்டிற்கு அணுகக்கூடியது. முக்கியமான தகவல்களை localStorage-இல் சேமிக்கக்கூடாது.

மேம்பட்ட பயன்பாட்டு வழக்குகள் மற்றும் எடுத்துக்காட்டுகள்

1. Zustand (அல்லது பிற ஸ்டேட் மேலாண்மை நூலகம்) உடன் ஒருங்கிணைத்தல்

Zustand போன்ற ஒரு குளோபல் ஸ்டேட் மேலாண்மை நூலகத்துடன் useSyncExternalStore-ஐ ஒருங்கிணைப்பது ஒரு பொதுவான பயன்பாட்டு வழக்காகும். இதோ ஒரு உதாரணம்:

            import { useSyncExternalStore } from 'react';
import { create } from 'zustand';

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useStore = create<BearState>((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by }))
}))

function BearCounter() {
  const bears = useSyncExternalStore(
    useStore.subscribe,
    useStore.getState,
    () => ({ bears: 0, increase: () => {} }) // Server snapshot, provide default state
  ).bears
  return <h1>{bears} bears around here!</h1>
}

function Controls() {
  const increase = useStore(state => state.increase)
  return (<button onClick={() => increase(1)}>one bear</button>)
}

export { BearCounter, Controls }
            

              
                Copy
              
            
          

விளக்கம்:

• குளோபல் ஸ்டேட் மேலாண்மைக்கு நாம் Zustand-ஐப் பயன்படுத்துகிறோம்
• useStore.subscribe: இந்த ஃபங்ஷன் Zustand ஸ்டோருக்கு சந்தா செலுத்துகிறது மற்றும் ஸ்டோரின் ஸ்டேட் மாறும்போது மறு-ரெண்டர்களைத் தூண்டும்.
• useStore.getState: இந்த ஃபங்ஷன் Zustand ஸ்டோரின் தற்போதைய ஸ்டேட்டைத் தருகிறது.
• மூன்றாவது பாராமீட்டர் சர்வர்-சைட் ரெண்டரிங்கிற்காக (SSR) ஒரு இயல்புநிலை ஸ்டேட்டை வழங்குகிறது, கிளையன்ட்-சைட் ஜாவாஸ்கிரிப்ட் கட்டுப்பாட்டை எடுப்பதற்கு முன்பு காம்போனென்ட் சர்வரில் சரியாக ரெண்டர் ஆவதை உறுதி செய்கிறது.
• காம்போனென்ட் useSyncExternalStore-ஐப் பயன்படுத்தி கரடிகளின் எண்ணிக்கையைப் பெற்று அதைக் காட்டுகிறது.
• Controls காம்போனென்ட் Zustand செட்டரை எப்படிப் பயன்படுத்துவது என்பதைக் காட்டுகிறது.

2. சர்வரில் இருந்து அனுப்பப்படும் நிகழ்வுகள் (SSE) உடன் ஒருங்கிணைத்தல்

சர்வரில் இருந்து அனுப்பப்படும் நிகழ்வுகளை (SSE) பயன்படுத்தி ஒரு சர்வரிலிருந்து வரும் நிகழ்நேர தரவின் அடிப்படையில் காம்போனென்ட்களை திறமையாக புதுப்பிக்க useSyncExternalStore-ஐப் பயன்படுத்தலாம்.

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

function useSSE(url: string) {
  const [data, setData] = useState(null);
  const [eventSource, setEventSource] = useState(null);

  useEffect(() => {
    const newEventSource = new EventSource(url);
    setEventSource(newEventSource);

    newEventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data);
        setData(parsedData);
      } catch (error) {
        console.error("Error parsing SSE data:", error);
      }
    };

    newEventSource.onerror = (error) => {
      console.error("SSE error:", error);
    };

    return () => {
      newEventSource.close();
      setEventSource(null);
    };
  }, [url]);

  const subscribe = useCallback((callback: () => void) => {
    if (eventSource) {
      eventSource.addEventListener('message', callback);
    }
    return () => {
      if (eventSource) {
        eventSource.removeEventListener('message', callback);
      }
    };
  }, [eventSource]);

  const getSnapshot = useCallback(() => data, [data]);

  const serverSnapshot = useCallback(() => null, []);

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return value;
}

function RealTimeDataComponent() {
  const realTimeData = useSSE('/api/sse'); // Replace with your SSE endpoint

  if (!realTimeData) {
    return <p>Loading...</p>;
  }

  return <div><p>Real-time Data: {JSON.stringify(realTimeData)}</p></div>;
}

export default RealTimeDataComponent;
            

              
                Copy
              
            
          

விளக்கம்:

• useSSE: கொடுக்கப்பட்ட URL-க்கு ஒரு SSE இணைப்பை உருவாக்கும் ஒரு கஸ்டம் ஹூக்.
• subscribe: சர்வரில் இருந்து வரும் புதிய மெசேஜ்களைப் பற்றி அறிவிக்க EventSource ஆப்ஜெக்ட்டில் ஒரு நிகழ்வு லிஸனரைச் சேர்க்கிறது. ஒவ்வொரு ரெண்டரிலும் கால்பேக் ஃபங்ஷன் மீண்டும் உருவாக்கப்படாமல் இருப்பதை உறுதிசெய்ய useCallback-ஐப் பயன்படுத்துகிறது.
• getSnapshot: SSE ஸ்ட்ரீமிலிருந்து மிக சமீபத்தில் பெறப்பட்ட தரவைத் தருகிறது.
• serverSnapshot: சர்வர்-சைட் ரெண்டரிங்கிற்காக `null`-ஐத் தருகிறது.
• RealTimeDataComponent: நிகழ்நேர தரவைக் காண்பிக்க useSSE ஹூக்கைப் பயன்படுத்தும் ஒரு காம்போனென்ட்.

3. IndexedDB உடன் ஒருங்கிணைத்தல்

useSyncExternalStore-ஐப் பயன்படுத்தி IndexedDB-இல் சேமிக்கப்பட்ட தரவுடன் ரியாக்ட் காம்போனென்ட்களை ஒத்திசைக்கவும்.

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

interface IDBData {
  id: number;
  name: string;
}

async function getAllData(): Promise {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDataBase', 1); // Replace with your database name and version

    request.onerror = (event) => {
      console.error("IndexedDB open error:", event);
      reject(event);
    };

    request.onsuccess = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      const transaction = db.transaction(['myDataStore'], 'readonly'); // Replace with your store name
      const objectStore = transaction.objectStore('myDataStore');
      const getAllRequest = objectStore.getAll();

      getAllRequest.onsuccess = (event) => {
        const data = (event.target as IDBRequest).result as IDBData[];
        resolve(data);
      };

      getAllRequest.onerror = (event) => {
        console.error("IndexedDB getAll error:", event);
        reject(event);
      };
    };

    request.onupgradeneeded = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      db.createObjectStore('myDataStore', { keyPath: 'id' });
    };
  });
}

function useIndexedDBData(): IDBData[] | null {
  const [data, setData] = useState(null);
  const [dbInitialized, setDbInitialized] = useState(false);

  useEffect(() => {
    const initDB = async () => {
        try{
            await getAllData();
            setDbInitialized(true);
        } catch (e) {
            console.error("IndexedDB initialization failed", e);
        }
    }

    initDB();
  }, []);


  const subscribe = useCallback((callback: () => void) => {
    // Debounce the callback to prevent excessive re-renders.
    let timeoutId: NodeJS.Timeout;
    const debouncedCallback = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(callback, 50); // Adjust the debounce delay as needed
    };

    const handleVisibilityChange = () => {
      // Re-fetch data when the tab becomes visible again
      if (document.visibilityState === 'visible') {
        debouncedCallback();
      }
    };

    window.addEventListener('focus', debouncedCallback);
    document.addEventListener('visibilitychange', handleVisibilityChange);


    return () => {
      window.removeEventListener('focus', debouncedCallback);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      clearTimeout(timeoutId);
    };
  }, []);

  const getSnapshot = useCallback(() => {
    // Fetch the latest data from IndexedDB every time getSnapshot is called
    getAllData().then(newData => setData(newData));
    return data;
  }, [data]);

  const serverSnapshot = useCallback(() => null, []);

  return useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);
}

function IndexedDBComponent() {
  const data = useIndexedDBData();

  if (!data) {
    return <p>Loading data from IndexedDB...</p>;
  }

  return (
    <div>
      <h2>Data from IndexedDB:</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name} (ID: {item.id})</li>
        ))}
      </ul>
    </div>
  );
}

export default IndexedDBComponent;
            

              
                Copy
              
            
          

விளக்கம்:

• getAllData: IndexedDB ஸ்டோரிலிருந்து எல்லா தரவையும் பெறும் ஒரு அசிங்க்ரோனஸ் ஃபங்ஷன்.
• useIndexedDBData: IndexedDB-இல் ஏற்படும் மாற்றங்களுக்கு சந்தா செலுத்த useSyncExternalStore-ஐப் பயன்படுத்தும் ஒரு கஸ்டம் ஹூக்.
• subscribe: IndexedDB-இலிருந்து தரவைப் புதுப்பிக்க விசிபிலிட்டி மற்றும் ஃபோகஸ் மாற்றங்களுக்கான லிஸனர்களை அமைக்கிறது மற்றும் அதிகப்படியான புதுப்பிப்புகளைத் தவிர்க்க ஒரு டிபவுன்ஸ் ஃபங்ஷனைப் பயன்படுத்துகிறது.
• getSnapshot: `getAllData()`-ஐ அழைத்து தற்போதைய ஸ்னாப்ஷாட்டைப் பெற்று, பின்னர் ஸ்டேட்டிலிருந்து `data`-வைத் தருகிறது.
• serverSnapshot: சர்வர்-சைட் ரெண்டரிங்கிற்காக `null`-ஐத் தருகிறது.
• IndexedDBComponent: IndexedDB-இலிருந்து வரும் தரவைக் காண்பிக்கும் ஒரு காம்போனென்ட்.

IndexedDB-க்கான முக்கியக் குறிப்புகள்:

• அசிங்க்ரோனஸ் செயல்பாடுகள்: IndexedDB உடனான தொடர்புகள் அசிங்க்ரோனஸ் ஆகும், எனவே தரவு மீட்டெடுப்பு மற்றும் புதுப்பிப்புகளின் அசிங்க்ரோனஸ் தன்மையை நீங்கள் கவனமாகக் கையாள வேண்டும்.
• பிழை கையாளுதல்: தரவுத்தளம் காணப்படவில்லை அல்லது அனுமதிப் பிழைகள் போன்ற தரவுத்தள அணுகலுடன் ஏற்படக்கூடிய சாத்தியமான சிக்கல்களைச் சமாளிக்க வலுவான பிழை கையாளுதலைச் செயல்படுத்தவும்.
• தரவுத்தள பதிப்பைக் கையாளுதல்: உங்கள் பயன்பாடு வளரும்போது தரவு இணக்கத்தன்மையை உறுதிசெய்ய onupgradeneeded நிகழ்வைப் பயன்படுத்தி தரவுத்தள பதிப்புகளைக் கவனமாக நிர்வகிக்கவும்.
• செயல்திறன்: IndexedDB செயல்பாடுகள் ஒப்பீட்டளவில் மெதுவாக இருக்கலாம், குறிப்பாக பெரிய தரவுத்தொகுப்புகளுக்கு. செயல்திறனை மேம்படுத்த வினவல்கள் மற்றும் இன்டெக்சிங்கை மேம்படுத்தவும்.

செயல்திறன் குறித்த குறிப்புகள்

useSyncExternalStore செயல்திறனுக்காக மேம்படுத்தப்பட்டிருந்தாலும், மனதில் கொள்ள வேண்டிய சில விஷயங்கள் உள்ளன:

• ஸ்னாப்ஷாட் மாற்றங்களைக் குறைத்தல்: தரவு உண்மையில் மாறியிருக்கும்போது மட்டுமே getSnapshot ஃபங்ஷன் ஒரு புதிய ஸ்னாப்ஷாட்டைத் தருவதை உறுதிப்படுத்தவும். தேவையற்ற புதிய ஆப்ஜெக்ட்கள் அல்லது அரேக்களை உருவாக்குவதைத் தவிர்க்கவும். ஸ்னாப்ஷாட் உருவாக்கத்தை மேம்படுத்த மெமோயிசேஷன் நுட்பங்களைப் பயன்படுத்தவும்.
• தொகுப்பு புதுப்பிப்புகள்: முடிந்தால், மறு-ரெண்டர்களின் எண்ணிக்கையைக் குறைக்க வெளிப்புற ஸ்டோருக்கான புதுப்பிப்புகளைத் தொகுப்பாகச் செய்யவும். எடுத்துக்காட்டாக, ஸ்டோரில் பல பண்புகளை நீங்கள் புதுப்பித்தால், அவை அனைத்தையும் ஒரே பரிவர்த்தனையில் புதுப்பிக்க முயற்சிக்கவும்.
• Debouncing/Throttling: வெளிப்புற ஸ்டோர் அடிக்கடி மாறினால், ரியாக்ட் காம்போனென்ட்டுக்கான புதுப்பிப்புகளை டிபவுன்ஸ் அல்லது த்ராட்டில் செய்வதைக் கருத்தில் கொள்ளவும். இது அதிகப்படியான மறு-ரெண்டர்களைத் தடுத்து செயல்திறனை மேம்படுத்தும். உலாவி விண்டோ அளவை மாற்றுவது போன்ற நிலையற்ற ஸ்டோர்களுக்கு இது மிகவும் பயனுள்ளது.
• மேலோட்டமான ஒப்பீடு (Shallow Comparison): ரியாக்ட் மேலோட்டமான ஒப்பீட்டைப் பயன்படுத்தி தரவு மாறிவிட்டதா என்பதை விரைவாகத் தீர்மானிக்க, getSnapshot-இல் பிரிமிடிவ் மதிப்புகள் அல்லது மாற்ற முடியாத ஆப்ஜெக்ட்களைத் தருவதை உறுதிப்படுத்தவும்.
• நிபந்தனைக்குட்பட்ட புதுப்பிப்புகள்: வெளிப்புற ஸ்டோர் அடிக்கடி மாறும்போது, உங்கள் காம்போனென்ட் சில மாற்றங்களுக்கு மட்டுமே பதிலளிக்க வேண்டிய சந்தர்ப்பங்களில், தேவையற்ற மறு-ரெண்டர்களைத் தவிர்க்க `subscribe` ஃபங்ஷனுக்குள் நிபந்தனைக்குட்பட்ட புதுப்பிப்புகளைச் செயல்படுத்துவதைக் கருத்தில் கொள்ளவும்.

பொதுவான தவறுகள் மற்றும் சரிசெய்தல்

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

முடிவுரை

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