Aké mechanizmy spôsobujú re-render komponentu v React?

V React komponentu sa re-render (znovu crtanje) dogodi v naslednjih primerih:

• Sprememba stanja komponente preko setState ali hook-a useState.
• Sprememba props-ov, ki so poslani komponenti.
• Sprememba konteksta, če je komponenta naročena na React Context.
• Klic starševske komponente, ki povzroči ponovno risanje otrok.

Za optimizacijo risanja je mogoče uporabiti React.memo za funkcijske komponente ali shouldComponentUpdate v razrednih komponentah, da preprečimo nepotrebne ponovne risbe, ko podatki niso spremenjeni.

Primer z hook-om useState:

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

  return (
    <div>
      <p>Števec: {count}</p>
      <button onClick={() => setCount(count + 1)}>Povečaj</button>
    </div>
  );
}

Vsakič, ko pokličemo setCount, pride do ponovnega risanja komponente.