റിയാക്ട് മെമ്മോ: ആഗോള ആപ്ലിക്കേഷനുകൾക്കായുള്ള ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളിലേക്ക് ഒരു ആഴത്തിലുള്ള പഠനം

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

എന്താണ് React.memo?

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

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

എന്തുകൊണ്ട് React.memo ഉപയോഗിക്കണം?

React.memo ഉപയോഗിക്കുന്നതിന്റെ പ്രധാന നേട്ടങ്ങൾ താഴെ പറയുന്നവയാണ്:

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

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

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

import React from 'react';

const MyComponent = (props) => {
 console.log('MyComponent റെൻഡർ ചെയ്തു');
 return (
 
{props.data}
 );
};

export default React.memo(MyComponent);

ഈ ഉദാഹരണത്തിൽ, data പ്രോപ്പ് മാറിയാൽ മാത്രമേ MyComponent വീണ്ടും റെൻഡർ ചെയ്യുകയുള്ളൂ. കമ്പോണന്റ് എപ്പോഴാണ് യഥാർത്ഥത്തിൽ റീ-റെൻഡർ ചെയ്യുന്നതെന്ന് പരിശോധിക്കാൻ console.log സ്റ്റേറ്റ്‌മെൻ്റ് നിങ്ങളെ സഹായിക്കും.

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

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

താഴെ പറയുന്ന ഉദാഹരണം പരിഗണിക്കുക:

import React, { useState } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent റെൻഡർ ചെയ്തു');
 return (
 
{props.data.name}
 );
};

const MemoizedComponent = React.memo(MyComponent);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user }); // ഒരേ മൂല്യങ്ങളുള്ള ഒരു പുതിയ ഒബ്ജക്റ്റ് ഉണ്ടാക്കുന്നു
 };

 return (
 

 
 Update User
 
 );
};

export default App;

ഈ സാഹചര്യത്തിൽ, user ഒബ്ജക്റ്റിൻ്റെ മൂല്യങ്ങൾ (name, age) ഒന്നുതന്നെയാണെങ്കിലും, handleClick ഫംഗ്ഷൻ ഓരോ തവണ വിളിക്കുമ്പോഴും ഒരു പുതിയ ഒബ്ജക്റ്റ് റെഫറൻസ് ഉണ്ടാക്കുന്നു. അതിനാൽ, data പ്രോപ്പ് മാറിയതായി (കാരണം ഒബ്ജക്റ്റ് റെഫറൻസ് വ്യത്യസ്തമാണ്) React.memo കാണുകയും MyComponent റീ-റെൻഡർ ചെയ്യുകയും ചെയ്യും.

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

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

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

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

const MyComponent = (props) => {
 console.log('MyComponent റെൻഡർ ചെയ്തു');
 return (
 
{props.data.name}
 );
};

const areEqual = (prevProps, nextProps) => {
 return prevProps.data.name === nextProps.data.name && prevProps.data.age === nextProps.data.age;
};

const MemoizedComponent = memo(MyComponent, areEqual);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user });
 };

 return (
 

 
 Update User
 
 );
};

export default App;

ഈ പുതുക്കിയ ഉദാഹരണത്തിൽ, areEqual ഫംഗ്ഷൻ user ഒബ്ജക്റ്റുകളുടെ name, age പ്രോപ്പർട്ടികളെ താരതമ്യം ചെയ്യുന്നു. ഇപ്പോൾ name അല്ലെങ്കിൽ age മാറിയാൽ മാത്രമേ MemoizedComponent റീ-റെൻഡർ ചെയ്യുകയുള്ളൂ.

എപ്പോൾ React.memo ഉപയോഗിക്കണം

React.memo താഴെ പറയുന്ന സാഹചര്യങ്ങളിൽ ഏറ്റവും ഫലപ്രദമാണ്:

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

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

React.memo-യുടെ ബദലുകൾ

React.memo ഒരു ശക്തമായ ഉപകരണമാണെങ്കിലും, റിയാക്ട് കമ്പോണന്റ് പെർഫോമൻസ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ഒരേയൊരു ഓപ്ഷനല്ല ഇത്. ചില ബദലുകളും അനുബന്ധ ടെക്നിക്കുകളും താഴെ നൽകുന്നു:

1. PureComponent

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

import React from 'react';

class MyComponent extends React.PureComponent {
 render() {
 console.log('MyComponent റെൻഡർ ചെയ്തു');
 return (
 
{this.props.data}
 );
 }
}

export default MyComponent;

ക്ലാസ് കമ്പോണന്റുകളിൽ അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയുന്നതിനുള്ള പരമ്പരാഗത മാർഗ്ഗമായിരുന്ന shouldComponentUpdate സ്വമേധയാ നടപ്പിലാക്കുന്നതിനുള്ള സൗകര്യപ്രദമായ ഒരു ബദലാണ് PureComponent.

2. shouldComponentUpdate

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

import React from 'react';

class MyComponent extends React.Component {
 shouldComponentUpdate(nextProps, nextState) {
 return nextProps.data !== this.props.data;
 }

 render() {
 console.log('MyComponent റെൻഡർ ചെയ്തു');
 return (
 
{this.props.data}
 );
 }
}

export default MyComponent;

shouldComponentUpdate ഇപ്പോഴും ലഭ്യമാണെങ്കിലും, അതിൻ്റെ ലാളിത്യവും ഉപയോഗ എളുപ്പവും കാരണം PureComponent, React.memo എന്നിവയാണ് പൊതുവെ തിരഞ്ഞെടുക്കപ്പെടുന്നത്.

3. useCallback

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

താഴെ പറയുന്ന ഉദാഹരണം പരിഗണിക്കുക:

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

const MyComponent = (props) => {
 console.log('MyComponent റെൻഡർ ചെയ്തു');
 return (
 Click Me
 );
};

const MemoizedComponent = memo(MyComponent);

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

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

 return (
 

 
 
Count: {count}
 
 );
};

export default App;

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

4. useMemo

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

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

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

 const expensiveCalculation = (str) => {
 console.log('കണക്കുകൂട്ടുന്നു...');
 let result = 0;
 for (let i = 0; i < str.length * 1000000; i++) {
 result++;
 }
 return result;
 };

 const memoizedResult = useMemo(() => expensiveCalculation(input), [input]);

 return (
 

  setInput(e.target.value)} />
 
Result: {memoizedResult}
 
 );
};

export default App;

ഈ ഉദാഹരണത്തിൽ, input സ്റ്റേറ്റ് മാറുമ്പോൾ മാത്രമേ expensiveCalculation ഫംഗ്ഷൻ വിളിക്കപ്പെടുന്നുള്ളൂ എന്ന് useMemo ഉറപ്പാക്കുന്നു. ഇത് ഓരോ റെൻഡറിലും കണക്കുകൂട്ടൽ വീണ്ടും പ്രവർത്തിക്കുന്നത് തടയുന്നു, ഇത് പെർഫോമൻസ് ഗണ്യമായി മെച്ചപ്പെടുത്തും.

ആഗോള ആപ്ലിക്കേഷനുകൾക്കുള്ള പ്രായോഗിക ഉദാഹരണങ്ങൾ

ആഗോള ആപ്ലിക്കേഷനുകളിൽ React.memo-ഉം അനുബന്ധ ടെക്നിക്കുകളും എങ്ങനെ പ്രയോഗിക്കാമെന്നതിൻ്റെ ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ പരിഗണിക്കാം:

1. ലാംഗ്വേജ് സെലക്ടർ

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

import React, { memo } from 'react';

const LanguageItem = ({ language, onSelect }) => {
 console.log(`LanguageItem ${language} റെൻഡർ ചെയ്തു`);
 return (
 
 onSelect(language)}>{language}
 );
};

const MemoizedLanguageItem = memo(LanguageItem);

const LanguageSelector = ({ languages, onSelect }) => {
 return (
 

 {languages.map((language) => (
 
 ))}
 
 );
};

export default LanguageSelector;

ഈ ഉദാഹരണത്തിൽ, language അല്ലെങ്കിൽ onSelect പ്രോപ്പ് മാറിയാൽ മാത്രമേ MemoizedLanguageItem റീ-റെൻഡർ ചെയ്യുകയുള്ളൂ. ഭാഷകളുടെ ലിസ്റ്റ് ദൈർഘ്യമേറിയതാണെങ്കിൽ അല്ലെങ്കിൽ onSelect ഹാൻഡ്‌ലർ സങ്കീർണ്ണമാണെങ്കിൽ ഇത് പ്രത്യേകിച്ചും പ്രയോജനകരമാകും.

2. കറൻസി കൺവെർട്ടർ

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

import React, { memo } from 'react';

const CurrencyItem = ({ currency, rate, onSelect }) => {
 console.log(`CurrencyItem ${currency} റെൻഡർ ചെയ്തു`);
 return (
 
 onSelect(currency)}>{currency} - {rate}
 );
};

const MemoizedCurrencyItem = memo(CurrencyItem);

const CurrencyConverter = ({ currencies, onSelect }) => {
 return (
 

 {Object.entries(currencies).map(([currency, rate]) => (
 
 ))}
 
 );
};

export default CurrencyConverter;

ഈ ഉദാഹരണത്തിൽ, currency, rate, അല്ലെങ്കിൽ onSelect പ്രോപ്പ് മാറിയാൽ മാത്രമേ MemoizedCurrencyItem റീ-റെൻഡർ ചെയ്യുകയുള്ളൂ. കറൻസികളുടെ ലിസ്റ്റ് ദൈർഘ്യമേറിയതാണെങ്കിൽ അല്ലെങ്കിൽ വിനിമയ നിരക്കുകളുടെ അപ്‌ഡേറ്റുകൾ അടിക്കടിയാണെങ്കിൽ ഇത് പെർഫോമൻസ് മെച്ചപ്പെടുത്തും.

3. ഉപയോക്തൃ പ്രൊഫൈൽ ഡിസ്പ്ലേ

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

import React, { memo } from 'react';

const UserProfile = ({ user }) => {
 console.log('UserProfile റെൻഡർ ചെയ്തു');
 return (
 

 
{user.name}
 
 
{user.bio}
 
 );
};

export default memo(UserProfile);

ഉപയോക്തൃ ഡാറ്റ തന്നെ കൂടെക്കൂടെ മാറാത്ത, വലുതും അടിക്കടി അപ്ഡേറ്റ് ചെയ്യുന്നതുമായ ഒരു ഡാഷ്‌ബോർഡിന്റെയോ ആപ്ലിക്കേഷൻ്റെയോ ഭാഗമാണ് `UserProfile` എങ്കിൽ ഇത് പ്രത്യേകിച്ചും സഹായകമാണ്.

സാധാരണ പിഴവുകളും അവ എങ്ങനെ ഒഴിവാക്കാം എന്നും

React.memo ഒരു വിലപ്പെട്ട ഒപ്റ്റിമൈസേഷൻ ഉപകരണമാണെങ്കിലും, സാധാരണ പിഴവുകളെക്കുറിച്ചും അവ എങ്ങനെ ഒഴിവാക്കാമെന്നതിനെക്കുറിച്ചും അറിഞ്ഞിരിക്കേണ്ടത് പ്രധാനമാണ്:

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

നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പ്രൊഫൈൽ ചെയ്യൽ

React.memo യഥാർത്ഥത്തിൽ പെർഫോമൻസ് മെച്ചപ്പെടുത്തുന്നുണ്ടോ എന്ന് നിർണ്ണയിക്കാനുള്ള ഏറ്റവും നല്ല മാർഗം നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പ്രൊഫൈൽ ചെയ്യുക എന്നതാണ്. റിയാക്ട് ഡെവലപ്പർ ടൂൾസ് പ്രൊഫൈലർ, React.Profiler എപിഐ എന്നിവയുൾപ്പെടെ പ്രൊഫൈലിംഗിനായി റിയാക്ട് നിരവധി ടൂളുകൾ നൽകുന്നു.

റിയാക്ട് ഡെവലപ്പർ ടൂൾസ് പ്രൊഫൈലർ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ പെർഫോമൻസ് ട്രെയ്സുകൾ റെക്കോർഡ് ചെയ്യാനും കൂടെക്കൂടെ റീ-റെൻഡർ ചെയ്യുന്ന കമ്പോണന്റുകൾ കണ്ടെത്താനും നിങ്ങളെ അനുവദിക്കുന്നു. React.Profiler എപിഐ നിർദ്ദിഷ്ട കമ്പോണന്റുകളുടെ റെൻഡർ സമയം പ്രോഗ്രമാറ്റിക്കായി അളക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പ്രൊഫൈൽ ചെയ്യുന്നതിലൂടെ, മെമ്മോയിസേഷനിൽ നിന്ന് ഏറ്റവും കൂടുതൽ പ്രയോജനം ലഭിക്കുന്ന കമ്പോണന്റുകൾ കണ്ടെത്താനും React.memo യഥാർത്ഥത്തിൽ പെർഫോമൻസ് മെച്ചപ്പെടുത്തുന്നുണ്ടെന്ന് ഉറപ്പാക്കാനും നിങ്ങൾക്ക് കഴിയും.

ഉപസംഹാരം

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

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

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

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

• React.memo ഡോക്യുമെന്റേഷൻ
• useCallback ഡോക്യുമെന്റേഷൻ
• useMemo ഡോക്യുമെന്റേഷൻ
• റിയാക്ടിൽ പെർഫോമൻസ് ഒപ്റ്റിമൈസ് ചെയ്യൽ
• റിയാക്ട് പ്രൊഫൈലർ ഉപയോഗിച്ച് കമ്പോണന്റുകൾ പ്രൊഫൈൽ ചെയ്യൽ