React memo: കമ്പോണന്റ് മെമ്മോയിസേഷനിലും റെൻഡർ ഒപ്റ്റിമൈസേഷനിലും വൈദഗ്ദ്ധ്യം നേടാം

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

എന്താണ് കമ്പോണന്റ് മെമ്മോയിസേഷൻ?

ഒരു കമ്പോണന്റിന്റെ പ്രോപ്‌സുകൾക്ക് (props) മാറ്റം വരാത്ത സാഹചര്യങ്ങളിൽ അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയുന്ന ഒരു ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കാണ് കമ്പോണന്റ് മെമ്മോയിസേഷൻ. നൽകിയിട്ടുള്ള ഒരു കൂട്ടം പ്രോപ്‌സുകൾക്കായി റെൻഡർ ചെയ്ത ഔട്ട്പുട്ട് ഓർമ്മിച്ചുവെക്കുന്നതിലൂടെ (memorizing), പ്രോപ്‌സുകൾക്ക് മാറ്റമില്ലെങ്കിൽ കമ്പോണന്റ് വീണ്ടും റെൻഡർ ചെയ്യുന്നത് ഒഴിവാക്കാൻ റിയാക്ടിന് കഴിയും. ഇത് കാര്യമായ പ്രകടന മെച്ചപ്പെടുത്തലിന് കാരണമാകുന്നു, പ്രത്യേകിച്ചും കമ്പ്യൂട്ടേഷണലി എക്സ്പെൻസീവ് ആയ കമ്പോണന്റുകളിലോ അല്ലെങ്കിൽ കൂടെക്കൂടെ റീ-റെൻഡർ ചെയ്യപ്പെടുന്ന കമ്പോണന്റുകളിലോ.

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

React.memo-യെ പരിചയപ്പെടാം

React.memo എന്നത് റിയാക്ട് നൽകുന്ന ഒരു ഹയർ-ഓർഡർ കമ്പോണന്റ് (HOC) ആണ്, ഇത് ഒരു ഫംഗ്ഷണൽ കമ്പോണന്റിനെ മെമ്മോയിസ് ചെയ്യുന്നു. ഇത് അടിസ്ഥാനപരമായി റിയാക്ടിനോട് പറയുന്നത്, ഒരു നിശ്ചിത കൂട്ടം പ്രോപ്‌സുകൾക്കായുള്ള കമ്പോണന്റിന്റെ ഔട്ട്പുട്ട് "ഓർമ്മിച്ചു വെക്കാനും", പ്രോപ്‌സുകൾക്ക് യഥാർത്ഥത്തിൽ മാറ്റം വന്നിട്ടുണ്ടെങ്കിൽ മാത്രം കമ്പോണന്റ് വീണ്ടും റെൻഡർ ചെയ്യാനും ആണ്.

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

React.memo നിലവിലെ പ്രോപ്‌സുകളെ മുമ്പത്തെ പ്രോപ്‌സുകളുമായി ഷാലോ കംപാരിസൺ (shallowly compare) നടത്തുന്നു. പ്രോപ്‌സുകൾ സമാനമാണെങ്കിൽ (അല്ലെങ്കിൽ ഒരു കസ്റ്റം കംപാരിസൺ ഫംഗ്ഷൻ true എന്ന് റിട്ടേൺ ചെയ്യുകയാണെങ്കിൽ), React.memo കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുന്നത് ഒഴിവാക്കുന്നു. അല്ലെങ്കിൽ, അത് സാധാരണ പോലെ കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുന്നു.

React.memo-യുടെ അടിസ്ഥാന ഉപയോഗം

React.memo ഉപയോഗിക്കുന്നതിന്, നിങ്ങളുടെ ഫംഗ്ഷണൽ കമ്പോണന്റിനെ അതുകൊണ്ട് റാപ്പ് ചെയ്താൽ മതി:

            import React from 'react';

const MyComponent = (props) => {
  // Component logic
  return (
    <div>
      {props.data}
    </div>
  );
};

export default React.memo(MyComponent);

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, data എന്ന പ്രോപ് മാറുമ്പോൾ മാത്രമേ MyComponent റീ-റെൻഡർ ചെയ്യുകയുള്ളൂ. data പ്രോപ് സമാനമായി തുടരുകയാണെങ്കിൽ, React.memo കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുന്നത് തടയും.

ഷാലോ കംപാരിസൺ മനസ്സിലാക്കാം

നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, React.memo പ്രോപ്‌സുകളുടെ ഒരു ഷാലോ കംപാരിസൺ ആണ് നടത്തുന്നത്. ഇതിനർത്ഥം, പ്രോപ്‌സുകളായി കൈമാറുന്ന ഒബ്‌ജക്റ്റുകളുടെയും അറേകളുടെയും ഏറ്റവും മുകളിലുള്ള പ്രോപ്പർട്ടികൾ മാത്രമേ ഇത് താരതമ്യം ചെയ്യുകയുള്ളൂ. ഈ ഒബ്‌ജക്റ്റുകളുടെയോ അറേകളുടെയോ ഉള്ളടക്കം ആഴത്തിൽ ഇത് താരതമ്യം ചെയ്യുന്നില്ല.

ഒബ്‌ജക്റ്റുകളുടെയോ അറേകളുടെയോ റഫറൻസുകൾ ഒന്നാണോ എന്ന് ഷാലോ കംപാരിസൺ പരിശോധിക്കുന്നു. നിങ്ങൾ ഇൻലൈനായി ഉണ്ടാക്കുകയോ മാറ്റം വരുത്തുകയോ ചെയ്യുന്ന ഒബ്ജക്റ്റുകളോ അറേകളോ ആണ് പ്രോപ്‌സുകളായി നൽകുന്നതെങ്കിൽ, അവയുടെ ഉള്ളടക്കം ഒന്നാണെങ്കിൽ പോലും React.memo അവയെ വ്യത്യസ്തമായി കണക്കാക്കാൻ സാധ്യതയുണ്ട്, ഇത് അനാവശ്യമായ റീ-റെൻഡറുകൾക്ക് കാരണമാകും.

ഉദാഹരണം: ഷാലോ കംപാരിസണിന്റെ അപകടങ്ങൾ

            import React, { useState } from 'react';

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

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // This will cause MyComponent to re-render every time
    // because a new object is created on each click.
    setData({ ...data });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, data ഒബ്‌ജക്റ്റിലെ name പ്രോപ്പർട്ടി മാറുന്നില്ലെങ്കിലും, ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോഴെല്ലാം MyComponent റീ-റെൻഡർ ചെയ്യും. കാരണം, ഓരോ ക്ലിക്കിലും സ്പ്രെഡ് ഓപ്പറേറ്റർ ({ ...data }) ഉപയോഗിച്ച് ഒരു പുതിയ ഒബ്ജക്റ്റ് ഉണ്ടാക്കുന്നു, ഇത് ഒരു പുതിയ റഫറൻസിന് കാരണമാകുന്നു.

കസ്റ്റം കംപാരിസൺ ഫംഗ്ഷൻ

ഷാലോ കംപാരിസണിന്റെ പരിമിതികൾ മറികടക്കാൻ, React.memo രണ്ടാമത്തെ ആർഗ്യുമെന്റായി ഒരു കസ്റ്റം കംപാരിസൺ ഫംഗ്ഷൻ നൽകാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഈ ഫംഗ്ഷൻ രണ്ട് ആർഗ്യുമെന്റുകൾ എടുക്കുന്നു: മുമ്പത്തെ പ്രോപ്‌സും (previous props) അടുത്ത പ്രോപ്‌സും (next props). പ്രോപ്‌സുകൾ തുല്യമാണെങ്കിൽ (അതായത് കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യേണ്ടതില്ലെങ്കിൽ) ഇത് true എന്നും അല്ലെങ്കിൽ false എന്നും റിട്ടേൺ ചെയ്യണം.

സിന്റാക്സ്

            React.memo(MyComponent, (prevProps, nextProps) => {
  // Custom comparison logic
  return true; // Return true to prevent re-render, false to allow re-render
});

            

              
                Copy
              
            
          

ഉദാഹരണം: ഒരു കസ്റ്റം കംപാരിസൺ ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നത്

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

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data.name}</div>;
}, (prevProps, nextProps) => {
  // Only re-render if the name property changes
  return prevProps.data.name === nextProps.data.name;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // This will only cause MyComponent to re-render if the name changes
    setData({ ...data, age: data.age + 1 });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

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

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

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

താഴെ പറയുന്ന സാഹചര്യങ്ങളിൽ React.memo ഉപയോഗിക്കുന്നത് പരിഗണിക്കാം:

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

താഴെ പറയുന്ന സാഹചര്യങ്ങളിൽ React.memo ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക:

• അപൂർവ്വമായി റീ-റെൻഡർ ചെയ്യുന്ന കമ്പോണന്റുകൾ: ഷാലോ കംപാരിസണിന്റെ ഓവർഹെഡ് മെമ്മോയിസേഷന്റെ പ്രയോജനങ്ങളെക്കാൾ കൂടുതലായിരിക്കാം.
• ഇടയ്ക്കിടെ മാറിക്കൊണ്ടിരിക്കുന്ന പ്രോപ്‌സുകളുള്ള കമ്പോണന്റുകൾ: പ്രോപ്‌സുകൾ നിരന്തരം മാറിക്കൊണ്ടിരിക്കുകയാണെങ്കിൽ, React.memo ഒരുപാട് റീ-റെൻഡറുകൾ തടയില്ല.
• കുറഞ്ഞ റെൻഡറിംഗ് ലോജിക്കുള്ള ലളിതമായ കമ്പോണന്റുകൾ: പ്രകടനത്തിലെ നേട്ടങ്ങൾ വളരെ ചെറുതായിരിക്കാം.

React.memo മറ്റ് ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളുമായി സംയോജിപ്പിക്കുന്നത്

React.memo പലപ്പോഴും പരമാവധി പ്രകടന നേട്ടങ്ങൾ കൈവരിക്കുന്നതിന് മറ്റ് റിയാക്ട് ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളുമായി ചേർന്നാണ് ഉപയോഗിക്കുന്നത്.

useCallback

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

useCallback ഇല്ലാതെ, പാരന്റ് കമ്പോണന്റിന്റെ ഓരോ റെൻഡറിലും ഒരു പുതിയ ഫംഗ്ഷൻ ഇൻസ്റ്റൻസ് ഉണ്ടാകുന്നു, ഫംഗ്ഷൻ ലോജിക്ക് മാറിയിട്ടില്ലെങ്കിൽ പോലും. ഇത് React.memo-യെ ഫംഗ്ഷൻ പ്രോപ്പ് മാറിയതായി കണക്കാക്കാൻ കാരണമാവുകയും അനാവശ്യമായ റീ-റെൻഡറുകളിലേക്ക് നയിക്കുകയും ചെയ്യും.

ഉദാഹരണം: React.memo-യ്‌ക്കൊപ്പം useCallback ഉപയോഗിക്കുന്നത്

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

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <button onClick={props.onClick}>Click Me</button>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <MyComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, count സ്റ്റേറ്റ് മാറുമ്പോൾ മാത്രം handleClick ഫംഗ്ഷൻ വീണ്ടും ഉണ്ടാകുന്നുള്ളൂ എന്ന് useCallback ഉറപ്പാക്കുന്നു. count സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് കാരണം പാരന്റ് കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുമ്പോൾ MyComponent അനാവശ്യമായി റീ-റെൻഡർ ചെയ്യുന്നത് ഇത് തടയുന്നു.

useMemo

useMemo ഒരു വാല്യുവിനെ മെമ്മോയിസ് ചെയ്യുന്ന ഒരു റിയാക്ട് ഹുക്ക് ആണ്. ഇത് ഒരു മെമ്മോയിസ് ചെയ്ത വാല്യു നൽകുന്നു, അതിന്റെ ഡിപൻഡൻസികളിൽ ഒന്ന് മാറുമ്പോൾ മാത്രമേ ഈ വാല്യു മാറുകയുള്ളൂ. മെമ്മോയിസ് ചെയ്ത കമ്പോണന്റുകളിലേക്ക് പ്രോപ്‌സായി കൈമാറുന്ന സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകൾക്കോ ഡിറൈവ്ഡ് ഡാറ്റയ്‌ക്കോ ഇത് ഉപയോഗപ്രദമാണ്.

useCallback-ന് സമാനമായി, useMemo ഇല്ലാതെ, ഇൻപുട്ട് വാല്യുകൾക്ക് മാറ്റം വന്നിട്ടില്ലെങ്കിൽ പോലും ഓരോ റെൻഡറിലും സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകൾ വീണ്ടും നടപ്പിലാക്കും. ഇത് പ്രകടനത്തെ കാര്യമായി ബാധിക്കും.

ഉദാഹരണം: React.memo-യ്‌ക്കൊപ്പം useMemo ഉപയോഗിക്കുന്നത്

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

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data}</div>;
});

const ParentComponent = () => {
  const [input, setInput] = useState('');

  const data = useMemo(() => {
    // Simulate a complex calculation
    console.log('Calculating data...');
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return input + result;
  }, [input]);

  return (
    <div>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <MyComponent data={data} />
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, input സ്റ്റേറ്റ് മാറുമ്പോൾ മാത്രം data വാല്യു വീണ്ടും കണക്കാക്കുന്നുള്ളൂ എന്ന് useMemo ഉറപ്പാക്കുന്നു. ഇത് MyComponent അനാവശ്യമായി റീ-റെൻഡർ ചെയ്യുന്നത് തടയുകയും പാരന്റ് കമ്പോണന്റിന്റെ ഓരോ റെൻഡറിലും സങ്കീർണ്ണമായ കണക്കുകൂട്ടൽ വീണ്ടും നടത്തുന്നത് ഒഴിവാക്കുകയും ചെയ്യുന്നു.

പ്രായോഗിക ഉദാഹരണങ്ങളും കേസ് സ്റ്റഡീസും

React.memo ഫലപ്രദമായി ഉപയോഗിക്കാൻ കഴിയുന്ന ചില യഥാർത്ഥ സാഹചര്യങ്ങൾ പരിഗണിക്കാം:

ഉദാഹരണം 1: ഒരു ലിസ്റ്റ് ഐറ്റം കമ്പോണന്റ് ഒപ്റ്റിമൈസ് ചെയ്യൽ

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

ലിസ്റ്റ് ഐറ്റം കമ്പോണന്റിനെ React.memo ഉപയോഗിച്ച് റാപ്പ് ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയാനും ലിസ്റ്റിന്റെ പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്താനും കഴിയും.

ഉദാഹരണം 2: ഒരു സങ്കീർണ്ണമായ ഫോം കമ്പോണന്റ് ഒപ്റ്റിമൈസ് ചെയ്യൽ

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

React.memo ഉപയോഗിക്കുകയും ഫോം കമ്പോണന്റിലേക്ക് കൈമാറുന്ന പ്രോപ്‌സുകൾ ശ്രദ്ധാപൂർവ്വം കൈകാര്യം ചെയ്യുകയും ചെയ്യുന്നതിലൂടെ (ഉദാഹരണത്തിന്, ഇവന്റ് ഹാൻഡ്‌ലറുകൾക്കായി useCallback ഉപയോഗിച്ച്), നിങ്ങൾക്ക് അനാവശ്യമായ റീ-റെൻഡറുകൾ കുറയ്ക്കാനും ഫോമിന്റെ പ്രകടനം മെച്ചപ്പെടുത്താനും കഴിയും.

ഉദാഹരണം 3: ഒരു ചാർട്ട് കമ്പോണന്റ് ഒപ്റ്റിമൈസ് ചെയ്യൽ

ചാർട്ട് കമ്പോണന്റുകളിൽ പലപ്പോഴും സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകളും റെൻഡറിംഗ് ലോജിക്കും ഉൾപ്പെടുന്നു. ചാർട്ട് കമ്പോണന്റിലേക്ക് കൈമാറുന്ന ഡാറ്റ ഇടയ്ക്കിടെ മാറുന്നില്ലെങ്കിൽ, React.memo ഉപയോഗിക്കുന്നത് അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയാനും ചാർട്ടിന്റെ റെസ്പോൺസീവ്നസ് മെച്ചപ്പെടുത്താനും സഹായിക്കും.

React.memo ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

React.memo-യുടെ പ്രയോജനങ്ങൾ പരമാവധിയാക്കാൻ, ഈ മികച്ച രീതികൾ പിന്തുടരുക:

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

React.memo-യ്ക്കുള്ള ബദലുകൾ

React.memo കമ്പോണന്റ് മെമ്മോയിസേഷനുള്ള ഒരു ശക്തമായ ടൂൾ ആണെങ്കിലും, നിങ്ങൾക്ക് പരിഗണിക്കാവുന്ന മറ്റ് സമീപനങ്ങളുമുണ്ട്:

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

വിപുലമായ പരിഗണനകൾ

കോൺടെക്സ്റ്റും React.memo-യും കൈകാര്യം ചെയ്യൽ

റിയാക്ട് കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്ന കമ്പോണന്റുകൾ, അവയുടെ പ്രോപ്‌സുകൾക്ക് മാറ്റം വന്നിട്ടില്ലെങ്കിൽ പോലും, കോൺടെക്സ്റ്റ് വാല്യു മാറുമ്പോഴെല്ലാം റീ-റെൻഡർ ചെയ്യും. React.memo ഉപയോഗിക്കുമ്പോൾ ഇത് ഒരു വെല്ലുവിളിയാകാം, കാരണം കോൺടെക്സ്റ്റ് വാല്യു ഇടയ്ക്കിടെ മാറുകയാണെങ്കിൽ മെമ്മോയിസേഷൻ മറികടക്കപ്പെടും.

ഇത് പരിഹരിക്കുന്നതിന്, മെമ്മോയിസ് ചെയ്യാത്ത ഒരു കമ്പോണന്റിനുള്ളിൽ useContext ഹുക്ക് ഉപയോഗിക്കുകയും തുടർന്ന് പ്രസക്തമായ വാല്യുകൾ പ്രോപ്‌സായി മെമ്മോയിസ് ചെയ്ത കമ്പോണന്റിലേക്ക് കൈമാറുകയും ചെയ്യുന്നത് പരിഗണിക്കാം. ഇത് ഏതൊക്കെ കോൺടെക്സ്റ്റ് മാറ്റങ്ങളാണ് മെമ്മോയിസ് ചെയ്ത കമ്പോണന്റിന്റെ റീ-റെൻഡറുകൾക്ക് കാരണമാകുന്നതെന്ന് നിയന്ത്രിക്കാൻ നിങ്ങളെ അനുവദിക്കും.

React.memo പ്രശ്നങ്ങൾ ഡീബഗ് ചെയ്യൽ

React.memo ഉപയോഗിക്കുമ്പോൾ നിങ്ങൾ അപ്രതീക്ഷിതമായ റീ-റെൻഡറുകൾ നേരിടുന്നുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് പരിശോധിക്കാൻ കഴിയുന്ന ചില കാര്യങ്ങളുണ്ട്:

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

ഉപസംഹാരം

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

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

കൂടുതൽ വായനയ്ക്കും ഉറവിടങ്ങൾക്കും

• React.memo ഡോക്യുമെന്റേഷൻ
• റിയാക്ടിൽ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യൽ
• useMemo and useCallback