React useSyncExternalStore: എക്സ്റ്റേണൽ സ്റ്റോർ സിൻക്രൊണൈസേഷനിൽ വൈദഗ്ദ്ധ്യം നേടാം

ആധുനിക റിയാക്ട് ആപ്ലിക്കേഷനുകളിൽ, സ്റ്റേറ്റ് ഫലപ്രദമായി കൈകാര്യം ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. useState, useReducer പോലുള്ള സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് സൊല്യൂഷനുകൾ റിയാക്ട് നൽകുന്നുണ്ടെങ്കിലും, എക്സ്റ്റേണൽ ഡാറ്റാ സോഴ്സുകളുമായോ തേർഡ്-പാർട്ടി സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് ലൈബ്രറികളുമായോ സംയോജിപ്പിക്കുന്നതിന് കൂടുതൽ സങ്കീർണ്ണമായ ഒരു സമീപനം ആവശ്യമാണ്. ഇവിടെയാണ് useSyncExternalStore പ്രസക്തമാകുന്നത്.

എന്താണ് useSyncExternalStore?

റിയാക്ട് 18-ൽ അവതരിപ്പിച്ച ഒരു ഹുക്കാണ് useSyncExternalStore. ഇത് കൺകറൻ്റ് റെൻഡറിംഗുമായി പൊരുത്തപ്പെടുന്ന രീതിയിൽ എക്സ്റ്റേണൽ ഡാറ്റാ സോഴ്സുകളിലേക്ക് സബ്സ്ക്രൈബ് ചെയ്യാനും അതിൽ നിന്ന് ഡാറ്റ വായിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു. റിയാക്ട് നേരിട്ട് നിയന്ത്രിക്കാത്ത ഡാറ്റ കൈകാര്യം ചെയ്യുമ്പോൾ ഇത് വളരെ പ്രധാനമാണ്, ഉദാഹരണത്തിന്:

• തേർഡ്-പാർട്ടി സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് ലൈബ്രറികൾ: Redux, Zustand, Jotai, തുടങ്ങിയവ.
• ബ്രൗസർ API-കൾ: localStorage, IndexedDB, തുടങ്ങിയവ.
• എക്സ്റ്റേണൽ ഡാറ്റാ സോഴ്സുകൾ: Server-sent events, WebSockets, തുടങ്ങിയവ.

useSyncExternalStore-ന് മുമ്പ്, എക്സ്റ്റേണൽ സ്റ്റോറുകൾ സിൻക്രൊണൈസ് ചെയ്യുന്നത്, പ്രത്യേകിച്ച് റിയാക്ടിന്റെ കൺകറൻ്റ് റെൻഡറിംഗ് ഫീച്ചറുകൾ ഉപയോഗിക്കുമ്പോൾ, 'ടയറിംഗ്' (tearing) പോലുള്ള പൊരുത്തക്കേടുകൾക്ക് കാരണമാകുമായിരുന്നു. ഈ ഹുക്ക്, എക്സ്റ്റേണൽ ഡാറ്റയെ നിങ്ങളുടെ റിയാക്ട് കമ്പോണൻ്റുകളുമായി ബന്ധിപ്പിക്കുന്നതിന് ഒരു സ്റ്റാൻഡേർഡ്, മികച്ച പ്രകടനക്ഷമതയുള്ള മാർഗ്ഗം നൽകിക്കൊണ്ട് ഈ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നു.

എന്തിന് useSyncExternalStore ഉപയോഗിക്കണം? പ്രയോജനങ്ങളും നേട്ടങ്ങളും

useSyncExternalStore ഉപയോഗിക്കുന്നത് നിരവധി പ്രധാന നേട്ടങ്ങൾ നൽകുന്നു:

• കൺകറൻസി സുരക്ഷ (Concurrency Safety): കൺകറൻ്റ് റെൻഡറിംഗ് സമയത്തുപോലും, നിങ്ങളുടെ കമ്പോണൻ്റ് എപ്പോഴും എക്സ്റ്റേണൽ സ്റ്റോറിന്റെ സ്ഥിരമായ ഒരു കാഴ്ച പ്രദർശിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. ഇത് നിങ്ങളുടെ UI-യുടെ ഭാഗങ്ങളിൽ പൊരുത്തമില്ലാത്ത ഡാറ്റ കാണിക്കുന്ന 'ടയറിംഗ്' പ്രശ്നങ്ങൾ തടയുന്നു.
• പ്രകടനക്ഷമത (Performance): അനാവശ്യമായ റീ-റെൻഡറുകൾ കുറച്ചുകൊണ്ട് പ്രകടനത്തിനായി ഇത് ഒപ്റ്റിമൈസ് ചെയ്തിരിക്കുന്നു. മാറ്റങ്ങൾക്കായി കാര്യക്ഷമമായി സബ്സ്ക്രൈബ് ചെയ്യാനും ആവശ്യമുള്ളപ്പോൾ മാത്രം കമ്പോണൻ്റ് അപ്‌ഡേറ്റ് ചെയ്യാനും റിയാക്ടിന്റെ ആന്തരിക സംവിധാനങ്ങൾ ഇത് പ്രയോജനപ്പെടുത്തുന്നു.
• സ്റ്റാൻഡേർഡ് API: ഏത് ലൈബ്രറി ഉപയോഗിച്ചാലും, എക്സ്റ്റേണൽ സ്റ്റോറുകളുമായി സംവദിക്കാൻ സ്ഥിരതയുള്ളതും പ്രവചിക്കാവുന്നതുമായ ഒരു API നൽകുന്നു.
• കുറഞ്ഞ ബോയിലർപ്ലേറ്റ്: എക്സ്റ്റേണൽ സ്റ്റോറുകളിലേക്ക് കണക്റ്റുചെയ്യുന്ന പ്രക്രിയ ലളിതമാക്കുന്നു, ഇത് നിങ്ങൾ എഴുതേണ്ട കസ്റ്റം കോഡിന്റെ അളവ് കുറയ്ക്കുന്നു.
• പൊരുത്തപ്പെടൽ (Compatibility): വിപുലമായ എക്സ്റ്റേണൽ ഡാറ്റാ സോഴ്സുകളുമായും സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് ലൈബ്രറികളുമായും ഇത് തടസ്സങ്ങളില്ലാതെ പ്രവർത്തിക്കുന്നു.

useSyncExternalStore എങ്ങനെ പ്രവർത്തിക്കുന്നു: ഒരു ആഴത്തിലുള്ള പഠനം

useSyncExternalStore ഹുക്ക് മൂന്ന് ആർഗ്യുമെൻ്റുകൾ എടുക്കുന്നു:

1. subscribe(callback: () => void): () => void: എക്സ്റ്റേണൽ സ്റ്റോർ മാറുമ്പോൾ അറിയിപ്പ് ലഭിക്കുന്നതിനായി ഒരു കോൾബാക്ക് രജിസ്റ്റർ ചെയ്യുന്ന ഫംഗ്ഷൻ. അൺസബ്സ്ക്രൈബ് ചെയ്യുന്നതിനുള്ള ഒരു ഫംഗ്ഷൻ ഇത് തിരികെ നൽകണം. സ്റ്റോറിൽ പുതിയ ഡാറ്റയുണ്ടെന്ന് റിയാക്ട് മനസ്സിലാക്കുന്നത് ഇങ്ങനെയാണ്.
2. getSnapshot(): T: എക്സ്റ്റേണൽ സ്റ്റോറിൽ നിന്ന് ഡാറ്റയുടെ ഒരു സ്നാപ്പ്ഷോട്ട് നൽകുന്ന ഫംഗ്ഷൻ. ഡാറ്റ മാറിയിട്ടുണ്ടോ എന്ന് നിർണ്ണയിക്കാൻ റിയാക്ടിന് ഉപയോഗിക്കാൻ കഴിയുന്ന ലളിതവും മാറ്റാനാവാത്തതുമായ (immutable) ഒരു മൂല്യമായിരിക്കണം ഈ സ്നാപ്പ്ഷോട്ട്.
3. getServerSnapshot?(): T (ഓപ്ഷണൽ): സെർവറിലെ ഡാറ്റയുടെ പ്രാരംഭ സ്നാപ്പ്ഷോട്ട് നൽകുന്ന ഒരു ഫംഗ്ഷൻ. സെർവറും ക്ലയിൻ്റും തമ്മിലുള്ള സ്ഥിരത ഉറപ്പാക്കാൻ സെർവർ-സൈഡ് റെൻഡറിംഗിനായി (SSR) ഇത് ഉപയോഗിക്കുന്നു. ഇത് നൽകിയിട്ടില്ലെങ്കിൽ, സെർവർ റെൻഡറിംഗ് സമയത്ത് റിയാക്ട് getSnapshot() ഉപയോഗിക്കും, ഇത് എല്ലാ സാഹചര്യങ്ങളിലും അനുയോജ്യമാകണമെന്നില്ല.

ഈ ആർഗ്യുമെൻ്റുകൾ എങ്ങനെ ഒരുമിച്ച് പ്രവർത്തിക്കുന്നു എന്നതിൻ്റെ ഒരു വിവരണം താഴെ നൽകുന്നു:

1. കമ്പോണൻ്റ് മൗണ്ട് ചെയ്യുമ്പോൾ, useSyncExternalStore ഒരു കോൾബാക്ക് രജിസ്റ്റർ ചെയ്യുന്നതിനായി subscribe ഫംഗ്ഷനെ വിളിക്കുന്നു.
2. എക്സ്റ്റേണൽ സ്റ്റോർ മാറുമ്പോൾ, അത് subscribe വഴി രജിസ്റ്റർ ചെയ്ത കോൾബാക്കിനെ പ്രവർത്തനക്ഷമമാക്കുന്നു.
3. കമ്പോണൻ്റ് റീ-റെൻഡർ ചെയ്യേണ്ടതുണ്ടെന്ന് കോൾബാക്ക് റിയാക്ടിനോട് പറയുന്നു.
4. റെൻഡറിംഗ് സമയത്ത്, എക്സ്റ്റേണൽ സ്റ്റോറിൽ നിന്ന് ഏറ്റവും പുതിയ ഡാറ്റ ലഭിക്കുന്നതിന് useSyncExternalStore, getSnapshot-നെ വിളിക്കുന്നു.
5. റിയാക്ട് നിലവിലെ സ്നാപ്പ്ഷോട്ട് മുൻ സ്നാപ്പ്ഷോട്ടുമായി താരതമ്യം ചെയ്യുന്നു. അവ വ്യത്യസ്തമാണെങ്കിൽ, കമ്പോണൻ്റ് പുതിയ ഡാറ്റ ഉപയോഗിച്ച് അപ്ഡേറ്റ് ചെയ്യപ്പെടുന്നു.
6. കമ്പോണൻ്റ് അൺമൗണ്ട് ചെയ്യുമ്പോൾ, മെമ്മറി ലീക്കുകൾ തടയുന്നതിനായി subscribe തിരികെ നൽകിയ അൺസബ്സ്ക്രൈബ് ഫംഗ്ഷൻ വിളിക്കപ്പെടുന്നു.

അടിസ്ഥാനപരമായ ഒരു ഉദാഹരണം: localStorage-മായി സംയോജിപ്പിക്കൽ

localStorage-ലേക്ക് ഒരു മൂല്യം വായിക്കുകയും എഴുതുകയും ചെയ്യുന്ന ഒരു ലളിതമായ ഉദാഹരണത്തിലൂടെ useSyncExternalStore എങ്ങനെ ഉപയോഗിക്കാമെന്ന് നോക്കാം.

            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: മറ്റൊരു ടാബിലോ വിൻഡോയിലോ localStorage മാറ്റം വരുത്തുമ്പോൾ ട്രിഗർ ചെയ്യപ്പെടുന്ന 'storage' ഇവൻ്റിനായി ഇത് കാത്തിരിക്കുന്നു. പ്രധാനമായി, *ഒരേ* വിൻഡോയിൽ അപ്‌ഡേറ്റുകൾ ശരിയായി ട്രിഗർ ചെയ്യുന്നതിനായി ഒരു പുതിയ മൂല്യം സെറ്റ് ചെയ്തതിന് ശേഷം ഞങ്ങൾ ഒരു സ്റ്റോറേജ് ഇവൻ്റ് ഡിസ്പാച്ച് ചെയ്യുന്നു.
• 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 ഫംഗ്ഷൻ ഒരു പുതിയ സ്നാപ്പ്ഷോട്ട് നൽകുന്നുവെന്ന് ഉറപ്പാക്കുക. അനാവശ്യമായി പുതിയ ഒബ്ജക്റ്റുകളോ അറേകളോ ഉണ്ടാക്കുന്നത് ഒഴിവാക്കുക. സ്നാപ്പ്ഷോട്ട് ഉണ്ടാക്കുന്നത് ഒപ്റ്റിമൈസ് ചെയ്യാൻ മെമ്മോയിസേഷൻ പോലുള്ള ടെക്നിക്കുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.
• ബാച്ച് അപ്‌ഡേറ്റുകൾ: സാധ്യമെങ്കിൽ, റീ-റെൻഡറുകളുടെ എണ്ണം കുറയ്ക്കുന്നതിന് എക്സ്റ്റേണൽ സ്റ്റോറിലേക്കുള്ള അപ്‌ഡേറ്റുകൾ ബാച്ച് ചെയ്യുക. ഉദാഹരണത്തിന്, നിങ്ങൾ സ്റ്റോറിലെ ഒന്നിലധികം പ്രോപ്പർട്ടികൾ അപ്‌ഡേറ്റ് ചെയ്യുകയാണെങ്കിൽ, അവയെല്ലാം ഒരൊറ്റ ട്രാൻസാക്ഷനിൽ അപ്‌ഡേറ്റ് ചെയ്യാൻ ശ്രമിക്കുക.
• ഡിബൗൺസിംഗ്/ത്രോട്ട്ലിംഗ്: എക്സ്റ്റേണൽ സ്റ്റോർ കൂടെക്കൂടെ മാറുന്നുണ്ടെങ്കിൽ, റിയാക്ട് കമ്പോണൻ്റിലേക്കുള്ള അപ്‌ഡേറ്റുകൾ ഡിബൗൺസ് ചെയ്യുകയോ ത്രോട്ടിൽ ചെയ്യുകയോ ചെയ്യുന്നത് പരിഗണിക്കുക. ഇത് അമിതമായ റീ-റെൻഡറുകൾ തടയാനും പ്രകടനം മെച്ചപ്പെടുത്താനും സഹായിക്കും. ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുന്നത് പോലുള്ള വേഗത്തിൽ മാറുന്ന സ്റ്റോറുകളിൽ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.
• ഷാലോ കംപാരിസൺ: getSnapshot-ൽ പ്രിമിറ്റീവ് മൂല്യങ്ങളോ മാറ്റാൻ പറ്റാത്ത ഒബ്ജക്റ്റുകളോ നൽകുന്നുവെന്ന് ഉറപ്പാക്കുക. ഇത് ഒരു ഷാലോ കംപാരിസൺ ഉപയോഗിച്ച് ഡാറ്റ മാറിയിട്ടുണ്ടോ എന്ന് റിയാക്ടിന് വേഗത്തിൽ നിർണ്ണയിക്കാൻ സഹായിക്കും.
• വ്യവസ്ഥാപിത അപ്‌ഡേറ്റുകൾ: എക്സ്റ്റേണൽ സ്റ്റോർ കൂടെക്കൂടെ മാറുകയും എന്നാൽ നിങ്ങളുടെ കമ്പോണൻ്റിന് ചില മാറ്റങ്ങളോട് മാത്രം പ്രതികരിക്കേണ്ടി വരികയും ചെയ്യുന്ന സാഹചര്യങ്ങളിൽ, അനാവശ്യമായ റീ-റെൻഡറുകൾ ഒഴിവാക്കാൻ `subscribe` ഫംഗ്ഷനുള്ളിൽ വ്യവസ്ഥാപിത അപ്‌ഡേറ്റുകൾ നടപ്പിലാക്കുന്നത് പരിഗണിക്കുക.

സാധാരണയായുള്ള പിഴവുകളും ട്രബിൾഷൂട്ടിംഗും

• ടയറിംഗ് പ്രശ്നങ്ങൾ: useSyncExternalStore ഉപയോഗിച്ചതിന് ശേഷവും നിങ്ങൾക്ക് ടയറിംഗ് പ്രശ്നങ്ങൾ അനുഭവപ്പെടുന്നുണ്ടെങ്കിൽ, നിങ്ങളുടെ getSnapshot ഫംഗ്ഷൻ ഡാറ്റയുടെ സ്ഥിരമായ ഒരു കാഴ്ച നൽകുന്നുണ്ടെന്നും subscribe ഫംഗ്ഷൻ മാറ്റങ്ങളെക്കുറിച്ച് റിയാക്ടിനെ ശരിയായി അറിയിക്കുന്നുണ്ടെന്നും ഉറപ്പുവരുത്തുക. getSnapshot ഫംഗ്ഷനുള്ളിൽ നിങ്ങൾ ഡാറ്റ നേരിട്ട് മാറ്റം വരുത്തുന്നില്ലെന്ന് ഉറപ്പാക്കുക.
• അനന്തമായ ലൂപ്പുകൾ: ഡാറ്റ മാറിയിട്ടില്ലെങ്കിലും getSnapshot ഫംഗ്ഷൻ എപ്പോഴും ഒരു പുതിയ മൂല്യം നൽകുമ്പോൾ ഒരു അനന്തമായ ലൂപ്പ് സംഭവിക്കാം. നിങ്ങൾ അനാവശ്യമായി പുതിയ ഒബ്ജക്റ്റുകളോ അറേകളോ ഉണ്ടാക്കുമ്പോൾ ഇത് സംഭവിക്കാം. ഡാറ്റ മാറിയിട്ടില്ലെങ്കിൽ നിങ്ങൾ അതേ മൂല്യം നൽകുന്നുവെന്ന് ഉറപ്പാക്കുക.
• സെർവർ-സൈഡ് റെൻഡറിംഗ് ഇല്ലാത്തത്: നിങ്ങൾ സെർവർ-സൈഡ് റെൻഡറിംഗ് ഉപയോഗിക്കുകയാണെങ്കിൽ, കമ്പോണൻ്റ് സെർവറിൽ ശരിയായി റെൻഡർ ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാൻ ഒരു getServerSnapshot ഫംഗ്ഷൻ നൽകുന്നത് ഉറപ്പാക്കുക. ഈ ഫംഗ്ഷൻ എക്സ്റ്റേണൽ സ്റ്റോറിന്റെ പ്രാരംഭ സ്റ്റേറ്റ് നൽകണം.
• തെറ്റായ അൺസബ്സ്ക്രൈബ്: subscribe നൽകുന്ന ഫംഗ്ഷനുള്ളിൽ നിങ്ങൾ എക്സ്റ്റേണൽ സ്റ്റോറിൽ നിന്ന് ശരിയായി അൺസബ്സ്ക്രൈബ് ചെയ്യുന്നുവെന്ന് എപ്പോഴും ഉറപ്പാക്കുക. അങ്ങനെ ചെയ്യാതിരിക്കുന്നത് മെമ്മറി ലീക്കുകൾക്ക് കാരണമാകും.
• കൺകറൻ്റ് മോഡിലെ തെറ്റായ ഉപയോഗം: നിങ്ങളുടെ എക്സ്റ്റേണൽ സ്റ്റോർ കൺകറൻ്റ് മോഡുമായി പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. റിയാക്ട് റെൻഡർ ചെയ്യുമ്പോൾ എക്സ്റ്റേണൽ സ്റ്റോറിൽ മാറ്റങ്ങൾ വരുത്തുന്നത് ഒഴിവാക്കുക. മാറ്റങ്ങൾ സിൻക്രണസും പ്രവചിക്കാവുന്നതുമായിരിക്കണം.

ഉപസംഹാരം

എക്സ്റ്റേണൽ ഡാറ്റാ സ്റ്റോറുകളുമായി റിയാക്ട് കമ്പോണൻ്റുകൾ സിൻക്രൊണൈസ് ചെയ്യുന്നതിനുള്ള ഒരു ശക്തമായ ഉപകരണമാണ് useSyncExternalStore. അത് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മനസിലാക്കുകയും മികച്ച രീതികൾ പിന്തുടരുകയും ചെയ്യുന്നതിലൂടെ, സങ്കീർണ്ണമായ കൺകറൻ്റ് റെൻഡറിംഗ് സാഹചര്യങ്ങളിൽ പോലും നിങ്ങളുടെ കമ്പോണൻ്റുകൾ സ്ഥിരതയുള്ളതും ഏറ്റവും പുതിയതുമായ ഡാറ്റ പ്രദർശിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ കഴിയും. ഈ ഹുക്ക് തേർഡ്-പാർട്ടി സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് ലൈബ്രറികൾ മുതൽ ബ്രൗസർ API-കൾ, തത്സമയ ഡാറ്റാ സ്ട്രീമുകൾ വരെയുള്ള വിവിധ ഡാറ്റാ സോഴ്സുകളുമായുള്ള സംയോജനം ലളിതമാക്കുന്നു. ഇത് കൂടുതൽ കരുത്തുറ്റതും പ്രകടനക്ഷമതയുള്ളതുമായ റിയാക്ട് ആപ്ലിക്കേഷനുകളിലേക്ക് നയിക്കുന്നു. സാധാരണ പിഴവുകൾ ഒഴിവാക്കാൻ എപ്പോഴും പിശകുകൾ കൈകാര്യം ചെയ്യാനും പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യാനും സബ്സ്ക്രിപ്ഷനുകൾ ശ്രദ്ധാപൂർവ്വം കൈകാര്യം ചെയ്യാനും ഓർമ്മിക്കുക.