Milyen mechanizmusok okozzák egy React-komponens újrarenderelését?

Egy React komponens újrarajzolódik (re-render) a következő esetekben:

• A komponens állapotának változása a setState vagy a useState hook segítségével.
• A komponensnek átadott props-ok változása.
• A kontextus változása, ha a komponens feliratkozott a React Context-re.
• A szülő komponens hívása, ami a gyermekek újrarajzolását eredményezi.

Az újrarajzolás optimalizálásához használható a React.memo funkcionális komponensekhez vagy a shouldComponentUpdate osztálykomponensekhez, hogy elkerüljük a szükségtelen újrarajzolásokat, ha az adatok nem változtak.

Példa a useState hook-kal:

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

  return (
    <div>
      <p Számláló: {count}</p>
      <button onClick={() => setCount(count + 1)}>Növel</button>
    </div>
  );
}

Minden setCount hívás újrarajzolást vált ki a komponensben.