Millised mehhanismid põhjustavad Reactis komponendi uuesti renderdamist?

React komponendis toimub uuesti joonistamine (re-render) järgmistel juhtudel:

• Komponendi oleku muutmine setState või useState hooki abil.
• Komponendile edastatud propside muutmine.
• Konteksti muutmine, kui komponent on registreeritud React Contexti jaoks.
• Vanemkomponendi kutsumine, mis põhjustab laste uuesti joonistamise.

Renderimise optimeerimiseks saab kasutada React.memo funktsionaalsete komponentide jaoks või shouldComponentUpdate klassikomponentide jaoks, et vältida tarbetuid uuesti joonistamisi, kui andmed ei ole muutunud.

Näide useState hookiga:

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

  return (
    <div>
      <p>Loendur: {count}</p>
      <button onClick={() => setCount(count + 1)}>Lisa</button>
    </div>
  );
}

Iga setCount kutsumine põhjustab komponendi uuesti joonistamise.