React Hook(Kanca) Geçişi

React ekosisteminde olanların bildiği üzere Şubat 2019'daki 16.8 versiyonuyla birlikte kancalar(hooks) hayatımıza girdi. Aslında bu tarihten önce alfa sürümü yayınlanmış ve komüniteden olumlu yorumlar almıştı. Herkes yana yakıla kancaları bekler olmuştu. Ben de birkaç deneme yapıp, beğenmiş ve sıradaki ilk gerçek projede kancaları kullanma konusunda heyecanlanmıştım.

Yazının aslında birincil amacı öğretici olmak ve kancaları(hooks) nasıl kullanırsınızı göstermek değil. Neden mi? Çıktığı günden beri o kadar çok yazı yazıldı, konferanslarda anlatıldı ki, hook anlatmayanı dövüyorlar sanırsınız :) O yüzden proje sürecindeki tecrübeleri ön planda tutan bir yazı var karşınızda. Yine de giriş gelişme açısından bilgilendirici kod parçacıkları da olacak. O zaman başlayalım!

İlk olarak, react kütüphanesini kullanarak eskiden bu yana hangi biçimlerde durumu(state) olan bileşen(component) oluşturabildiğimize bakalım. Herhangi bir durum bilgisi içermeyen bileşenlerin zaten yazım esnasında fonksiyondan pek farkları yok.

ES6(Ecmascript2015) ve React’ın 16. versiyonundan önce React.createClass ile bileşen oluşturulabiliyordu:

var ES5Bilesen = React.createClass({
  getInitialState: function () {
    return { durum: "karışık" };
  },
  componentDidMount: function () {
    console.log("bileşen takıldı!"); 
  },
  render: function () {
    return <div>{this.state.durum}</div>;
  }
});

Bu metod 16. versiyon ile birlikte ana react paketinden çıkarıldı ve artık sadece ayrı paket(create-react-class) olarak kullanılabiliyor.

ES6 ile birlikte Javascript’te class, constructor, extends gibi anahtar kelimeleri de kullanabilir hale geldik. React’ın da popülerlik kazandığı bu süreçte durum bilgisi içeren(stateful) bileşenleri yazım yöntemimiz şu şekilde oldu:

class ES6Bilesen extends React.Component {
  constructor (props) {
    super(props);
    this.state = { durum: "karışık"}; 
  }
  componentDidMount () {
    console.log("bileşen takıldı!"); 
  },
  render () {
    return <div>{this.state.durum}</div>;
  }
});

Şimdi ise kancaları kullanarak sadece fonksiyon yazarmış gibi durum saklayabildiğimiz bileşenler oluşturabiliyoruz:

const KancaBilesen = () => {
  const [durum, durumYaz] = useState("karışık");
  
  useEffect(() => {
    console.log("bileşen takıldı!");
  }, []);
  return <div>{durum}</div>;
};

Hemen tüm kodları yeniden yazma isteğine kapılsak da sınıf(class) sözdizimi(syntax) ile react bileşeni oluşturmak yakın zaman içerisinde tarihe karışmayacak. React ekibi geriye dönük desteğin şimdilik süresiz devam edeceğini belirtti.

Gelelim yeni ışıltılı (✨) özelliğimizin bize ve projelerimize faydalı olabileceği noktalara:

• Fonksiyonların bağlam(context) problemleri: Yaşam döngüsü(lifecycle) metodları dışında yazdığımız fonksiyonların bileşenimizin(component) herhangi elemanına erişebilmesi için birkaç farklı yöntem kullanıyorduk. Ya constructor fonksiyonunda this.yeniFonksiyon = this.yeniFonksiyon.bind(this) şeklinde belirterek ya çağırıldığı yerde <button onClick={this.yeniFonksiyon.bind(this)} /> ile bağlam(context) bilgisini vererek ya da tanımlamayı ok fonksiyonu(arrow function) ile yaparak. Kancalar ile oluşturulan bileşenleri fonksiyonmuşçasına yazdığımız için kapsam(scope) ile ilgili endişelere hiç gerek yok. Küme parantezi içerisindeki her değişkene doğrudan erişilebilir.
• Artık this anahtar kelimesini projemizden(belki de hayatımızdan) çıkarabiliriz: this genellikle Javascript kodunun anlaşılabilirliğini azaltan bir özellik olagelmiştir. Nedeni de bağlamının(context) dinamik olarak kodun çalıştığı senaryoya göre değişebilmesidir. İlk maddeki durum bununla ilintilidir.
• Önceden componentDidMount, componentDidUpdate, componentWillUnmount metodlarında yazdığımız ortak kodları her bileşende tekrarlamak zorundaydık. Artık kendi yazdığımız kancaları(custom hooks) istediğimiz bileşenlerde kullanabiliriz.

Kancalardan önce(solda) ve sonra(sağda)

• Kanca(hook) kullanarak yazdığımız bileşenler temelde birer fonksiyon olduğu için kodun yukarıdan aşağıya çalışacağından eminiz. Ancak sınıf tipi bileşenlerde fonksiyonlar yazım sırasından bağımsız çalışabilmektedir (ör: yaşam döngüsü(lifecycle) metodları).
• Kanca(hook) yerine üst seviye bileşenler(higher order components) kullandığımızda DOM’daki bileşen(component) ağacımız daha karmaşık ve kalabalık şekilde biçimleniyor. React Developer Tools ile bakılarak bir karşılaştırma yapmak mümkün.
• Kod tomarının/balyasının(bundle) boyutunun küçülmesi.
• Bir bileşenin, kancalar ile genelde daha az satırda yazılabilmesi.

Geçiş öncesinde kendimizi bu konuda ikna ettiğimize göre artık belli başlı yapacağımız şeyler var:

• Durumları(state) düzenlemek: Eğer kullanıcının etkileşimi sonucu oluşan olay(event) state’deki birden fazla değerin değişmesine sebep oluyorsa, useState yerine useReducer kullanmak mantıklı olabilir.
• Yaşam döngüsü(lifecycle) metodlarını — componentDidMount, componentDidUpdate, componentWillUnmount — taşımak: Bu üç metodun yerine tek başına useEffect geçiyor. 2. parametresine vereceğimiz değişkenler dizisine bağlı olarak hangi durumlarda render olacağını belirleyebiliyoruz.
• Ref’leri taşımak: React.createRef ‘in yerine React.useRef alıyor sadece.
• Tekrarlanan kodları kendi oluşturduğumuz kancalar(hook) haline getirerek birden fazla bileşende kullanmak: Burada en önemli nokta isimlendirdiğimiz metodların başında use olması. Örnek olarak; useMyCustomHook.

Kancalar hakkında nedir, nasıl kullanılır bilgisini bilerek pek fazla vermedim. Mesela useCallback ‘ten ve useMemo ‘dan hiç bahsetmedim. Çünkü hem Türkçe hem İngilizce olarak react’ın kendi dökümanında gayet açıklayıcı. Ve evet, herkes react hook nasıl kullanılır yazısı yazıyor (ben dahil!).

Son olarak zaman içerisinde sık kullandığımız yan kütüphaneler de kanca(hook) desteklerini eklediler:

• react-redux@7.1.0: Haziran 2019
• react-apollo@2.6.0 : Ağustos 2019
• react-router@5.1.0 : Eylül 2019
• formik@2.0.1 : Ekim 2019
• …ve daha niceleri :)

Hala hook desteği gelmemiş bağımlı paketleriniz olma ihtimali var. Yapılabilecekler; o projeye katkıda bulunmak, Github üzerinden darlamak veya sadece beklemek.

Bu noktaya kadar okumaya üşenmeyenler react’ın kancasına tutulmuş demektir. React’lı günler!