React useSyncExternalStore: ബാഹ്യ സ്റ്റേറ്റ് ഇൻ്റഗ്രേഷനിൽ വൈദഗ്ദ്ധ്യം നേടാം

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

useSyncExternalStore-ൻ്റെ ആവശ്യകത മനസ്സിലാക്കാം

പല React ആപ്ലിക്കേഷനുകളിലും, കമ്പോണൻ്റ് ട്രീക്ക് പുറത്ത് സ്റ്റേറ്റ് മാനേജ് ചെയ്യേണ്ട സാഹചര്യങ്ങൾ നിങ്ങൾ നേരിടാം. ഇത് സാധാരണയായി താഴെ പറയുന്നവ കൈകാര്യം ചെയ്യുമ്പോൾ സംഭവിക്കുന്നു:

• തേർഡ്-പാർട്ടി ലൈബ്രറികൾ: സ്വന്തമായി സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്ന ലൈബ്രറികളുമായി സംയോജിപ്പിക്കുമ്പോൾ (ഉദാഹരണത്തിന്, ഒരു ഡാറ്റാബേസ് കണക്ഷൻ, ഒരു ബ്രൗസർ API, അല്ലെങ്കിൽ ഒരു ഫിസിക്സ് എഞ്ചിൻ).
• കമ്പോണൻ്റുകൾക്കിടയിൽ പങ്കിട്ട സ്റ്റേറ്റ്: നേരിട്ട് ബന്ധമില്ലാത്ത കമ്പോണൻ്റുകൾക്കിടയിൽ പങ്കിടേണ്ട സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുമ്പോൾ (ഉദാഹരണത്തിന്, ഉപയോക്താവിൻ്റെ ഓതൻ്റിക്കേഷൻ സ്റ്റാറ്റസ്, ആപ്ലിക്കേഷൻ ക്രമീകരണങ്ങൾ, അല്ലെങ്കിൽ ഒരു ഗ്ലോബൽ ഇവൻ്റ് ബസ്).
• ബാഹ്യ ഡാറ്റാ സോഴ്‌സുകൾ: ബാഹ്യ API-കളിൽ നിന്നോ ഡാറ്റാബേസുകളിൽ നിന്നോ ഡാറ്റ എടുക്കുകയും പ്രദർശിപ്പിക്കുകയും ചെയ്യുമ്പോൾ.

useState, useReducer പോലുള്ള പരമ്പരാഗത സ്റ്റേറ്റ് മാനേജ്‌മെൻ്റ് സൊല്യൂഷനുകൾ ലോക്കൽ കമ്പോണൻ്റ് സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യാൻ വളരെ അനുയോജ്യമാണ്. എന്നിരുന്നാലും, ബാഹ്യ സ്റ്റേറ്റ് കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യാൻ അവ രൂപകൽപ്പന ചെയ്തിട്ടില്ല. ബാഹ്യ ഡാറ്റാ സോഴ്‌സുകൾക്കൊപ്പം അവ നേരിട്ട് ഉപയോഗിക്കുന്നത് പ്രകടന പ്രശ്‌നങ്ങൾക്കും, സ്ഥിരതയില്ലാത്ത അപ്‌ഡേറ്റുകൾക്കും, സങ്കീർണ്ണമായ കോഡിനും ഇടയാക്കും.

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

useSyncExternalStore-ൻ്റെ പ്രധാന ആശയങ്ങൾ

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

1. subscribe: ഒരു കോൾബാക്ക് ആർഗ്യുമെൻ്റായി എടുക്കുകയും ബാഹ്യ സ്റ്റോറിലേക്ക് സബ്‌സ്‌ക്രൈബ് ചെയ്യുകയും ചെയ്യുന്ന ഒരു ഫംഗ്ഷൻ. സ്റ്റോറിൻ്റെ ഡാറ്റ മാറുമ്പോഴെല്ലാം ഈ കോൾബാക്ക് വിളിക്കപ്പെടും.
2. getSnapshot: ബാഹ്യ സ്റ്റോറിൽ നിന്നുള്ള ഡാറ്റയുടെ ഒരു സ്നാപ്പ്ഷോട്ട് നൽകുന്ന ഒരു ഫംഗ്ഷൻ. ഈ ഫംഗ്ഷൻ ഒരു സ്ഥിരമായ മൂല്യം നൽകണം, അത് ഡാറ്റ മാറിയിട്ടുണ്ടോ എന്ന് നിർണ്ണയിക്കാൻ React-ന് ഉപയോഗിക്കാൻ കഴിയും. ഇത് പ്യൂറും വേഗതയേറിയതും ആയിരിക്കണം.
3. getServerSnapshot (ഓപ്ഷണൽ): സെർവർ-സൈഡ് റെൻഡറിംഗ് സമയത്ത് സ്റ്റോറിൻ്റെ പ്രാരംഭ മൂല്യം നൽകുന്ന ഒരു ഫംഗ്ഷൻ. പ്രാരംഭ HTML, ക്ലയിൻ്റ്-സൈഡ് റെൻഡറിംഗുമായി പൊരുത്തപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കാൻ ഇത് നിർണായകമാണ്. ഇത് സെർവർ-സൈഡ് റെൻഡറിംഗ് സാഹചര്യങ്ങളിൽ മാത്രം ഉപയോഗിക്കുന്നു. ഒരു ക്ലയിൻ്റ്-സൈഡ് സാഹചര്യത്തിൽ ഇത് ഒഴിവാക്കിയാൽ, പകരം getSnapshot ഉപയോഗിക്കും. സെർവറിൽ പ്രാരംഭമായി റെൻഡർ ചെയ്തതിന് ശേഷം ഈ മൂല്യം ഒരിക്കലും മാറുന്നില്ല എന്നത് പ്രധാനമാണ്.

ഓരോ ആർഗ്യുമെൻ്റിൻ്റെയും ഒരു വിശദീകരണം താഴെ നൽകുന്നു:

1. subscribe

React കമ്പോണൻ്റും ബാഹ്യ സ്റ്റോറും തമ്മിൽ ഒരു കണക്ഷൻ സ്ഥാപിക്കുന്നതിനുള്ള ഉത്തരവാദിത്തം subscribe ഫംഗ്ഷനാണ്. ഇതിന് ഒരു കോൾബാക്ക് ഫംഗ്ഷൻ ലഭിക്കുന്നു, സ്റ്റോറിൻ്റെ ഡാറ്റ മാറുമ്പോഴെല്ലാം അത് ഈ കോൾബാക്കിനെ വിളിക്കണം. ഈ കോൾബാക്ക് സാധാരണയായി കമ്പോണൻ്റിൻ്റെ ഒരു റീ-റെൻഡറിന് കാരണമാകാൻ ഉപയോഗിക്കുന്നു.

ഉദാഹരണം:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, store.addListener സ്റ്റോറിൻ്റെ ലിസണറുകളുടെ ലിസ്റ്റിലേക്ക് കോൾബാക്ക് ചേർക്കുന്നു. കമ്പോണൻ്റ് അൺമൗണ്ട് ചെയ്യുമ്പോൾ ലിസണറെ നീക്കം ചെയ്യുന്ന ഒരു ക്ലീനപ്പ് ഫംഗ്ഷൻ ഇത് തിരികെ നൽകുന്നു, ഇത് മെമ്മറി ലീക്കുകൾ തടയുന്നു.

2. getSnapshot

ബാഹ്യ സ്റ്റോറിൽ നിന്ന് ഡാറ്റയുടെ ഒരു സ്നാപ്പ്ഷോട്ട് വീണ്ടെടുക്കുന്നതിനുള്ള ഉത്തരവാദിത്തം getSnapshot ഫംഗ്ഷനാണ്. ഈ സ്നാപ്പ്ഷോട്ട് ഒരു സ്ഥിരമായ മൂല്യമായിരിക്കണം, അത് ഡാറ്റ മാറിയിട്ടുണ്ടോ എന്ന് നിർണ്ണയിക്കാൻ React-ന് ഉപയോഗിക്കാൻ കഴിയും. നിലവിലെ സ്നാപ്പ്ഷോട്ട് മുൻ സ്നാപ്പ്ഷോട്ടുമായി താരതമ്യം ചെയ്യാൻ React Object.is ഉപയോഗിക്കുന്നു. അതിനാൽ, ഇത് വേഗതയേറിയതായിരിക്കണം, കൂടാതെ ഒരു പ്രിമിറ്റീവ് മൂല്യം (string, number, boolean, null, അല്ലെങ്കിൽ undefined) നൽകുന്നത് വളരെ ഉത്തമമാണ്.

ഉദാഹരണം:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, store.getData സ്റ്റോറിൽ നിന്നുള്ള നിലവിലെ ഡാറ്റ നൽകുന്നു. കമ്പോണൻ്റ് വീണ്ടും റെൻഡർ ചെയ്യേണ്ടതുണ്ടോ എന്ന് നിർണ്ണയിക്കാൻ React ഈ മൂല്യം മുൻ മൂല്യവുമായി താരതമ്യം ചെയ്യും.

3. getServerSnapshot (ഓപ്ഷണൽ)

സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR) ഉപയോഗിക്കുമ്പോൾ മാത്രമേ getServerSnapshot ഫംഗ്ഷൻ പ്രസക്തമാകൂ. പ്രാരംഭ സെർവർ റെൻഡറിംഗ് സമയത്ത് ഈ ഫംഗ്ഷൻ വിളിക്കപ്പെടുന്നു, ക്ലയിൻ്റിൽ ഹൈഡ്രേഷൻ നടക്കുന്നതിന് മുമ്പ് അതിൻ്റെ ഫലം സ്റ്റോറിൻ്റെ പ്രാരംഭ മൂല്യമായി ഉപയോഗിക്കുന്നു. വിജയകരമായ SSR-ന് സ്ഥിരമായ മൂല്യങ്ങൾ നൽകുന്നത് നിർണായകമാണ്.

ഉദാഹരണം:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, `store.getInitialDataForServer` സെർവർ-സൈഡ് റെൻഡറിംഗിന് അനുയോജ്യമായ പ്രാരംഭ ഡാറ്റ നൽകുന്നു.

അടിസ്ഥാന ഉപയോഗ ഉദാഹരണം

ഒരു കൗണ്ടർ കൈകാര്യം ചെയ്യുന്ന ഒരു ബാഹ്യ സ്റ്റോർ നമ്മുടെ പക്കലുള്ള ഒരു ലളിതമായ ഉദാഹരണം പരിഗണിക്കാം. ഒരു React കമ്പോണൻ്റിൽ കൗണ്ടർ മൂല്യം പ്രദർശിപ്പിക്കാൻ നമുക്ക് useSyncExternalStore ഉപയോഗിക്കാം:

            // External store
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, createStore ഒരു കൗണ്ടർ മൂല്യം കൈകാര്യം ചെയ്യുന്ന ലളിതമായ ഒരു ബാഹ്യ സ്റ്റോർ സൃഷ്ടിക്കുന്നു. Counter കമ്പോണൻ്റ്, സ്റ്റോറിലെ മാറ്റങ്ങൾ സബ്സ്ക്രൈബ് ചെയ്യാനും നിലവിലെ കൗണ്ട് പ്രദർശിപ്പിക്കാനും useSyncExternalStore ഉപയോഗിക്കുന്നു. ഇൻക്രിമെൻ്റ് ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ, setState ഫംഗ്ഷൻ സ്റ്റോറിൻ്റെ മൂല്യം അപ്ഡേറ്റ് ചെയ്യുന്നു, ഇത് കമ്പോണൻ്റിൻ്റെ റീ-റെൻഡറിന് കാരണമാകുന്നു.

സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് ലൈബ്രറികളുമായി സംയോജിപ്പിക്കൽ

Zustand, Jotai, Recoil തുടങ്ങിയ സ്റ്റേറ്റ് മാനേജ്‌മെൻ്റ് ലൈബ്രറികളുമായി സംയോജിപ്പിക്കുന്നതിന് useSyncExternalStore പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. ഈ ലൈബ്രറികൾ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നതിനായി അവയുടേതായ സംവിധാനങ്ങൾ നൽകുന്നു, അവയെ നിങ്ങളുടെ React കമ്പോണൻ്റുകളിലേക്ക് എളുപ്പത്തിൽ സംയോജിപ്പിക്കാൻ useSyncExternalStore നിങ്ങളെ അനുവദിക്കുന്നു.

Zustand-മായി സംയോജിപ്പിക്കുന്നതിൻ്റെ ഒരു ഉദാഹരണം ഇതാ:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Zustand store
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// React component
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand സ്റ്റോർ നിർമ്മാണം ലളിതമാക്കുന്നു. നിങ്ങൾ ഒരു പ്രത്യേക സ്റ്റേറ്റിലേക്ക് സബ്സ്ക്രൈബ് ചെയ്യുമ്പോൾ അതിൻ്റെ ആന്തരിക subscribe, getSnapshot എന്നീ പ്രവർത്തനങ്ങൾ പരോക്ഷമായി ഉപയോഗിക്കപ്പെടുന്നു.

Jotai-യുമായി സംയോജിപ്പിക്കുന്നതിൻ്റെ ഒരു ഉദാഹരണം ഇതാ:

            import { atom, useAtom } from 'jotai'

// Jotai atom
const countAtom = atom(0)

// React component
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യാൻ ആറ്റങ്ങൾ (atoms) ഉപയോഗിക്കുന്നു. useAtom ആന്തരികമായി സബ്‌സ്‌ക്രിപ്‌ഷനും സ്നാപ്പ്ഷോട്ടിംഗും കൈകാര്യം ചെയ്യുന്നു.

പ്രകടന ഒപ്റ്റിമൈസേഷൻ

പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് useSyncExternalStore നിരവധി സംവിധാനങ്ങൾ നൽകുന്നു:

• തിരഞ്ഞെടുത്ത അപ്‌ഡേറ്റുകൾ: getSnapshot തിരികെ നൽകുന്ന മൂല്യം മാറുമ്പോൾ മാത്രമേ React കമ്പോണൻ്റ് വീണ്ടും റെൻഡർ ചെയ്യുകയുള്ളൂ. ഇത് അനാവശ്യമായ റീ-റെൻഡറുകൾ ഒഴിവാക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.
• അപ്‌ഡേറ്റുകൾ ബാച്ച് ചെയ്യൽ: ഒന്നിലധികം ബാഹ്യ സ്റ്റോറുകളിൽ നിന്നുള്ള അപ്‌ഡേറ്റുകൾ React ഒരൊറ്റ റീ-റെൻഡറിലേക്ക് ബാച്ച് ചെയ്യുന്നു. ഇത് റീ-റെൻഡറുകളുടെ എണ്ണം കുറയ്ക്കുകയും മൊത്തത്തിലുള്ള പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.
• പഴകിയ ക്ലോഷറുകൾ ഒഴിവാക്കൽ: അസിൻക്രണസ് അപ്‌ഡേറ്റുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ പോലും, കമ്പോണൻ്റിന് എല്ലായ്പ്പോഴും ബാഹ്യ സ്റ്റോറിൽ നിന്നുള്ള ഏറ്റവും പുതിയ ഡാറ്റയിലേക്ക് ആക്‌സസ് ഉണ്ടെന്ന് useSyncExternalStore ഉറപ്പാക്കുന്നു.

പ്രകടനം കൂടുതൽ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന്, ഇനിപ്പറയുന്ന മികച്ച രീതികൾ പരിഗണിക്കുക:

• getSnapshot നൽകുന്ന ഡാറ്റയുടെ അളവ് കുറയ്ക്കുക: കമ്പോണൻ്റിന് യഥാർത്ഥത്തിൽ ആവശ്യമുള്ള ഡാറ്റ മാത്രം തിരികെ നൽകുക. ഇത് താരതമ്യം ചെയ്യേണ്ട ഡാറ്റയുടെ അളവ് കുറയ്ക്കുകയും അപ്‌ഡേറ്റ് പ്രക്രിയയുടെ കാര്യക്ഷമത മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.
• മെമ്മോയിസേഷൻ ടെക്നിക്കുകൾ ഉപയോഗിക്കുക: വലിയ കണക്കുകൂട്ടലുകളുടെയോ ഡാറ്റാ രൂപാന്തരീകരണങ്ങളുടെയോ ഫലങ്ങൾ മെമ്മോയിസ് ചെയ്യുക. ഇത് അനാവശ്യമായ പുനർ-കണക്കുകൂട്ടലുകൾ തടയുകയും പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യും.
• അനാവശ്യ സബ്‌സ്‌ക്രിപ്‌ഷനുകൾ ഒഴിവാക്കുക: കമ്പോണൻ്റ് യഥാർത്ഥത്തിൽ ദൃശ്യമാകുമ്പോൾ മാത്രം ബാഹ്യ സ്റ്റോറിലേക്ക് സബ്സ്ക്രൈബ് ചെയ്യുക. ഇത് സജീവമായ സബ്‌സ്‌ക്രിപ്‌ഷനുകളുടെ എണ്ണം കുറയ്ക്കുകയും മൊത്തത്തിലുള്ള പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യും.
• ഡാറ്റ മാറിയെങ്കിൽ മാത്രം getSnapshot ഒരു പുതിയ *സ്ഥിരമായ* ഒബ്ജക്റ്റ് തിരികെ നൽകുന്നുവെന്ന് ഉറപ്പാക്കുക: അടിസ്ഥാന ഡാറ്റ യഥാർത്ഥത്തിൽ മാറിയിട്ടില്ലെങ്കിൽ പുതിയ ഒബ്ജക്റ്റുകൾ/അറേകൾ/ഫംഗ്ഷനുകൾ സൃഷ്ടിക്കുന്നത് ഒഴിവാക്കുക. സാധ്യമെങ്കിൽ റഫറൻസ് വഴി ഒരേ ഒബ്ജക്റ്റ് തിരികെ നൽകുക.

useSyncExternalStore ഉപയോഗിച്ചുള്ള സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR)

സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR) ഉപയോഗിച്ച് useSyncExternalStore ഉപയോഗിക്കുമ്പോൾ, ഒരു getServerSnapshot ഫംഗ്ഷൻ നൽകേണ്ടത് അത്യാവശ്യമാണ്. സെർവറിൽ റെൻഡർ ചെയ്ത പ്രാരംഭ HTML, ക്ലയിൻ്റ്-സൈഡ് റെൻഡറിംഗുമായി പൊരുത്തപ്പെടുന്നുവെന്ന് ഈ ഫംഗ്ഷൻ ഉറപ്പാക്കുന്നു, ഇത് ഹൈഡ്രേഷൻ പിശകുകൾ തടയുകയും ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

getServerSnapshot ഉപയോഗിക്കുന്നതിൻ്റെ ഒരു ഉദാഹരണം ഇതാ:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Important for SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, getServerSnapshot കൗണ്ടറിൻ്റെ പ്രാരംഭ മൂല്യം തിരികെ നൽകുന്നു. സെർവറിൽ റെൻഡർ ചെയ്ത പ്രാരംഭ HTML, ക്ലയിൻ്റ്-സൈഡ് റെൻഡറിംഗുമായി പൊരുത്തപ്പെടുന്നുവെന്ന് ഇത് ഉറപ്പാക്കുന്നു. `getServerSnapshot` ഒരു സ്ഥിരവും പ്രവചിക്കാവുന്നതുമായ മൂല്യം നൽകണം. ഇത് സെർവറിലെ getSnapshot ഫംഗ്ഷൻ്റെ അതേ ലോജിക് തന്നെ ചെയ്യണം. getServerSnapshot-ൽ ബ്രൗസർ-നിർദ്ദിഷ്ട API-കളോ ഗ്ലോബൽ വേരിയബിളുകളോ ആക്‌സസ് ചെയ്യുന്നത് ഒഴിവാക്കുക.

വിപുലമായ ഉപയോഗ രീതികൾ

വിവിധ നൂതന സാഹചര്യങ്ങളിൽ useSyncExternalStore ഉപയോഗിക്കാം, അവയിൽ ഉൾപ്പെടുന്നവ:

• ബ്രൗസർ API-കളുമായി സംയോജിപ്പിക്കൽ: localStorage അല്ലെങ്കിൽ navigator.onLine പോലുള്ള ബ്രൗസർ API-കളിലെ മാറ്റങ്ങൾ സബ്‌സ്‌ക്രൈബ് ചെയ്യുക.
• കസ്റ്റം ഹുക്കുകൾ നിർമ്മിക്കൽ: ഒരു ബാഹ്യ സ്റ്റോറിലേക്ക് സബ്‌സ്‌ക്രൈബ് ചെയ്യുന്നതിനുള്ള ലോജിക് ഒരു കസ്റ്റം ഹുക്കിൽ ഉൾപ്പെടുത്തുക.
• Context API-യുമായി ഉപയോഗിക്കൽ: ഒരു കമ്പോണൻ്റ് ട്രീക്ക് പങ്കിട്ട സ്റ്റേറ്റ് നൽകുന്നതിന് useSyncExternalStore-നെ React Context API-യുമായി സംയോജിപ്പിക്കുക.

localStorage-ലേക്ക് സബ്‌സ്‌ക്രൈബ് ചെയ്യുന്നതിനുള്ള ഒരു കസ്റ്റം ഹുക്ക് നിർമ്മിക്കുന്നതിൻ്റെ ഒരു ഉദാഹരണം നോക്കാം:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error getting value from localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Manually trigger storage event for same-page updates
    } catch (error) {
      console.error("Error setting value in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

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

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, useLocalStorage എന്നത് localStorage-ലെ മാറ്റങ്ങൾ സബ്സ്ക്രൈബ് ചെയ്യുന്ന ഒരു കസ്റ്റം ഹുക്ക് ആണ്. ഇത് സബ്സ്ക്രിപ്ഷൻ കൈകാര്യം ചെയ്യാനും localStorage-ൽ നിന്ന് നിലവിലെ മൂല്യം വീണ്ടെടുക്കാനും useSyncExternalStore ഉപയോഗിക്കുന്നു. ഒരേ പേജിലെ അപ്‌ഡേറ്റുകൾ പ്രതിഫലിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ ഇത് ഒരു സ്റ്റോറേജ് ഇവൻ്റ് ശരിയായി ഡിസ്പാച്ച് ചെയ്യുന്നു (`storage` ഇവൻ്റുകൾ മറ്റ് ടാബുകളിൽ മാത്രമേ ഫയർ ചെയ്യുകയുള്ളൂ). സെർവർ എൻവയോൺമെൻ്റുകളിൽ പ്രാരംഭ മൂല്യങ്ങൾ ശരിയായി നൽകുന്നുവെന്ന് serverSnapshot ഉറപ്പാക്കുന്നു.

മികച്ച രീതികളും സാധാരണ പിഴവുകളും

useSyncExternalStore ഉപയോഗിക്കുമ്പോൾ ഒഴിവാക്കേണ്ട ചില മികച്ച രീതികളും സാധാരണ പിഴവുകളും താഴെ നൽകുന്നു:

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

ഉപസംഹാരം

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

കൂടുതൽ വിവരങ്ങൾക്കായി

• React Documentation on useSyncExternalStore
• React 18 Pull Request introducing useSyncExternalStore
• Zustand State Management Library
• Jotai State Management Library