Кадом механизмҳо сабаби дубора ранг кардани компонент дар React мешаванд?

Дар компонентаи React, такрори рандор (re-render) дар ҳолатҳои зерин рӯй медиҳад:

• Тағйирёбии ҳолати компонент тавассути setState ё hook-и useState.
• Тағйирёбии props, ки ба компонент дода мешавад.
• Тағйирёбии контекст, агар компонент ба React Context обуна бошад.
• Даъвати компонент аз ҷониби падар, ки ба такрори рандор кардани кӯдакон оварда мерасонад.

Барои оптимизатсияи рандор, метавон React.memo барои компонентҳои функсионалӣ ё shouldComponentUpdate дар компонентҳои синфӣ истифода бурд, то рандорҳои ғайриқонунӣ дар ҳолатҳои бе тағйирёфтаи маълумот пешгирӣ шаванд.

Масалан бо hook-и useState:

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

  return (
    <div>
      <p>Ҳисобгуч: {count}</p>
      <button onClick={() => setCount(count + 1)}>Баъдтар кунед</button>
    </div>
  );
}

Ҳар даъвати setCount ба такрори рандор оварда мерасонад.