React Hooks Nedir ve Neden Kullanıyoruz

Hooks’ların derinine inmeden , temel olarak nedir, nasıl kullanılır veya niçin kullanmalıyız konularına değinerek kafamızda bir şema oluşturmaya çalışacağım. Şimdilik bu makale kapsamında herhangi bir hooks örneği vermeyeceğim, diğer yazacağım makaleler ile detaylı şekilde gerekli olan bütün hooks’ları örneklemeyi düşünüyorum.

Neden Hooksları Kullanıyoruz ?

React Hooks’lar sıradan javascript fonksiyonlarıdır, bize React state ve lifecycle özelliklerini fonksiyonel bileşenlerde kullanmamıza yarar. Hooks’lar sisteme gelmeden önce herhangi bir fonksiyonel bileşende state ve lifecycle özelliklerini kullanamıyorduk, eğer bu özelliklere bileşen ihtiyacımız olursa, fonksiyonel bileşenimizi sınıf bileşenine dönüştürmemiz gerekiyordu. Ayrıca, sınıf üzerindeki herhangi bir özelliği dışarı çıkarıp farklı bir bileşen kullanılabilir yapmak istersek istersek, ya HOC(High Order Component)’ları yada render prop yönteminden birini kullanmak zorundaydık. Böyle bir kullanım bileşen üzerinde sentetik veya bir üst katman diyebileceğimiz yeni bir bileşenin oluşturulması anlamına geliyordu. En basit bir özelliği farklı yerlerde kullanmak için oluşturduğumuz bu kapsayıcı bileşenler kod yapımımız bozuyor, bileşenlerin hacmini artıyor ve yönetim sorunlarına neden oluyordu. Bir noktadan sonra artık asıl işi yapan bileşen değil, bunu kapsayan wrappper dediğimiz bu bileşenler uğraşmak zorunda kalıyorduk. Hatta bazı bileşenlerde Wrapper Cehennemi adı verdiğimiz tamamen kontrolü kaybettiğimiz durumlar oluşuyordu.

Bunlara ek olarak sınıf temelli bileşenler, javascript doğasına uygun değildi, çünkü bildiğiniz gibi JS , class bazlı bir programlama dili değil prototype üzerinden ilerleyen bir dil olduğu için kafa karışıklıklarına neden oluyordu. Genellikle programcılar eğer bir programlama diline hakim ise aynı şekilde bu dil üzerine kurulan framework’de hakim olmak isterler. Hookslardan önce ne yazık ki, çoğu senior programcı js ‘de uzman olsalar bile, React üzerinde bir o kadar uzman sayılmazlardı. Yukarıdaki saydığım nedenlerden dolayı React ekibi 2018 yılının sonlarında React Hooksları sisteme kazandırdı. Bu şekilde yukarıdaki saymış olduğum sorunları ve daha fazlasını temiz bir şekilde halletmiş oldu.

Yukarıdaki paragraftan da anlayacağınız üzere artık fonksiyonel bileşenler üzerinde state’lerimiz tutabiliyor ve aynı zamanda lifecycle metodlarımızı kullanabiliyoruz. Artık sınıf bileşenleri üzerinde kullanmış olduğumuz componentDidMount, componentDidUpdate veya componentWillUnmount metotlarını kullanmamıza gerek kalmadı. Bunun yerine React birlikte gelen useEffect hookunu kullanarak yukarıda üç metod ile yapmış olduğumuz işleri sadece tek bir metod ile yapabiliyoruz.

Hookslar, React ile birlikte hazır gelen ve kendimiz tarafından oluşturulabilen hookslar olmak üzere ikiye ayrılıyor. React, bize bileşenler üzerinde sıklıkla kullandığımız özellikler için farklı tipteki hooksları veriyor. Bunlardan en önemlilerini aşağıdaki gibi, hazır olarak gelen bundan başka hookslar var, hepsinin üzerinden detaylı bir şekilde gideceğim ama şimdilik tanım vermekle yetineceğim.

useState: Fonksiyon üzerindeki değerleri tutan ve bu değerler üzerinde değişiklik yapılmasına izin veren hook.

useEffect: Fonksiyon üzerinde data fetching, subscriptions ve DOM üzerindeki değişiklerini yapabileceğimiz hook.

useContext: Üst bileşenlerdeki değerleri alt bileşenlerden almaya ve değiştirmeye yarayan hook.

Yukarıdaki hazır hooksların haricinde , bence hooksların asıl gücü kendi hookslarımızı oluşturuyor olabilmemizden geliyor. Önceden kullanmış olduğumuz ve benim gerçekten çok hoşlanmadığım high-order-component ve render-props(function as a prop) yöntemlerini kullanmadan herhangi bir fonksiyoneliteyi rahatlıkla diğer bir fonksiyonel bileşene aktarabiliyoruz.

Hooks’ları bileşenlerde kullanmamız için sadece iki adet kuralı mevcut;

İyi Çalışmalar