റിയാക്ട് ബാച്ചിംഗ്: മികച്ച പ്രകടനത്തിനായി സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുക

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

എന്താണ് റിയാക്ട് ബാച്ചിംഗ്?

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

റിയാക്ട് 18-ന് മുമ്പ്, റിയാക്ട് ഇവന്റ് ഹാൻഡ്‌ലറുകൾക്കുള്ളിൽ മാത്രമേ ബാച്ചിംഗ് നടന്നിരുന്നുള്ളൂ. ഈ ഹാൻഡ്‌ലറുകൾക്ക് പുറത്തുള്ള സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ, അതായത് setTimeout, പ്രോമിസുകൾ, അല്ലെങ്കിൽ നേറ്റീവ് ഇവന്റ് ഹാൻഡ്‌ലറുകൾ എന്നിവയിലുള്ളവ, ബാച്ച് ചെയ്യപ്പെട്ടിരുന്നില്ല. ഇത് പലപ്പോഴും അപ്രതീക്ഷിതമായ റീ-റെൻഡറുകൾക്കും പ്രകടനത്തിലെ തടസ്സങ്ങൾക്കും കാരണമായി.

റിയാക്ട് 18-ൽ ഓട്ടോമാറ്റിക് ബാച്ചിംഗ് അവതരിപ്പിച്ചതോടെ, ഈ പരിമിതി മറികടന്നു. റിയാക്ട് ഇപ്പോൾ കൂടുതൽ സാഹചര്യങ്ങളിൽ സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ ഓട്ടോമാറ്റിക്കായി ബാച്ച് ചെയ്യുന്നു, അവയിൽ ഉൾപ്പെടുന്നവ:

• റിയാക്ട് ഇവന്റ് ഹാൻഡ്‌ലറുകൾ (ഉദാ. onClick, onChange)
• അസിൻക്രണസ് ജാവാസ്ക്രിപ്റ്റ് ഫംഗ്ഷനുകൾ (ഉദാ. setTimeout, Promise.then)
• നേറ്റീവ് ഇവന്റ് ഹാൻഡ്‌ലറുകൾ (ഉദാ. DOM ഘടകങ്ങളിലേക്ക് നേരിട്ട് ഘടിപ്പിച്ച ഇവന്റ് ലിസണറുകൾ)

റിയാക്ട് ബാച്ചിംഗിന്റെ പ്രയോജനങ്ങൾ

റിയാക്ട് ബാച്ചിംഗിന്റെ പ്രയോജനങ്ങൾ വളരെ വലുതാണ്, അവ ഉപയോക്തൃ അനുഭവത്തെ നേരിട്ട് സ്വാധീനിക്കുന്നു:

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

റിയാക്ട് ബാച്ചിംഗ് എങ്ങനെ പ്രവർത്തിക്കുന്നു

റിയാക്ടിന്റെ ബാച്ചിംഗ് സംവിധാനം അതിന്റെ റികൺസിലിയേഷൻ പ്രക്രിയയിൽ ഉൾച്ചേർന്നതാണ്. ഒരു സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ട്രിഗർ ചെയ്യപ്പെടുമ്പോൾ, റിയാക്ട് ഉടൻ തന്നെ കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുന്നില്ല. പകരം, അത് അപ്‌ഡേറ്റ് ഒരു ക്യൂവിലേക്ക് ചേർക്കുന്നു. ഒരു ചെറിയ കാലയളവിനുള്ളിൽ ഒന്നിലധികം അപ്‌ഡേറ്റുകൾ സംഭവിക്കുകയാണെങ്കിൽ, റിയാക്ട് അവയെ ഒരൊറ്റ അപ്‌ഡേറ്റായി സംയോജിപ്പിക്കുന്നു. ഈ സംയോജിത അപ്‌ഡേറ്റ് പിന്നീട് കമ്പോണന്റ് ഒരു തവണ റീ-റെൻഡർ ചെയ്യാൻ ഉപയോഗിക്കുന്നു, എല്ലാ മാറ്റങ്ങളും ഒരൊറ്റ പാസിൽ പ്രതിഫലിപ്പിക്കുന്നു.

നമുക്ക് ഒരു ലളിതമായ ഉദാഹരണം പരിഗണിക്കാം:

            
import React, { useState } from 'react';

function ExampleComponent() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const handleClick = () => {
    setCount1(count1 + 1);
    setCount2(count2 + 1);
  };

  console.log('Component re-rendered');

  return (
    <div>
      <p>Count 1: {count1}</p>
      <p>Count 2: {count2}</p>
      <button onClick={handleClick}>Increment Both</button>
    </div>
  );
}

export default ExampleComponent;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ, setCount1, setCount2 എന്നിവ ഒരേ ഇവന്റ് ഹാൻഡ്‌ലറിനുള്ളിൽ വിളിക്കപ്പെടുന്നു. റിയാക്ട് ഈ രണ്ട് സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകളും ബാച്ച് ചെയ്യുകയും കമ്പോണന്റ് ഒരു തവണ മാത്രം വീണ്ടും റെൻഡർ ചെയ്യുകയും ചെയ്യും. ഓരോ ക്ലിക്കിലും "Component re-rendered" എന്ന് കൺസോളിൽ ഒരിക്കൽ മാത്രം ലോഗ് ചെയ്യുന്നത് നിങ്ങൾ കാണും, ഇത് ബാച്ചിംഗിന്റെ പ്രവർത്തനം വ്യക്തമാക്കുന്നു.

ബാച്ച് ചെയ്യാത്ത അപ്‌ഡേറ്റുകൾ: ബാച്ചിംഗ് ബാധകമല്ലാത്തപ്പോൾ

റിയാക്ട് 18 മിക്ക സാഹചര്യങ്ങളിലും ഓട്ടോമാറ്റിക് ബാച്ചിംഗ് അവതരിപ്പിച്ചെങ്കിലും, ചിലപ്പോൾ നിങ്ങൾക്ക് ബാച്ചിംഗിനെ മറികടന്ന് കമ്പോണന്റ് ഉടനടി അപ്‌ഡേറ്റ് ചെയ്യാൻ നിർബന്ധിക്കേണ്ടി വന്നേക്കാം. ഒരു സ്റ്റേറ്റ് അപ്‌ഡേറ്റിന് ശേഷം ഉടൻ തന്നെ അപ്‌ഡേറ്റ് ചെയ്ത DOM മൂല്യം വായിക്കേണ്ടിവരുമ്പോൾ ഇത് സാധാരണയായി ആവശ്യമാണ്.

ഇതിനായി റിയാക്ട് flushSync API നൽകുന്നു. flushSync, റിയാക്ടിനെ പെൻഡിംഗ് അപ്‌ഡേറ്റുകളെല്ലാം സിൻക്രണസായി ഫ്ലഷ് ചെയ്യാനും DOM ഉടനടി അപ്‌ഡേറ്റ് ചെയ്യാനും നിർബന്ധിക്കുന്നു.

ഇവിടെ ഒരു ഉദാഹരണം:

            
import React, { useState } from 'react';
import { flushSync } from 'react-dom';

function ExampleComponent() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    flushSync(() => {
      setText(event.target.value);
    });
    console.log('Input value after update:', event.target.value);
  };

  return (
    <input type="text" value={text} onChange={handleChange} />
  );
}

export default ExampleComponent;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ഇൻപുട്ട് മൂല്യം മാറിയതിന് ശേഷം text സ്റ്റേറ്റ് ഉടനടി അപ്‌ഡേറ്റ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാൻ flushSync ഉപയോഗിക്കുന്നു. അടുത്ത റെൻഡർ സൈക്കിളിനായി കാത്തിരിക്കാതെ, handleChange ഫംഗ്ഷനിൽ അപ്‌ഡേറ്റ് ചെയ്ത മൂല്യം വായിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. എന്നിരുന്നാലും, flushSync മിതമായി ഉപയോഗിക്കുക, കാരണം ഇത് പ്രകടനത്തെ പ്രതികൂലമായി ബാധിച്ചേക്കാം.

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

റിയാക്ട് ബാച്ചിംഗ് പ്രകടനത്തിൽ കാര്യമായ ഉത്തേജനം നൽകുമ്പോൾ തന്നെ, നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രകടനം കൂടുതൽ മെച്ചപ്പെടുത്തുന്നതിന് നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന അധിക ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളുണ്ട്.

1. ഫംഗ്ഷണൽ അപ്‌ഡേറ്റുകൾ ഉപയോഗിക്കുക

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

ഇതിനുപകരം:

            
setCount(count + 1);

            

              
                Copy
              
            
          

ഉപയോഗിക്കുക:

            
setCount((prevCount) => prevCount + 1);

            

              
                Copy
              
            
          

ഫംഗ്ഷണൽ അപ്‌ഡേറ്റുകൾ സ്റ്റെയിൽ ക്ലോഷറുകളുമായി ബന്ധപ്പെട്ട പ്രശ്നങ്ങൾ തടയുകയും കൃത്യമായ സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ ഉറപ്പാക്കുകയും ചെയ്യുന്നു.

2. ഇമ്മ്യൂട്ടബിലിറ്റി

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

ഒബ്ജക്റ്റുകളുമായോ അറേകളുമായോ പ്രവർത്തിക്കുമ്പോൾ, നിലവിലുള്ള സ്റ്റേറ്റിനെ നേരിട്ട് മാറ്റുന്നത് ഒഴിവാക്കുക. പകരം, ആവശ്യമുള്ള മാറ്റങ്ങളോടെ ഒബ്ജക്റ്റിന്റെയോ അറേയുടെയോ ഒരു പുതിയ പകർപ്പ് സൃഷ്ടിക്കുക.

ഉദാഹരണത്തിന്, ഇതിനുപകരം:

            
const updatedItems = items;
updatedItems.push(newItem);
setItems(updatedItems);

            

              
                Copy
              
            
          

ഉപയോഗിക്കുക:

            
setItems([...items, newItem]);

            

              
                Copy
              
            
          

സ്പ്രെഡ് ഓപ്പറേറ്റർ (...) നിലവിലുള്ള ഇനങ്ങളും പുതിയ ഇനവും അവസാനം ചേർത്തുകൊണ്ട് ഒരു പുതിയ അറേ സൃഷ്ടിക്കുന്നു.

3. മെമ്മോയിസേഷൻ

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

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

React.memo ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ഇതാ:

            
import React from 'react';

const MyComponent = React.memo(({ data }) => {
  console.log('MyComponent re-rendered');
  return <div>{data.name}</div>;
});

export default MyComponent;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, data പ്രോപ് മാറിയാൽ മാത്രമേ MyComponent വീണ്ടും റെൻഡർ ചെയ്യുകയുള്ളൂ.

4. കോഡ് സ്പ്ലിറ്റിംഗ്

കോഡ് സ്പ്ലിറ്റിംഗ് എന്നത് നിങ്ങളുടെ ആപ്ലിക്കേഷനെ ആവശ്യാനുസരണം ലോഡ് ചെയ്യാൻ കഴിയുന്ന ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കുന്ന രീതിയാണ്. ഇത് പ്രാരംഭ ലോഡ് സമയം കുറയ്ക്കുകയും നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ മൊത്തത്തിലുള്ള പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു. ഡൈനാമിക് ഇമ്പോർട്ടുകളും React.lazy, Suspense കമ്പോണന്റുകളും ഉൾപ്പെടെ കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കാൻ റിയാക്ട് നിരവധി മാർഗ്ഗങ്ങൾ നൽകുന്നു.

React.lazy, Suspense എന്നിവ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ഇതാ:

            
import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, React.lazy ഉപയോഗിച്ച് MyComponent അസിൻക്രണസായി ലോഡ് ചെയ്യുന്നു. കമ്പോണന്റ് ലോഡ് ചെയ്യുമ്പോൾ Suspense കമ്പോണന്റ് ഒരു ഫാൾബാക്ക് UI പ്രദർശിപ്പിക്കുന്നു.

5. വെർച്വലൈസേഷൻ

വലിയ ലിസ്റ്റുകളോ ടേബിളുകളോ കാര്യക്ഷമമായി റെൻഡർ ചെയ്യുന്നതിനുള്ള ഒരു സാങ്കേതികതയാണ് വെർച്വലൈസേഷൻ. എല്ലാ ഇനങ്ങളും ഒരേസമയം റെൻഡർ ചെയ്യുന്നതിനുപകരം, നിലവിൽ സ്ക്രീനിൽ ദൃശ്യമാകുന്ന ഇനങ്ങൾ മാത്രമേ വെർച്വലൈസേഷൻ റെൻഡർ ചെയ്യുകയുള്ളൂ. ഉപയോക്താവ് സ്ക്രോൾ ചെയ്യുമ്പോൾ, പുതിയ ഇനങ്ങൾ റെൻഡർ ചെയ്യുകയും പഴയ ഇനങ്ങൾ DOM-ൽ നിന്ന് നീക്കം ചെയ്യുകയും ചെയ്യുന്നു.

react-virtualized, react-window പോലുള്ള ലൈബ്രറികൾ റിയാക്ട് ആപ്ലിക്കേഷനുകളിൽ വെർച്വലൈസേഷൻ നടപ്പിലാക്കുന്നതിനുള്ള കമ്പോണന്റുകൾ നൽകുന്നു.

6. ഡീബൗൺസിംഗും ത്രോട്ടിലിംഗും

ഒരു ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യുന്ന നിരക്ക് പരിമിതപ്പെടുത്തുന്നതിനുള്ള ടെക്നിക്കുകളാണ് ഡീബൗൺസിംഗും ത്രോട്ടിലിംഗും. ഒരു നിശ്ചിത കാലയളവിലെ നിഷ്‌ക്രിയത്വത്തിനുശേഷം ഒരു ഫംഗ്ഷന്റെ എക്സിക്യൂഷൻ ഡീബൗൺസിംഗ് വൈകിപ്പിക്കുന്നു. ത്രോട്ടിലിംഗ് ഒരു നിശ്ചിത സമയപരിധിക്കുള്ളിൽ ഒരു ഫംഗ്ഷൻ പരമാവധി ഒരു തവണ എക്സിക്യൂട്ട് ചെയ്യുന്നു.

സ്ക്രോൾ ഇവന്റുകൾ, റീസൈസ് ഇവന്റുകൾ, ഇൻപുട്ട് ഇവന്റുകൾ എന്നിങ്ങനെയുള്ള വേഗത്തിൽ പ്രവർത്തിക്കുന്ന ഇവന്റുകൾ കൈകാര്യം ചെയ്യുന്നതിന് ഈ ടെക്നിക്കുകൾ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. ഈ ഇവന്റുകളെ ഡീബൗൺസ് ചെയ്യുകയോ ത്രോട്ടിൽ ചെയ്യുകയോ ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് അമിതമായ റീ-റെൻഡറുകൾ തടയാനും പ്രകടനം മെച്ചപ്പെടുത്താനും കഴിയും.

ഉദാഹരണത്തിന്, ഒരു ഇൻപുട്ട് ഇവന്റ് ഡീബൗൺസ് ചെയ്യാൻ നിങ്ങൾക്ക് lodash.debounce ഫംഗ്ഷൻ ഉപയോഗിക്കാം:

            
import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';

function ExampleComponent() {
  const [text, setText] = useState('');

  const handleChange = useCallback(
    debounce((event) => {
      setText(event.target.value);
    }, 300),
    []
  );

  return (
    <input type="text" onChange={handleChange} />
  );
}

export default ExampleComponent;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, handleChange ഫംഗ്ഷൻ 300 മില്ലിസെക്കൻഡ് കാലതാമസത്തോടെ ഡീബൗൺസ് ചെയ്തിരിക്കുന്നു. ഇതിനർത്ഥം, ഉപയോക്താവ് 300 മില്ലിസെക്കൻഡ് ടൈപ്പ് ചെയ്യുന്നത് നിർത്തിയതിന് ശേഷം മാത്രമേ setText ഫംഗ്ഷൻ വിളിക്കപ്പെടുകയുള്ളൂ.

യഥാർത്ഥ ലോക ഉദാഹരണങ്ങളും കേസ് സ്റ്റഡികളും

റിയാക്ട് ബാച്ചിംഗിന്റെയും ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളുടെയും പ്രായോഗിക സ്വാധീനം വ്യക്തമാക്കാൻ, നമുക്ക് ചില യഥാർത്ഥ ലോക ഉദാഹരണങ്ങൾ പരിഗണിക്കാം:

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

ബാച്ചിംഗ് പ്രശ്നങ്ങൾ ഡീബഗ് ചെയ്യൽ

ബാച്ചിംഗ് സാധാരണയായി പ്രകടനം മെച്ചപ്പെടുത്തുമെങ്കിലും, ബാച്ചിംഗുമായി ബന്ധപ്പെട്ട പ്രശ്നങ്ങൾ ഡീബഗ് ചെയ്യേണ്ട സാഹചര്യങ്ങൾ ഉണ്ടാകാം. ബാച്ചിംഗ് പ്രശ്നങ്ങൾ ഡീബഗ് ചെയ്യുന്നതിനുള്ള ചില നുറുങ്ങുകൾ ഇതാ:

• റിയാക്ട് ഡെവലപ്പർ ടൂൾസ് ഉപയോഗിക്കുക: റിയാക്ട് ഡെവലപ്പർ ടൂൾസ് കമ്പോണന്റ് ട്രീ പരിശോധിക്കാനും റീ-റെൻഡറുകൾ നിരീക്ഷിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു. അനാവശ്യമായി റീ-റെൻഡർ ചെയ്യുന്ന കമ്പോണന്റുകൾ തിരിച്ചറിയാൻ ഇത് നിങ്ങളെ സഹായിക്കും.
• console.log സ്റ്റേറ്റ്‌മെന്റുകൾ ഉപയോഗിക്കുക: നിങ്ങളുടെ കമ്പോണന്റുകൾക്കുള്ളിൽ console.log സ്റ്റേറ്റ്‌മെന്റുകൾ ചേർക്കുന്നത് അവ എപ്പോൾ റീ-റെൻഡർ ചെയ്യുന്നുവെന്നും റീ-റെൻഡറുകൾക്ക് കാരണമെന്താണെന്നും കണ്ടെത്താൻ സഹായിക്കും.
• why-did-you-update ലൈബ്രറി ഉപയോഗിക്കുക: മുമ്പത്തെയും ഇപ്പോഴത്തെയും പ്രോപ്‌സും സ്റ്റേറ്റ് മൂല്യങ്ങളും താരതമ്യം ചെയ്തുകൊണ്ട് ഒരു കമ്പോണന്റ് എന്തിനാണ് റീ-റെൻഡർ ചെയ്യുന്നതെന്ന് തിരിച്ചറിയാൻ ഈ ലൈബ്രറി നിങ്ങളെ സഹായിക്കുന്നു.
• അനാവശ്യ സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ പരിശോധിക്കുക: നിങ്ങൾ അനാവശ്യമായി സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുന്നില്ലെന്ന് ഉറപ്പാക്കുക. ഉദാഹരണത്തിന്, ഒരേ മൂല്യത്തെ അടിസ്ഥാനമാക്കി സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുന്നതോ ഓരോ റെൻഡർ സൈക്കിളിലും സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുന്നതോ ഒഴിവാക്കുക.
• flushSync ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക: ബാച്ചിംഗ് പ്രശ്‌നങ്ങൾക്ക് കാരണമാകുന്നുവെന്ന് നിങ്ങൾ സംശയിക്കുന്നുവെങ്കിൽ, കമ്പോണന്റ് ഉടനടി അപ്‌ഡേറ്റ് ചെയ്യാൻ റിയാക്ടിനെ നിർബന്ധിക്കുന്നതിന് flushSync ഉപയോഗിക്കാൻ ശ്രമിക്കുക. എന്നിരുന്നാലും, flushSync മിതമായി ഉപയോഗിക്കുക, കാരണം ഇത് പ്രകടനത്തെ പ്രതികൂലമായി ബാധിച്ചേക്കാം.

സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള മികച്ച രീതികൾ

ചുരുക്കത്തിൽ, റിയാക്ടിൽ സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ചില മികച്ച രീതികൾ താഴെ നൽകുന്നു:

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

ഉപസംഹാരം

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

ഈ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിക്കുകയും നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രകടനം തുടർച്ചയായി നിരീക്ഷിക്കുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് കാര്യക്ഷമവും ലോകമെമ്പാടുമുള്ള പ്രേക്ഷകർക്ക് ഉപയോഗിക്കാൻ ആസ്വാദ്യകരവുമായ റിയാക്ട് ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കാൻ കഴിയും.