Ներկայացրեք վատ ֆունկցիոնալ կոմպոնենտի օրինակ, որը առաջացնում է ավելորդ վերաներբեռնումներ, և բացատրեք, թե ինչպես դա ուղղել։

Անբավարար օրինակ ֆունկցիոնալ կոմպոնենտի, որը առաջացնում է ավելորդ վերաներբեռնումներ, այն է, երբ կոմպոնենտի ներսում ամեն վերաներբեռնման ժամանակ ստեղծվում են նոր օբյեկտներ կամ ֆունկցիաներ, ինչը հանգեցնում է երեխաների կոմպոնենտների prop-ների փոփոխության և նրանց կրկնակի վերաներբեռնման:

function MyComponent({ onClick }) {
  const handleClick = () => {
    console.log('clicked');
  };

  return <ChildComponent onClick={handleClick} />;
}

Այստեղ, handleClick նորից ստեղծվում է ամեն վերաներբեռնման ժամանակ, ինչի հետևանքով ChildComponent-ը ստանում է նոր prop onClick և կրկնակի վերաներբեռնվում:

Ինչպես ուղղել:

• Օգտագործել useCallback ֆունկցիաների մեմոիզացման համար:

import React, { useCallback } from 'react';

function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

• Նույն կերպ, օբյեկտների համար օգտագործել useMemo:
• Կարող եք նաև պատել երեխա կոմպոնենտը React.memo-ով, որպեսզի կանխեք ավելորդ վերաներբեռնումները, եթե prop-ները չեն փոխվել:

Այսպիսով, մեմոիզացիան կանխում է նոր հղում ստեղծել ֆունկցիաների և օբյեկտների վրա, ինչը նվազեցնում է ավելորդ վերաներբեռնումների քանակը։