React Hooks Nedir ? Nasıl Kullanılır ? (State, Effect)

ReactConf2018'de Dan Abramav'un tanıttığı React Hooks özelliği geliştiriciler için büyük bir etki yarattı.

Neden ?

React, stateler için tekrar kullanılabilecek bir fonksiyonun diğer bileşenlere bağlanması için bir yöntem sunmuyor(du). Bunun yerine props ve high order components (HOC) ile bu probleme çözüm sağlıyordu. High order components ve props yöntemleri hem kod okunabilirliğini azaltıyor hem de kod tekrarını çoğaltıyordu.

Wrapper cehennemine hoşgeldiniz.

Hooks Nedir ?

Hooks, herhangi bir class yazmadan fonksiyonlar yardımı ile state ve lifecycle özelliklerin kullanılmasına izin verir.

State Hook

Aşağıdaki örnek bir adet buton bulunmakta ve butona tıklandığında count değişkeni bir adet arttırılmaktadır.

useState() iki adet değer alan bir hook. Birincisi, hooku kullandığınzda verdiğiniz default değeri ve ondan sonra gelecek olan değerleri karşılayacak olan değişken, ikincisi ise değeri değiştirme fonksiyonudur. Bu değiştirme fonksiyonunun this.setState() fonksiyonunda state eski state ile birleştirilir ve önceki state durumlarına erişilmesi sağlanır. Değer değiştirme fonksiyonunda ise değer replace edilir.

Effect Hook

React ile daha önce geliştirme yaptıysanız; API kullanımlarınıda, subscribes ve DOM'un manuel olarak değiştirilmesi gibi işlemlere side effects denir. Çünkü bu tarz yan etkiye sahip işlemler rendering sırasında tamamlanmayabilir veya diğer bileşenlere etki etmesi gerekiyor olabilir.

useEffect() fonksiyonunu kullandığınızda React, DOM ile ilgili herhangi bir işlem tamamlandığında çağıracaktır. React, varsayılan olarak ilk render da dahil olmak üzere her render işleminden sonra effect fonksiyonunu çalıştırır.

Hook kullanırken nelere dikkat edilmeli ?

  1. if cümlecikleri veya iç içe fonksiyonlar içerisinde kullanılmamalıdırlar.

2. Hook'lar React'ın fonksiyonel componentleri içerisinde çağırılmalıdırlar.

Son olarak;

React ekibi hook'ların production ortamında kullanılmamasını öneriyor. Javascript'te class kullanımının getirdiği zorluklardan kaynaklanan problemlerden dolayı React ekibi hooks kullanımına gitmiş ve böyle devam ederse React class componentlerinin yerini fonksiyon componentler alacak gibi duruyor.