memo

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

• குறிப்பு
  • memo(Component, arePropsEqual?)
• பயன்பாடு
  • Props மாறாதபோது re-rendering-ஐ தவிர்த்தல்
  • State பயன்படுத்தி memoized component-ஐ update செய்தல்
  • Context பயன்படுத்தி memoized component-ஐ update செய்தல்
  • Props changes-ஐ குறைத்தல்
  • Custom comparison function குறிப்பிடுதல்
  • React Compiler பயன்படுத்தினால் இன்னும் React.memo தேவையா?
• Troubleshooting
  • Prop object, array, அல்லது function ஆக இருக்கும்போது என் component re-render ஆகிறது

குறிப்பு

memo(Component, arePropsEqual?)

ஒரு component-ன் memoized version பெற அதை memo-வில் wrap செய்யவும். அதன் props மாறாதவரை, parent component re-render ஆனாலும் உங்கள் component-ன் இந்த memoized version பொதுவாக re-render ஆகாது. ஆனால் React இன்னும் அதை re-render செய்யலாம்: memoization என்பது performance optimization; guarantee அல்ல.

import { memo } from 'react';

const SomeComponent = memo(function SomeComponent(props) {
  // ...
});

மேலும் examples-ஐ கீழே பார்க்கவும்.

Parameters

• Component: நீங்கள் memoize செய்ய விரும்பும் component. memo இந்த component-ஐ modify செய்யாது; அதற்கு பதிலாக புதிய memoized component-ஐ return செய்கிறது. Functions மற்றும் forwardRef components உட்பட எந்த valid React component-உம் ஏற்றுக்கொள்ளப்படும்.

• optional arePropsEqual: இரண்டு arguments ஏற்கும் function: component-ன் previous props மற்றும் new props. பழைய மற்றும் புதிய props சமமாக இருந்தால், அதாவது component புதிய props உடன் பழைய props போலவே அதே output render செய்து அதேபோல் நடந்து கொண்டால், இது true return செய்ய வேண்டும். இல்லையெனில் false return செய்ய வேண்டும். பொதுவாக, இந்த function-ஐ நீங்கள் குறிப்பிடமாட்டீர்கள். Default ஆக, React ஒவ்வொரு prop-ஐயும் Object.is மூலம் compare செய்யும்.

Returns

memo புதிய React component ஒன்றை return செய்கிறது. memo-க்கு கொடுக்கப்பட்ட component போலவே இது நடக்கும்; ஆனால் அதன் props மாறாதவரை parent re-render ஆகும்போது React அதை எப்போதும் re-render செய்யாது.

பயன்பாடு

Props மாறாதபோது re-rendering-ஐ தவிர்த்தல்

React பொதுவாக parent re-render ஆனாலெல்லாம் component-ஐ re-render செய்கிறது. memo மூலம், புதிய props பழைய props போலவே இருந்தால் parent re-render ஆனாலும் React re-render செய்யாத component ஒன்றை உருவாக்கலாம். இப்படிப்பட்ட component memoized என்று அழைக்கப்படுகிறது.

Component ஒன்றை memoize செய்ய, அதை memo-வில் wrap செய்து, அது return செய்யும் value-ஐ உங்கள் original component-க்கு பதிலாக பயன்படுத்தவும்:

const Greeting = memo(function Greeting({ name }) {
  return <h1>வணக்கம், {name}!</h1>;
});

export default Greeting;

React component எப்போதும் pure rendering logic கொண்டிருக்க வேண்டும். இதன் பொருள், அதன் props, state, context மாறவில்லை என்றால் அதே output return செய்ய வேண்டும். memo பயன்படுத்துவதன் மூலம், உங்கள் component இந்த requirement-ஐ பின்பற்றுகிறது என்று React-க்கு சொல்கிறீர்கள்; ஆகவே அதன் props மாறாதவரை React re-render செய்ய வேண்டியதில்லை. memo இருந்தாலும், அதன் சொந்த state மாறினால் அல்லது அது பயன்படுத்தும் context மாறினால் உங்கள் component re-render ஆகும்.

இந்த example-இல், name மாறும்போது Greeting component re-render ஆகிறது (ஏனெனில் அது அதன் props-இல் ஒன்று), ஆனால் address மாறும்போது re-render ஆகாது (ஏனெனில் அது prop ஆக Greeting-க்கு pass செய்யப்படவில்லை):

State பயன்படுத்தி memoized component-ஐ update செய்தல்

Component memoized ஆக இருந்தாலும், அதன் சொந்த state மாறும்போது அது இன்னும் re-render ஆகும். Memoization என்பது parent-இலிருந்து component-க்கு pass செய்யப்படும் props-ஐ மட்டுமே சார்ந்தது.

State variable-ஐ அதன் current value-க்கே set செய்தால், memo இல்லாவிட்டாலும் React உங்கள் component re-render ஆகாமல் தவிர்க்கும். உங்கள் component function கூடுதலாக ஒருமுறை call ஆகுவதை நீங்கள் இன்னும் பார்க்கலாம்; ஆனால் result discard செய்யப்படும்.

Context பயன்படுத்தி memoized component-ஐ update செய்தல்

Component memoized ஆக இருந்தாலும், அது பயன்படுத்தும் context மாறும்போது அது இன்னும் re-render ஆகும். Memoization என்பது parent-இலிருந்து component-க்கு pass செய்யப்படும் props-ஐ மட்டுமே சார்ந்தது.

ஏதாவது context-ன் ஒரு பகுதி மாறும்போது மட்டுமே உங்கள் component re-render ஆக வேண்டும் என்றால், component-ஐ இரண்டாக split செய்யவும். Outer component-இல் context-இலிருந்து தேவையானதை படித்து, அதை prop ஆக memoized child-க்கு pass செய்யவும்.

Props changes-ஐ குறைத்தல்

memo பயன்படுத்தும்போது, ஏதேனும் prop முந்தைய value-க்கு shallowly equal ஆக இல்லாவிட்டால் உங்கள் component re-render ஆகும். இதன் அர்த்தம், React உங்கள் component-இல் உள்ள ஒவ்வொரு prop-ஐயும் அதன் previous value-உடன் Object.is comparison மூலம் compare செய்கிறது. Object.is(3, 3) true, ஆனால் Object.is({}, {}) false என்பதை கவனிக்கவும்.

memo-இலிருந்து அதிக பயன் பெற, props மாறும் தடவைகளை குறைக்கவும். உதாரணமாக, prop ஒரு object என்றால், useMemo பயன்படுத்தி parent component ஒவ்வொரு முறையும் அந்த object-ஐ மீண்டும் create செய்வதைத் தவிர்க்கவும்:

function Page() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);

  const person = useMemo(
    () => ({ name, age }),
    [name, age]
  );

  return <Profile person={person} />;
}

const Profile = memo(function Profile({ person }) {
  // ...
});

Props changes-ஐ குறைக்கும் சிறந்த வழி, component தேவையான குறைந்தபட்ச தகவலை மட்டுமே props-இல் accept செய்கிறது என்பதை உறுதிசெய்வது. உதாரணமாக, முழு object-க்கு பதிலாக individual values-ஐ accept செய்யலாம்:

function Page() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);
  return <Profile name={name} age={age} />;
}

const Profile = memo(function Profile({ name, age }) {
  // ...
});

Individual values கூட சில நேரங்களில் குறைவாக மாறும் values-ஆக project செய்யப்படலாம். உதாரணமாக, இங்கே ஒரு component value-ஐ விட அதன் இருப்பை குறிக்கும் boolean-ஐ accept செய்கிறது:

function GroupsLanding({ person }) {
  const hasGroups = person.groups !== null;
  return <CallToAction hasGroups={hasGroups} />;
}

const CallToAction = memo(function CallToAction({ hasGroups }) {
  // ...
});

Memoized component-க்கு function pass செய்ய வேண்டியிருந்தால், அது ஒருபோதும் மாறாதபடி உங்கள் component-க்கு வெளியே declare செய்யவும், அல்லது re-renders இடையில் அதன் definition-ஐ cache செய்ய useCallback பயன்படுத்தவும்.

Custom comparison function குறிப்பிடுதல்

சில அரிதான cases-இல் memoized component-ன் props changes-ஐ குறைப்பது சாத்தியமில்லாமல் இருக்கலாம். அப்போது, shallow equality பயன்படுத்துவதற்கு பதிலாக பழைய மற்றும் புதிய props-ஐ compare செய்ய React பயன்படுத்தும் custom comparison function ஒன்றை வழங்கலாம். இந்த function memo-க்கு இரண்டாவது argument ஆக pass செய்யப்படும். புதிய props பழைய props போலவே அதே output-ஐ ஏற்படுத்தினால் மட்டுமே இது true return செய்ய வேண்டும்; இல்லையெனில் false return செய்ய வேண்டும்.

const Chart = memo(function Chart({ dataPoints }) {
  // ...
}, arePropsEqual);

function arePropsEqual(oldProps, newProps) {
  return (
    oldProps.dataPoints.length === newProps.dataPoints.length &&
    oldProps.dataPoints.every((oldPoint, index) => {
      const newPoint = newProps.dataPoints[index];
      return oldPoint.x === newPoint.x && oldPoint.y === newPoint.y;
    })
  );
}

இதைச் செய்தால், உங்கள் comparison function உண்மையில் component re-render செய்வதை விட வேகமானதா என்பதை உறுதிசெய்ய browser developer tools-இல் Performance panel-ஐப் பயன்படுத்தவும். நீங்கள் ஆச்சரியப்படலாம்.

Performance measurements செய்யும்போது, React production mode-இல் run ஆகிறது என்பதை உறுதிசெய்யவும்.

React Compiler பயன்படுத்தினால் இன்னும் React.memo தேவையா?

React Compiler enable செய்தால், பொதுவாக React.memo இனி தேவையில்லை. Compiler component re-rendering-ஐ தானாக optimize செய்கிறது.

இது எப்படி வேலை செய்கிறது:

React Compiler இல்லாமல், தேவையற்ற re-renders-ஐ தடுக்க React.memo தேவை:

// Parent re-renders every second
function Parent() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <h1>Seconds: {seconds}</h1>
      <ExpensiveChild name="John" />
    </>
  );
}

// Without memo, this re-renders every second even though props don't change
const ExpensiveChild = memo(function ExpensiveChild({ name }) {
  console.log('ExpensiveChild rendered');
  return <div>வணக்கம், {name}!</div>;
});

React Compiler enabled ஆக இருந்தால், அதே optimization தானாக நடக்கும்:

// No memo needed - compiler prevents re-renders automatically
function ExpensiveChild({ name }) {
  console.log('ExpensiveChild rendered');
  return <div>வணக்கம், {name}!</div>;
}

React Compiler உருவாக்கும் முக்கிய பகுதி இதோ:

function Parent() {
  const $ = _c(7);
  const [seconds, setSeconds] = useState(0);
  // ... other code ...

  let t3;
  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = <ExpensiveChild name="John" />;
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  // ... return statement ...
}

Highlighted lines-ஐ கவனியுங்கள்: Compiler <ExpensiveChild name="John" />-ஐ cache check ஒன்றில் wrap செய்கிறது. name prop எப்போதும் "John" என்பதால், இந்த JSX ஒருமுறை உருவாக்கப்பட்டு ஒவ்வொரு parent re-render-இலும் reuse செய்யப்படுகிறது. இதுவே React.memo செய்யும் செயல் - props மாறாதபோது child re-render ஆகாமல் தடுக்கிறது.

React Compiler தானாக:

1. ExpensiveChild-க்கு pass செய்யப்பட்ட name prop மாறவில்லை என்பதை track செய்கிறது
2. முன்பு உருவாக்கப்பட்ட JSX-ஐ <ExpensiveChild name="John" />-க்கு reuse செய்கிறது
3. ExpensiveChild re-render ஆகுவதையே முழுமையாக skip செய்கிறது

இதன் அர்த்தம் React Compiler பயன்படுத்தும்போது உங்கள் components-இலிருந்து React.memo-வை பாதுகாப்பாக remove செய்யலாம். Compiler அதே optimization-ஐ தானாக வழங்கி, உங்கள் code-ஐ சுத்தமாகவும் maintain செய்ய திறமையாகவும் ஆக்குகிறது.

Troubleshooting

Prop object, array, அல்லது function ஆக இருக்கும்போது என் component re-render ஆகிறது

React பழைய மற்றும் புதிய props-ஐ shallow equality மூலம் compare செய்கிறது: அதாவது ஒவ்வொரு புதிய prop-உம் பழைய prop-க்கு reference-equal ஆக உள்ளதா என்பதை பார்க்கிறது. Parent re-render ஆகும் ஒவ்வொரு முறையும் நீங்கள் புதிய object அல்லது array உருவாக்கினால், அதற்குள் உள்ள individual elements எல்லாம் அதேபோல இருந்தாலும் React அதை changed எனக் கருதும். அதேபோல், parent component render ஆகும்போது புதிய function உருவாக்கினால், function-க்கு அதே definition இருந்தாலும் React அது changed எனக் கருதும். இதைத் தவிர்க்க, props-ஐ simplify செய்யவும் அல்லது parent component-இல் props-ஐ memoize செய்யவும்.