REACT HOOK’S
Nerden çıktı bu Hook ihtiyacı ?
Bu yazıyı okuyorsanız bir süredir React geliştirdiğinizi söylemek yanlış olmasa gerek. React bir bileşene tekrar kullanılabilir bir davranışı iletmenin kesin bir yolunu sunmaz. Bu yüzden aşağıdaki resim size tanıdık gelebilir.
Hook’lardan önce bir bileşene yeniden kullanılabilir davranış mantığını adapte etmenin ana yolu bileşeni başka bir bileşenle sarmaktır. Genellikle bir HOC (High Order Component) kullanılarak yapılan bu işlem yukarıdan da anlayacağınız üzere oldukça kullanışsız ve kodun takip edilmesini zorlaştıran bir yapıdır. Bu probleme verdiğimiz isim Wrapper Hell işte tam da bu sebepten Hook’lar doğal bir ihtiyaç olarak geliştirildi.
High Order Componet & React Hooks
Basit bir şekilde başlayan fakat çığırından çıkan ve yönetilmesi oldukça güç hale gelen bileşenler sık bakım ihtiyacı ile birlikte neredeyse kullanılamaz hale geliyordu. Her bileşenin lifecycle metodu kendisi ile alakasız kodlarla karmaşık bir hal alıyordu bunun sebebi birbiriyle ilişkili kodların birbirinden ayrı metodlara konmasıydı.
Örneğin componentDidMount() ve componentDidUpdate() metodları ile api call’lar yapılabiliyorken. Yine aynı DidMount() metodu eventlistener’ları oluşturabiliyor DidUpdate() metodu da bu listener’ların silinmesi gibi alakasız işlemleri de içerebilir. Bunun yanında stateful işlemler componentin tamamında kullanıldığı için bu daha küçük componentlere bölmekte imkansız hale geliyordu. Bu yüzden geliştiriciler ayrıca state yönetim kütüphanelerine yönelerek bu problemi çözmeye çalıştılar ama bu durumda da componentler arası yalıtım oldukça artıyor ve kodu anlayabilmek için dosyalar componentler arasında git gel yapmayı gerektiriyor ve bu durum bir kafa karışıklığını da beraberinde getiriyordu.
Buradaki problemleri çözebilmek için Hook’lar componentleri birbirleriyle ilişkili daha küçük parçalara bölmemizi sağladı.
DidMount() ve DidUpdate() yerine Hook’lar da useEffect() hook’u kullanılır.
Sen Kimsin Ya Hook ?
Hook’lar class componentler yazmadan fonksiyonlar yardımıyla React’ın state ve lifecycle özelliklerini kullanmamıza yarar. Hook’lar class componentler içerisinde çalışmazlar hook’lar ancak funcional componentler içerisinde çalışırlar. Şimdi 2 en temel hook’a değineceğiz useState() ve useEffect() hook’larına.
const [state , setState] = useState (“Başlangıç değeri”)
En sık kullanılan hook’lardan olan useState hook’uyla tanışın. Bu hook funcional component’e bir state durumu atamak için kullanılır. useState hook’u bir dizi şeklinde tanımlanır bu anlık bir state durumu ve bu durumu güncellememize , değiştirmemize yarayan bir setState fonskiyonudur. Class componentlerle biraz haşır neşir iseniz setState fonksiyonu size oldukça tanıdık gelecektir. Tekrar değinecek olursak useState bir başlangıç durumunu , state’ini ve bu state’i , durumu değiştirebilmemizi sağlayan bir setState fonksiyonunu döndürür. Pekala örnek bir kullanımla başlayalım.
Öncellikle useState’i çalışmanıza import etmeyi unutmayalım.
import React, { useState } from ‘react’;
Hatırlatma: Hook’lar yalnızca funcional componentlerle kullanılabilir.
const [Başlangıç state’i, setStateFonksiyonu] = useState(İlk değer);
const [boolean , setBoolean] = useState(false) → Örneğimizde boolean ismi verdiğimiz değişkenimize başlangıç olarak false değeri atıyoruz.
Burada ise boolean ismini verdiğimiz değişkenimiz false ise ekrana “State false değer dönüyor” yazdırırken değişkenimiz true dönüyor ise bu sefer ekrana “State true değer dönüyor” yazdıracak.
Daha sonra butonumuz click edince setBoolean fonksiyonumuz başlangıç değeri olan false değerini true’a çevirecek. Bu sayede useState hook’umuzla bir state tanımladık state’imizi bir olay yöneticine çağırdık ve burada set fonksiyonumuzla state’imizi güncelledik. Aynı zamanda bir bileşende birden fazla state değişkeni tanımlamakta mümkündür.
Örneğin:
useEffect (() => {} , [] )
Daha öncede değinmiştik eğer class componentlere ve lifecycle metodlarına aşinaysanız componentDidUpdate, componentWillUnmount, ve componentDidMount yaşam döngülerinin bir birleşimi şeklinde düşünebiliriz. useEffcet hook’u yan etkiler yaratmamıza yarar. Burada yan etkiden kasıt bir state durum güncellendiğinde bu güncellemeye bağlı olarak ekstra ektiler yaratmaktır. useEffect hook’u tam olarak componentimiz renderlandıktan sonra çalışır yani Dom güncellemeleri bittikten hemen sonra useEffecti çağıracaktır ve component her render olduğunda da çalışmaya devam eder.
Öncelikle useEffect hook’umuzu import edelim.
import React, { useState , useEffect} from ‘react’;
Hali hazırda bulunan boolean değişkenimize true veya false olması durumunda bir html elementinin arka plan rengini değiştirmesini söyledik. Boolean değişkenimiz her seferinde farklı bir değer döndürüyor (true, false) bu yüzden her state değişiminde useEffect hook’umuz tekrar çalışıyor.
Burada useEffect’in içine yazdığımız fonksiyon bizim yan etkimizdir.
Çıktımızı görmek isteyenler için :
useEffect hook’muza aynı zamanda iki render arasında belirlediğimiz bazı değerler değişmediyse bir yan etkiyi atlamasını, uygulamamasını söyleyebiliriz. Küçük örneğimize bir bakalım:
Örneğimizde useEffect’e ikinci bir argüman olarak [count] state’ini ekledik. Peki bu bize ne anlatmalı? Örneğin count değerimiz 3 olsun. Eğer count değerimiz hala 3'e eşit şekilde yeniden render edilirse yan etkimiz çalışmayacaktır fakat 3 iken yeniden renderlandığında değişirse yan etkimiz tekrardan çalışacaktır.
