React'ta bir bileşenin yeniden render edilmesine neden olan mekanizmalar nelerdir?

Bir React bileşeninde yeniden render (re-render) şu durumlarda gerçekleşir:

• setState veya useState kancası aracılığıyla bileşenin durumu değiştirilirse.
• Bileşene geçirilen props değişirse.
• Bileşen React Context'e abone ise ve bağlamda değişiklik olursa.
• Üst bileşen çağrılırsa ve bu, çocukların yeniden render edilmesine neden olursa.

Renderlamayı optimize etmek için, fonksiyonel bileşenler için React.memo veya sınıf bileşenleri için shouldComponentUpdate kullanılabilir, böylece değişmeyen verilerle gereksiz yeniden renderlar engellenir.

useState kancasıyla örnek:

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

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={() => setCount(count + 1)}>Arttır</button>
    </div>
  );
}

Her setCount çağrısı, bileşenin yeniden render edilmesine neden olur.