React onClick İle Çağrılan Fonksiyon Neden Sürekli Çalışıyor?

React onClick kullanıldığında yapılan bir hata sonucu komponent her render edildinde sanki butona tıklanmış gibi bir davranışın sergilenmesi sıkça karşılaşılaşılan bir durumdur. Özellikle bu konuda yeni olan geliştiriciler bu hatayı yapma eğilimindedirler.

İki farklı kod yapısını inceleyelim.

export default App() {

    const handleClick = () => {
        console.log("Butona tıklandı");
    }

    const handleClickFn = () => {
        console.log("Sayfa render edildi veya butona tıklandı");
    }

    return (
            <div>
                <button onClick={handleClick}>Tıkla - Btn 1</button>
                <hr />
                <button onClick={handleClickFn()}>Tıkla Btn 2</button>
            </div>
        )
}   

İlk butonda bir fonksiyona referans veriyoruz.

    onClick={handleClick}

Bu şekilde davrandığımızda ilk anda bir işlem gerçeleşmiyor bunun yerine buton tıklandığında fonksiyon çağrılıyor.

İkinci butonda ise bir fonksiyonu çağırıyoruz.

    onClick={handleClickFn()}

Fonksiyon isminin sonundaki parantezler () bu fonksiyonun çağrılacağı anlamına gelir. Ve bu nedenle her render işlemi yapıldığında bu fonksiyon çağrılır ve çalıştırılır.

Yukarıdaki örneğimizi çalıştırdığımızda, sayfa her render edildiğinde veya ikinci butona tıklandığında consola Sayfa render edildi veya butona tıklandı yazdırılır.

Birinci butona tıklandığında ise konsola Butona tıklandı yazdırılır.

İkinci yöntemi kullanmamız gerekiyorsa aşağıdaki gibi yapabilirsiniz.

    onClick={() => handleClick()}

Bu şekilde kullandığımızda çağırdığımız fonksiyona parametre de gönderebiliriz. Eğer parametre kullanılmayacaksa ilk yöntem daha kullanışlı görünüyor.

Sonuç

Bir fonksiyona belirli bir eylem sonucu çalışacaksa sadece ismi ile ona referans verilebilir, fakat onun çalıştırılması gerekiyorsa o zaman yanında parantezler olmalıdır. Eğer React render işlemi içerisinde bir fonksiyon fonskiyon() parantezler ile çağrılırsa render işlemin sırasında çalışacaktır. Bu nedenle event çağrılarında sadece fonksiyon isimlerini kullanmak gerekir.

Sorularınız mı var? Yorumlardan bize iletebilirsiniz.