Ce mecanisme determină re-renderizarea unui component în React?

Într-un component React, re-renderizarea (re-render) are loc în următoarele cazuri:

• Schimbarea stării componentului prin setState sau hook-ul useState.
• Schimbarea props-urilor transmise componentului.
• Schimbarea contextului, dacă componenta este abonată la React Context.
• Apelul componentei părinte, care duce la o re-renderizare a componentelor copil.

Pentru a optimiza re-renderizarea, se poate folosi React.memo pentru componentele funcționale sau shouldComponentUpdate în componentele de clasă, pentru a preveni re-renderizările inutile atunci când datele nu se schimbă.

Exemplu cu hook-ul useState:

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

  return (
    <div>
      <p>Contor: {count}</p>
      <button onClick={() => setCount(count + 1)}>Crește</button>
    </div>
  );
}

Fiecare apel la setCount determină re-renderizarea componentului.