React Native’ de Hooks Kavramı: useState-useEffect nedir? Nasıl kullanılır?

Öncelikle sizlere React Native’den bahsederek konuya girmek istiyorum. React Native Facebook tarafından geliştirilmiş olan açık kaynaklı mobil uygulama geliştirme framework’üdür. Android, ios hatta web için uygulamalar geliştirmek için kullanılır.

Hooks Kavramı

Peki gelelim şimdi React Native’de Hooks kavramına. :) Hooks’un Türkçe karşılığı “kancalar” demektir. React’ın 16.8 versiyonlamasıyla Hooks kavramı ortaya çıkmıştır.

Hooks özelliği herhangi bir class ‘a ihtiyaç duymadan fonksiyonlar ile React’teki state ve lifecycle özelliklerinin kullanılmasını sağlar.Esas olarak reaksiyon fonksiyonel bileşenindeki durumu ve yan etkileri ele almak için kullanılır. Hooks’lar sınıf içerisinde çalışmaz. Bu yüzden fonksiyon component’ı içerisinde yer almalıdırlar. Temel hooks’lar olarak useState ve useEffect’i örnek verebiliriz.

useState

useState, fonksiyon componenti içerinde tanımlayarak istediğimiz değişkenleri atayabiliriz. renderItem fonksiyonu oluşturarakta verilerimizin tekrar render edilmesini sağlayabiliriz. Şimdi buna bir örnekle daha detaylı görüp inceleyeceğiz.

Class component’i ile state kullanımı

Fonksiyon component’i ile state kullanımı

Class component’inde state yapısı

this.state{ stateName: stateValue } olarak tanımlanır.

Fonksiyon component’inde ise

const [stateName, setStateName] = useState( ) şeklinde tanımlanır.

useEffect

useEffect, herhangi bir fonksiyon component’ine sunucudan veri çekme,event abonelikleri gibi diğer component’lere etki edebilen işlemler yapabilme yeteneği kazandırır. React class’larındaki componentDidMount, componentDidUpdate, ve componentWillUnmount metodları ile aynı görevi yürütür ve bu metodları tek bir fonksiyon çatısı altında gerçekleştirir.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `${count} kere tıkladın.`;
  });
}

useEffect fonksiyonu ile burada componentDidMount gibi çalışır. Hatta daha detaylı örneklerine bakmaz isterseniz tam olarak buraya döküman linkini bırakıyorum.:)

Hooks kullanımında dikkat edilmesi gerekenler

Hooks’lar temelinde JavaScript fonksiyonudurlar. Fakat state ve lifecycle ile ilgili kısımlara da müdahale edebildikleri için aşağıdaki iki husus göz önüne alınarak kullanılmalıdır:

1. Hook’lar component’in top-level kısmından çağrılmalıdırlar. Yani döngüler, if cümlecikleri veya iç içe fonksiyonlar içerisinde kullanılmamalıdırlar.
2. Hook’lar React’ın fonksiyonel component‘leri içerisinden çağrılmalıdırlar. Sıradan herhangi bir fonksiyon içerisinden çağrılmamalıdırlar.

Ben bu yazımda sizlerle basit bir şekilde useState ve useEffect nedir, nasıl kullanılır anlatmaya çalıştım. İkinci yazımda data detaylı bir örnek ile bunlardan bahsetmek istiyorum.Tekrar o yazımda buluşmak dileğiyle. :)