Ի՞նչ մեխանիզմներ են առաջացնում React-ում կոմպոնենտի վերաարտադրությունը։

React կոմպոնենտում վերաարտադրման (re-render) տեղի է ունենում հետևյալ դեպքերում.

• Կոմպոնենտի վիճակի փոփոխություն setState կամ useState հուկի միջոցով:
• Կոմպոնենտին փոխանցված պրոփերի փոփոխություն:
• Կոնտեքստի փոփոխություն, եթե կոմպոնենտը գրանցված է React Context-ի համար:
• Հայրական կոմպոնենտի կանչ, որը հանգեցնում է երեխաների կրկնակի ռենդերի:

Անհրաժեշտ չէ անպատճառ ռենդերների համար, կարելի է օգտագործել React.memo ֆունկցիոնալ կոմպոնենտների համար կամ shouldComponentUpdate դասական կոմպոնենտների համար, որպեսզի կանխել անպետք ռենդերները, երբ տվյալները չեն փոխվել:

Օրինակ useState հուկով:

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>Հաշվիչ: {count}</p>
      <button onClick={() => setCount(count + 1)}>Ավելացնել</button>
    </div>
  );
}

Յուրաքանչյուր setCount կանչը հանգեցնում է կոմպոնենտի կրկնակի ռենդերի։