റിയാക്ട് പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷൻ: useMemo, useCallback, React.memo എന്നിവയിൽ പ്രാവീണ്യം നേടാം

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

റിയാക്ടിലെ റീ-റെൻഡറുകളെക്കുറിച്ച് മനസ്സിലാക്കാം

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

എന്തുകൊണ്ടാണ് കമ്പോണന്റുകൾ റീ-റെൻഡർ ചെയ്യുന്നത്

• സ്റ്റേറ്റ് മാറ്റങ്ങൾ: ഒരു കമ്പോണന്റിന്റെ സ്റ്റേറ്റ് useState അല്ലെങ്കിൽ useReducer ഉപയോഗിച്ച് അപ്‌ഡേറ്റ് ചെയ്യുമ്പോൾ, റിയാക്ട് ആ കമ്പോണന്റിനെ റീ-റെൻഡർ ചെയ്യുന്നു.
• പ്രോപ് മാറ്റങ്ങൾ: ഒരു കമ്പോണന്റിന് അതിന്റെ പാരന്റ് കമ്പോണന്റിൽ നിന്ന് പുതിയ പ്രോപ്‌സുകൾ ലഭിക്കുകയാണെങ്കിൽ, അത് റീ-റെൻഡർ ചെയ്യും.
• പാരന്റ് റീ-റെൻഡറുകൾ: ഒരു പാരന്റ് കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുമ്പോൾ, അതിന്റെ പ്രോപ്‌സുകൾ മാറിയിട്ടുണ്ടോ എന്നത് പരിഗണിക്കാതെ തന്നെ അതിന്റെ ചൈൽഡ് കമ്പോണന്റുകളും ഡിഫോൾട്ടായി റീ-റെൻഡർ ചെയ്യും.
• കോൺടെക്സ്റ്റ് മാറ്റങ്ങൾ: റിയാക്ട് കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്ന കമ്പോണന്റുകൾ, കോൺടെക്സ്റ്റ് മൂല്യം മാറുമ്പോൾ റീ-റെൻഡർ ചെയ്യും.

പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷന്റെ ലക്ഷ്യം അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയുക എന്നതാണ്, അതായത് കമ്പോണന്റുകൾ അവയുടെ ഡാറ്റ യഥാർത്ഥത്തിൽ മാറുമ്പോൾ മാത്രം അപ്‌ഡേറ്റ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുക. സ്റ്റോക്ക് മാർക്കറ്റ് വിശകലനത്തിനായി തത്സമയ ഡാറ്റാ വിഷ്വലൈസേഷൻ ഉൾപ്പെടുന്ന ഒരു സാഹചര്യം പരിഗണിക്കുക. ഓരോ ചെറിയ ഡാറ്റാ അപ്‌ഡേറ്റിലും ചാർട്ട് കമ്പോണന്റുകൾ അനാവശ്യമായി റീ-റെൻഡർ ചെയ്യുകയാണെങ്കിൽ, ആപ്ലിക്കേഷൻ പ്രതികരണശേഷിയില്ലാത്തതായിത്തീരും. റീ-റെൻഡറുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് സുഗമവും പ്രതികരണശേഷിയുള്ളതുമായ ഒരു ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കും.

useMemo: സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകൾ മെമ്മോയിസ് ചെയ്യാം

useMemo എന്നത് ഒരു കണക്കുകൂട്ടലിന്റെ ഫലം മെമ്മോയിസ് ചെയ്യുന്ന ഒരു റിയാക്ട് ഹുക്ക് ആണ്. മെമ്മോയിസേഷൻ എന്നത് ഒരു ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കാണ്, അത് സങ്കീർണ്ണമായ ഫംഗ്ഷൻ കോളുകളുടെ ഫലങ്ങൾ സംഭരിക്കുകയും ഒരേ ഇൻപുട്ടുകൾ വീണ്ടും വരുമ്പോൾ ആ ഫലങ്ങൾ പുനരുപയോഗിക്കുകയും ചെയ്യുന്നു. ഇത് അനാവശ്യമായി ഫംഗ്ഷൻ വീണ്ടും എക്സിക്യൂട്ട് ചെയ്യേണ്ടതിന്റെ ആവശ്യം ഇല്ലാതാക്കുന്നു.

എപ്പോഴാണ് useMemo ഉപയോഗിക്കേണ്ടത്

• സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകൾ: ഒരു കമ്പോണന്റിന് അതിന്റെ പ്രോപ്‌സ് അല്ലെങ്കിൽ സ്റ്റേറ്റിനെ അടിസ്ഥാനമാക്കി കമ്പ്യൂട്ടേഷണലി ഇന്റെൻസീവ് ആയ ഒരു കണക്കുകൂട്ടൽ നടത്തേണ്ടിവരുമ്പോൾ.
• റെഫറൻഷ്യൽ ഈക്വാലിറ്റി: റീ-റെൻഡർ ചെയ്യണമോ എന്ന് നിർണ്ണയിക്കാൻ റെഫറൻഷ്യൽ ഈക്വാലിറ്റിയെ ആശ്രയിക്കുന്ന ഒരു ചൈൽഡ് കമ്പോണന്റിലേക്ക് ഒരു മൂല്യം പ്രോപ്പായി നൽകുമ്പോൾ.

useMemo എങ്ങനെ പ്രവർത്തിക്കുന്നു

useMemo രണ്ട് ആർഗ്യുമെന്റുകൾ എടുക്കുന്നു:

1. കണക്കുകൂട്ടൽ നടത്തുന്ന ഒരു ഫംഗ്ഷൻ.
2. ഡിപൻഡൻസികളുടെ ഒരു അറേ.

അറേയിലെ ഡിപൻഡൻസികളിൽ ഒന്ന് മാറുമ്പോൾ മാത്രമേ ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുകയുള്ളൂ. അല്ലാത്തപക്ഷം, useMemo മുമ്പ് മെമ്മോയിസ് ചെയ്ത മൂല്യം തിരികെ നൽകുന്നു.

ഉദാഹരണം: ഫിബൊനാച്ചി സീക്വൻസ് കണക്കാക്കൽ

കമ്പ്യൂട്ടേഷണലി ഇന്റെൻസീവ് ആയ ഒരു കണക്കുകൂട്ടലിന്റെ ക്ലാസിക് ഉദാഹരണമാണ് ഫിബൊനാച്ചി സീക്വൻസ്. നമുക്ക് useMemo ഉപയോഗിച്ച് n-ാമത്തെ ഫിബൊനാച്ചി സംഖ്യ കണക്കാക്കുന്ന ഒരു കമ്പോണന്റ് ഉണ്ടാക്കാം.

import React, { useState, useMemo } from 'react';

function Fibonacci({ n }) {
  const fibonacciNumber = useMemo(() => {
    console.log('Calculating Fibonacci...'); // കണക്കുകൂട്ടൽ എപ്പോൾ നടക്കുന്നു എന്ന് കാണിക്കുന്നു
    function calculateFibonacci(num) {
      if (num <= 1) {
        return num;
      }
      return calculateFibonacci(num - 1) + calculateFibonacci(num - 2);
    }
    return calculateFibonacci(n);
  }, [n]);

  return 
Fibonacci({n}) = {fibonacciNumber}
;
}

function App() {
  const [number, setNumber] = useState(5);

  return (
    

       setNumber(parseInt(e.target.value))}
      />
      
    
  );
}

export default App;

ഈ ഉദാഹരണത്തിൽ, n എന്ന പ്രോപ്പ് മാറുമ്പോൾ മാത്രമേ calculateFibonacci ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുകയുള്ളൂ. useMemo ഇല്ലാതെ, n അതേപടി തുടർന്നാലും Fibonacci കമ്പോണന്റിന്റെ ഓരോ റീ-റെൻഡറിലും ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യുമായിരുന്നു. ഒരു ആഗോള സാമ്പത്തിക ഡാഷ്‌ബോർഡിൽ ഈ കണക്കുകൂട്ടൽ നടക്കുന്നുവെന്ന് സങ്കൽപ്പിക്കുക - മാർക്കറ്റിലെ ഓരോ ചലനവും ഒരു പൂർണ്ണമായ പുനർകണക്കുകൂട്ടലിന് കാരണമാകുന്നു, ഇത് കാര്യമായ കാലതാമസത്തിലേക്ക് നയിക്കുന്നു. useMemo അത് തടയുന്നു.

useCallback: ഫംഗ്ഷനുകൾ മെമ്മോയിസ് ചെയ്യാം

useCallback ഫംഗ്ഷനുകൾ മെമ്മോയിസ് ചെയ്യുന്ന മറ്റൊരു റിയാക്ട് ഹുക്ക് ആണ്. ഇത് ഓരോ റെൻഡറിലും ഒരു പുതിയ ഫംഗ്ഷൻ ഇൻസ്റ്റൻസ് ഉണ്ടാക്കുന്നത് തടയുന്നു, ഇത് ചൈൽഡ് കമ്പോണന്റുകളിലേക്ക് കോൾബാക്കുകൾ പ്രോപ്പായി നൽകുമ്പോൾ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

എപ്പോഴാണ് useCallback ഉപയോഗിക്കേണ്ടത്

• കോൾബാക്കുകൾ പ്രോപ്പായി നൽകുമ്പോൾ: റീ-റെൻഡറുകൾ ഒപ്റ്റിമൈസ് ചെയ്യാൻ React.memo അല്ലെങ്കിൽ shouldComponentUpdate ഉപയോഗിക്കുന്ന ഒരു ചൈൽഡ് കമ്പോണന്റിലേക്ക് ഒരു ഫംഗ്ഷൻ പ്രോപ്പായി നൽകുമ്പോൾ.
• ഇവന്റ് ഹാൻഡ്‌ലറുകൾ: ചൈൽഡ് കമ്പോണന്റുകളുടെ അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയുന്നതിന് ഒരു കമ്പോണന്റിനുള്ളിൽ ഇവന്റ് ഹാൻഡ്‌ലർ ഫംഗ്ഷനുകൾ നിർവചിക്കുമ്പോൾ.

useCallback എങ്ങനെ പ്രവർത്തിക്കുന്നു

useCallback രണ്ട് ആർഗ്യുമെന്റുകൾ എടുക്കുന്നു:

1. മെമ്മോയിസ് ചെയ്യേണ്ട ഫംഗ്ഷൻ.
2. ഡിപൻഡൻസികളുടെ ഒരു അറേ.

അറേയിലെ ഡിപൻഡൻസികളിൽ ഒന്ന് മാറുമ്പോൾ മാത്രമേ ഫംഗ്ഷൻ പുനർനിർമ്മിക്കപ്പെടുകയുള്ളൂ. അല്ലാത്തപക്ഷം, useCallback അതേ ഫംഗ്ഷൻ ഇൻസ്റ്റൻസ് തിരികെ നൽകുന്നു.

ഉദാഹരണം: ഒരു ബട്ടൺ ക്ലിക്ക് കൈകാര്യം ചെയ്യൽ

ഒരു കോൾബാക്ക് ഫംഗ്ഷൻ ട്രിഗർ ചെയ്യുന്ന ഒരു ബട്ടണുള്ള ഒരു കമ്പോണന്റ് ഉണ്ടാക്കാം. കോൾബാക്ക് ഫംഗ്ഷൻ മെമ്മോയിസ് ചെയ്യാൻ നമ്മൾ useCallback ഉപയോഗിക്കും.

import React, { useState, useCallback } from 'react';

function Button({ onClick, children }) {
  console.log('Button re-rendered'); // ബട്ടൺ എപ്പോൾ റീ-റെൻഡർ ചെയ്യുന്നു എന്ന് കാണിക്കുന്നു
  return {children};
}

const MemoizedButton = React.memo(Button);

function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Button clicked');
    setCount((prevCount) => prevCount + 1);
  }, []); // ഡിപൻഡൻസി അറേ ശൂന്യമായതിനാൽ ഫംഗ്ഷൻ ഒരിക്കൽ മാത്രം ഉണ്ടാക്കുന്നു

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default App;

ഈ ഉദാഹരണത്തിൽ, ഡിപൻഡൻസി അറേ ശൂന്യമായതിനാൽ handleClick ഫംഗ്ഷൻ ഒരിക്കൽ മാത്രം ഉണ്ടാക്കുന്നു. count സ്റ്റേറ്റ് മാറ്റം കാരണം App കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുമ്പോൾ, handleClick ഫംഗ്ഷൻ അതേപടി തുടരുന്നു. React.memo ഉപയോഗിച്ച് പൊതിഞ്ഞ MemoizedButton കമ്പോണന്റ്, അതിന്റെ പ്രോപ്പുകൾ മാറിയാൽ മാത്രമേ റീ-റെൻഡർ ചെയ്യുകയുള്ളൂ. onClick പ്രോപ്പ് (handleClick) ഒന്നുതന്നെയായതിനാൽ, Button കമ്പോണന്റ് അനാവശ്യമായി റീ-റെൻഡർ ചെയ്യുന്നില്ല. ഒരു ഇന്ററാക്ടീവ് മാപ്പ് ആപ്ലിക്കേഷൻ സങ്കൽപ്പിക്കുക. ഓരോ തവണ ഉപയോക്താവ് ഇടപെഴകുമ്പോഴും, ഡസൻ കണക്കിന് ബട്ടൺ കമ്പോണന്റുകളെ ബാധിച്ചേക്കാം. useCallback ഇല്ലാതെ, ഈ ബട്ടണുകൾ അനാവശ്യമായി റീ-റെൻഡർ ചെയ്യുകയും, ഇത് ഒരു മന്ദഗതിയിലുള്ള അനുഭവത്തിന് കാരണമാവുകയും ചെയ്യും. useCallback ഉപയോഗിക്കുന്നത് സുഗമമായ ഒരു ഇടപെടൽ ഉറപ്പാക്കുന്നു.

React.memo: കമ്പോണന്റുകൾ മെമ്മോയിസ് ചെയ്യാം

React.memo ഒരു ഫംഗ്ഷണൽ കമ്പോണന്റിനെ മെമ്മോയിസ് ചെയ്യുന്ന ഒരു ഹയർ-ഓർഡർ കമ്പോണന്റ് (HOC) ആണ്. അതിന്റെ പ്രോപ്പുകൾ മാറിയിട്ടില്ലെങ്കിൽ കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുന്നത് ഇത് തടയുന്നു. ഇത് ക്ലാസ് കമ്പോണന്റുകൾക്കുള്ള PureComponent-ന് സമാനമാണ്.

എപ്പോഴാണ് React.memo ഉപയോഗിക്കേണ്ടത്

• പ്യുവർ കമ്പോണന്റുകൾ: ഒരു കമ്പോണന്റിന്റെ ഔട്ട്പുട്ട് അതിന്റെ പ്രോപ്പുകളെ മാത്രം ആശ്രയിച്ചിരിക്കുകയും അതിന് സ്വന്തമായി സ്റ്റേറ്റ് ഒന്നും ഇല്ലാതിരിക്കുകയും ചെയ്യുമ്പോൾ.
• ചെലവേറിയ റെൻഡറിംഗ്: ഒരു കമ്പോണന്റിന്റെ റെൻഡറിംഗ് പ്രക്രിയ കമ്പ്യൂട്ടേഷണലി ചെലവേറിയതാകുമ്പോൾ.
• ഇടയ്ക്കിടെയുള്ള റീ-റെൻഡറുകൾ: പ്രോപ്പുകൾ മാറിയിട്ടില്ലെങ്കിലും ഒരു കമ്പോണന്റ് ഇടയ്ക്കിടെ റീ-റെൻഡർ ചെയ്യപ്പെടുമ്പോൾ.

React.memo എങ്ങനെ പ്രവർത്തിക്കുന്നു

React.memo ഒരു ഫംഗ്ഷണൽ കമ്പോണന്റിനെ പൊതിയുകയും മുൻപത്തെയും അടുത്ത പ്രോപ്പുകളെയും ഷാലോ ആയി താരതമ്യം ചെയ്യുകയും ചെയ്യുന്നു. പ്രോപ്പുകൾ ഒന്നുതന്നെയാണെങ്കിൽ, കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യില്ല.

ഉദാഹരണം: ഒരു യൂസർ പ്രൊഫൈൽ പ്രദർശിപ്പിക്കൽ

ഒരു യൂസർ പ്രൊഫൈൽ പ്രദർശിപ്പിക്കുന്ന ഒരു കമ്പോണന്റ് ഉണ്ടാക്കാം. യൂസറിന്റെ ഡാറ്റ മാറിയിട്ടില്ലെങ്കിൽ അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയാൻ നമ്മൾ React.memo ഉപയോഗിക്കും.

import React from 'react';

function UserProfile({ user }) {
  console.log('UserProfile re-rendered'); // കമ്പോണന്റ് എപ്പോൾ റീ-റെൻഡർ ചെയ്യുന്നു എന്ന് കാണിക്കുന്നു
  return (
    

      
Name: {user.name}
      
Email: {user.email}
    
  );
}

const MemoizedUserProfile = React.memo(UserProfile, (prevProps, nextProps) => {
  // കസ്റ്റം താരതമ്യ ഫംഗ്ഷൻ (ഓപ്ഷണൽ)
  return prevProps.user.id === nextProps.user.id; // യൂസർ ഐഡി മാറുമ്പോൾ മാത്രം റീ-റെൻഡർ ചെയ്യുക
});

function App() {
  const [user, setUser] = React.useState({
    id: 1,
    name: 'John Doe',
    email: 'john.doe@example.com',
  });

  const updateUser = () => {
    setUser({ ...user, name: 'Jane Doe' }); // പേര് മാറ്റുന്നു
  };

  return (
    

      
      Update User Name
    
  );
}

export default App;

ഈ ഉദാഹരണത്തിൽ, user.id പ്രോപ്പ് മാറിയാൽ മാത്രമേ MemoizedUserProfile കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുകയുള്ളൂ. user ഒബ്ജക്റ്റിന്റെ മറ്റ് പ്രോപ്പർട്ടികൾ (ഉദാഹരണത്തിന്, പേര് അല്ലെങ്കിൽ ഇമെയിൽ) മാറിയാലും, ഐഡി വ്യത്യസ്തമല്ലെങ്കിൽ കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യില്ല. `React.memo`-യിലെ ഈ കസ്റ്റം താരതമ്യ ഫംഗ്ഷൻ, കമ്പോണന്റ് എപ്പോൾ റീ-റെൻഡർ ചെയ്യണമെന്ന കാര്യത്തിൽ സൂക്ഷ്മമായ നിയന്ത്രണം അനുവദിക്കുന്നു. നിരന്തരം അപ്‌ഡേറ്റ് ചെയ്യുന്ന യൂസർ പ്രൊഫൈലുകളുള്ള ഒരു സോഷ്യൽ മീഡിയ പ്ലാറ്റ്‌ഫോം പരിഗണിക്കുക. `React.memo` ഇല്ലാതെ, ഒരു യൂസറിന്റെ സ്റ്റാറ്റസോ പ്രൊഫൈൽ ചിത്രമോ മാറ്റുന്നത്, പ്രധാന യൂസർ വിവരങ്ങൾ അതേപടി തുടർന്നാലും പ്രൊഫൈൽ കമ്പോണന്റിന്റെ പൂർണ്ണമായ റീ-റെൻഡറിന് കാരണമാകും. `React.memo` ലക്ഷ്യം വെച്ചുള്ള അപ്‌ഡേറ്റുകൾ അനുവദിക്കുകയും പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

useMemo, useCallback, React.memo എന്നിവ ഒരുമിച്ച് ഉപയോഗിക്കൽ

ഈ മൂന്ന് ടെക്നിക്കുകളും ഒരുമിച്ച് ഉപയോഗിക്കുമ്പോഴാണ് ഏറ്റവും ഫലപ്രദമാകുന്നത്. useMemo സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകളെ മെമ്മോയിസ് ചെയ്യുന്നു, useCallback ഫംഗ്ഷനുകളെ മെമ്മോയിസ് ചെയ്യുന്നു, React.memo കമ്പോണന്റുകളെ മെമ്മോയിസ് ചെയ്യുന്നു. ഈ ടെക്നിക്കുകൾ സംയോജിപ്പിക്കുന്നതിലൂടെ, നിങ്ങളുടെ റിയാക്ട് ആപ്ലിക്കേഷനിലെ അനാവശ്യമായ റീ-റെൻഡറുകളുടെ എണ്ണം ഗണ്യമായി കുറയ്ക്കാൻ കഴിയും.

ഉദാഹരണം: ഒരു സങ്കീർണ്ണമായ കമ്പോണന്റ്

ഈ ടെക്നിക്കുകൾ എങ്ങനെ സംയോജിപ്പിക്കാമെന്ന് കാണിക്കുന്ന കൂടുതൽ സങ്കീർണ്ണമായ ഒരു കമ്പോണന്റ് ഉണ്ടാക്കാം.

import React, { useState, useCallback, useMemo } from 'react';

function ListItem({ item, onUpdate, onDelete }) {
  console.log(`ListItem ${item.id} re-rendered`); // കമ്പോണന്റ് എപ്പോൾ റീ-റെൻഡർ ചെയ്യുന്നു എന്ന് കാണിക്കുന്നു
  return (
    

      {item.text}
       onUpdate(item.id)}>Update
       onDelete(item.id)}>Delete
    
  );
}

const MemoizedListItem = React.memo(ListItem);

function List({ items, onUpdate, onDelete }) {
  console.log('List re-rendered'); // കമ്പോണന്റ് എപ്പോൾ റീ-റെൻഡർ ചെയ്യുന്നു എന്ന് കാണിക്കുന്നു
  return (
    

      {items.map((item) => (
        
      ))}
    
  );
}

const MemoizedList = React.memo(List);

function App() {
  const [items, setItems] = useState([
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ]);

  const handleUpdate = useCallback((id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, text: `Updated ${item.text}` } : item
      )
    );
  }, []);

  const handleDelete = useCallback((id) => {
    setItems((prevItems) => prevItems.filter((item) => item.id !== id));
  }, []);

  const memoizedItems = useMemo(() => items, [items]);

  return (
    

      
    
  );
}

export default App;

ഈ ഉദാഹരണത്തിൽ:

• useCallback ഉപയോഗിച്ച് handleUpdate, handleDelete ഫംഗ്ഷനുകളെ മെമ്മോയിസ് ചെയ്യുന്നു, ഇത് ഓരോ റെൻഡറിലും അവ പുനർനിർമ്മിക്കുന്നത് തടയുന്നു.
• useMemo ഉപയോഗിച്ച് items അറേയെ മെമ്മോയിസ് ചെയ്യുന്നു, ഇത് അറേയുടെ റെഫറൻസ് മാറിയിട്ടില്ലെങ്കിൽ List കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുന്നത് തടയുന്നു.
• React.memo ഉപയോഗിച്ച് ListItem, List കമ്പോണന്റുകളെ മെമ്മോയിസ് ചെയ്യുന്നു, ഇത് അവയുടെ പ്രോപ്പുകൾ മാറിയിട്ടില്ലെങ്കിൽ റീ-റെൻഡർ ചെയ്യുന്നത് തടയുന്നു.

ഈ ടെക്നിക്കുകളുടെ സംയോജനം കമ്പോണന്റുകൾ ആവശ്യമുള്ളപ്പോൾ മാത്രം റീ-റെൻഡർ ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, ഇത് പ്രകടനത്തിൽ കാര്യമായ മെച്ചമുണ്ടാക്കുന്നു. ടാസ്‌ക്കുകളുടെ ലിസ്റ്റുകൾ നിരന്തരം അപ്‌ഡേറ്റ് ചെയ്യുകയും, ഡിലീറ്റ് ചെയ്യുകയും, പുനഃക്രമീകരിക്കുകയും ചെയ്യുന്ന ഒരു വലിയ പ്രോജക്റ്റ് മാനേജ്‌മെന്റ് ടൂൾ സങ്കൽപ്പിക്കുക. ഈ ഒപ്റ്റിമൈസേഷനുകൾ ഇല്ലാതെ, ടാസ്‌ക് ലിസ്റ്റിലെ ഏതൊരു ചെറിയ മാറ്റവും റീ-റെൻഡറുകളുടെ ഒരു പരമ്പരയ്ക്ക് കാരണമാകും, ഇത് ആപ്ലിക്കേഷനെ മന്ദഗതിയിലാക്കുകയും പ്രതികരണശേഷിയില്ലാത്തതാക്കുകയും ചെയ്യും. useMemo, useCallback, React.memo എന്നിവ തന്ത്രപരമായി ഉപയോഗിക്കുന്നതിലൂടെ, സങ്കീർണ്ണമായ ഡാറ്റയും പതിവ് അപ്‌ഡേറ്റുകളും ഉള്ളപ്പോഴും ആപ്ലിക്കേഷന് മികച്ച പ്രകടനം കാഴ്ചവെക്കാൻ കഴിയും.

മറ്റ് ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ

useMemo, useCallback, React.memo എന്നിവ ശക്തമായ ടൂളുകളാണെങ്കിലും, റിയാക്ട് പെർഫോമൻസ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ഒരേയൊരു ഓപ്ഷനുകൾ അവയല്ല. പരിഗണിക്കേണ്ട മറ്റ് ചില ടെക്നിക്കുകൾ താഴെ നൽകുന്നു:

• കോഡ് സ്പ്ലിറ്റിംഗ്: നിങ്ങളുടെ ആപ്ലിക്കേഷനെ ആവശ്യാനുസരണം ലോഡ് ചെയ്യാൻ കഴിയുന്ന ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കുക. ഇത് പ്രാരംഭ ലോഡ് സമയം കുറയ്ക്കുകയും മൊത്തത്തിലുള്ള പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.
• ലേസി ലോഡിംഗ്: കമ്പോണന്റുകളും റിസോഴ്സുകളും ആവശ്യമുള്ളപ്പോൾ മാത്രം ലോഡ് ചെയ്യുക. ചിത്രങ്ങൾക്കും മറ്റ് വലിയ അസറ്റുകൾക്കും ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.
• വെർച്വലൈസേഷൻ: ഒരു വലിയ ലിസ്റ്റിന്റെയോ പട്ടികയുടെയോ ദൃശ്യമായ ഭാഗം മാത്രം റെൻഡർ ചെയ്യുക. വലിയ ഡാറ്റാസെറ്റുകളുമായി പ്രവർത്തിക്കുമ്പോൾ ഇത് പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തും. react-window, react-virtualized പോലുള്ള ലൈബ്രറികൾ ഇതിന് സഹായിക്കും.
• ഡിബൗൺസിംഗും ത്രോട്ടിലിംഗും: ഫംഗ്ഷനുകൾ എക്സിക്യൂട്ട് ചെയ്യുന്നതിന്റെ നിരക്ക് പരിമിതപ്പെടുത്തുക. സ്ക്രോളിംഗ്, റീസൈസിംഗ് പോലുള്ള ഇവന്റുകൾ കൈകാര്യം ചെയ്യാൻ ഇത് ഉപയോഗപ്രദമാണ്.
• ഇമ്മ്യൂട്ടബിലിറ്റി: ആകസ്മികമായ മ്യൂട്ടേഷനുകൾ ഒഴിവാക്കാനും മാറ്റങ്ങൾ കണ്ടെത്തുന്നത് ലളിതമാക്കാനും ഇമ്മ്യൂട്ടബിൾ ഡാറ്റാ സ്ട്രക്ച്ചറുകൾ ഉപയോഗിക്കുക.

ഒപ്റ്റിമൈസേഷനുള്ള ആഗോള പരിഗണനകൾ

ഒരു ആഗോള പ്രേക്ഷകർക്കായി റിയാക്ട് ആപ്ലിക്കേഷനുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുമ്പോൾ, നെറ്റ്‌വർക്ക് ലേറ്റൻസി, ഉപകരണത്തിന്റെ കഴിവുകൾ, ലോക്കലൈസേഷൻ തുടങ്ങിയ ഘടകങ്ങൾ പരിഗണിക്കേണ്ടത് പ്രധാനമാണ്. ചില ടിപ്പുകൾ ഇതാ:

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

ഉപസംഹാരം

സുഗമവും പ്രതികരണശേഷിയുള്ളതുമായ ഒരു ഉപയോക്തൃ അനുഭവം നൽകുന്നതിന് റിയാക്ട് ആപ്ലിക്കേഷന്റെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. useMemo, useCallback, React.memo പോലുള്ള ടെക്നിക്കുകളിൽ പ്രാവീണ്യം നേടുന്നതിലൂടെയും ആഗോള ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജികൾ പരിഗണിക്കുന്നതിലൂടെയും, വൈവിധ്യമാർന്ന ഉപയോക്താക്കളുടെ ആവശ്യങ്ങൾ നിറവേറ്റുന്നതിനായി വികസിപ്പിക്കാൻ കഴിയുന്ന ഉയർന്ന പ്രകടനമുള്ള റിയാക്ട് ആപ്ലിക്കേഷനുകൾ നിങ്ങൾക്ക് നിർമ്മിക്കാൻ കഴിയും. പ്രകടനത്തിലെ തടസ്സങ്ങൾ തിരിച്ചറിയുന്നതിനും ഈ ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ തന്ത്രപരമായി പ്രയോഗിക്കുന്നതിനും നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പ്രൊഫൈൽ ചെയ്യാൻ ഓർക്കുക. മുൻകൂട്ടി ഒപ്റ്റിമൈസ് ചെയ്യരുത് - ഏറ്റവും പ്രധാനപ്പെട്ട സ്വാധീനം ചെലുത്താൻ കഴിയുന്ന മേഖലകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക.

റിയാക്ട് പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷനുകൾ മനസ്സിലാക്കുന്നതിനും നടപ്പിലാക്കുന്നതിനും ഈ ഗൈഡ് ഒരു ഉറച്ച അടിത്തറ നൽകുന്നു. നിങ്ങൾ റിയാക്ട് ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുന്നത് തുടരുമ്പോൾ, പ്രകടനത്തിന് മുൻഗണന നൽകാനും ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിനുള്ള പുതിയ വഴികൾ നിരന്തരം തേടാനും ഓർക്കുക.