Sıfırdan ileriye ReactJs serisinin yeni konusuna hoş geldiniz. Bir önceki konuda props kavramını işlemiştik bu konuda ise hooks kavramını öğreneceğiz. İyi okumalar
Hooks Nedir ?
Hooks dediğimiz şey ReactJs'nin bize sunmuş olduğu ve belli işleri gerçekleştirmemizi sağlayan özellik diyebiliriz. Bu özellikler hooks türüne göre değişebiliyor ve bu seri boyunca da en çok kullanılan hooks göreceğiz. React'in bize sunduğu hooks harici bizler de kendi hooks yapabiliriz. Tabi ki biz bu konuda temel iki tane hooks türünü göreceğiz. Daha ilerleyen kademelerde bu sayı artacak. Bu konuda göreceğimiz hooks türleri useState ve useEffect olacak. İlk olarak useState ile başlayalım o halde.
useState Nedir ?
useState dediğimiz hooks türü verileri tutup değiştirme işlemlerinde kullanılan bir hookstur. Örnek olarak normal değişkenleri düşünün atıyorum const piSayisi = 3,14 veya let username = "DarkS0LDIER" bunlar hepsi birer değişken bunu biliyoruz zaten. useState dediğimiz şey bu örnek gösterdiğim değişkenlerin ReactJSdeki karşılığı.
useState kullanabilmek için import etmemiz gerekiyor. Zaten useState yazdığınız an vscode otomatik olarak import edecektir. Şimdi bir örnek oluşturalım direkt app.jsx dosyasında halledelim işi.
JavaScript:
import { useState } from 'react'
import './App.css'
function App() {
const [userName, setUserName] = useState("DarkS0LDIER")
const [kayitTarih, setKayitTarih] = useState(2019)
return (
<div>
{userName} : {kayitTarih}
</div>
)
}
export default App
useState kullanılırken sanki bir diziymiş gibi köşeli parantezler içinde değişken adlarını belirtiriz. Temelde dizi değil tabi ki. Eğer dizi olmasını istiyorsak şöyle bir şey yapabiliriz.
JavaScript:
const [yetenekler, setYetenekler] = useState(["Javascript", " ", "React", " ", "Html", " ", "Css"])Bu kullanım dizi belirtmede yapılır. İlk kullanım ise normal değişken atarmış gibide kullanılır. Peki mantığı ne sorusuna gelirsek öncelikle değişken adını oluşturuyoruz. Daha sonra set + değişken adı (sektörde bu yöntemle kullanılıyor kafa karışmaması için istediğiniz şeyi yazabilirsiniz normalde) eşitmiş useState içindeki değere. İlk değişkeni anladık set + değişken adı ne alaka derseniz bazı zamanlar oluyor mevcut değişkenin durumunu değiştirmek zorunda kalabiliyoruz. Mesela sizle basit bir sayaç yapalım Arttır butonuna bastıkça sayı artsın azalt tuşuna basınca azalsın.
JavaScript:
import { useState } from 'react'
import './App.css'
function App() {
const [sayi, setSayi] = useState(0);
const arttir = () => {
setSayi(sayi + 1);
}
const azalt = () => {
setSayi(sayi - 1);
}
return (
<div>
<div> {sayi}</div>
<div>
<Button onClick={arttir}>Arttır</Button>
<Button onClick={azalt}>Azalt</Button>
</div>
</div>
)
}
export default App
Önce sayı değişken değerine 0 dedik. Daha sonra arttır ve azalt fonksiyonları oluşturup bunlara sen sayıyı set et (ayarla) + 1 veya -1 dedik yani güncel sayıyı al onunla belirtilen işlemi yapıp güncelle dedik. Daha sonra butonlara oluşturduğumuz fonksiyonları dom türünü belirterek (tıkanıldığında çalışsın) belirttik ve böyle bir çıktı elde ettik.
useState şöyle bir dezavantajı var her bir işlem yaptıktan sonra tekrardan sayfayı sıfırdan render ediyor. Şöyle düşünün elinizde büyük bir e-ticaret sitesi olsun bu sitede ürünler, kullanıcılar, vb. veritabanları olsun. Her useState kullanıldığında bu web, veritabanına sıfırdan istek atacak. Veritabanı buna yanıt dönecek de webin isteklerini web'e yollayacak. Kısaca pek optimize olmayacaktır. Mesela yukarıdaki koda ek olarak konsola useState çalıştı diyelim.
JavaScript:
import { useState } from 'react'
import './App.css'
function App() {
const [sayi, setSayi] = useState(0);
const arttir = () => {
setSayi(sayi + 1);
}
const azalt = () => {
setSayi(sayi - 1);
}
console.log("useState Çalıştı")
return (
<div>
<div className='sayi'> {sayi}</div>
<div>
<Button onClick={arttir}>Arttır</Button>
<Button onClick={azalt}>Azalt</Button>
</div>
</div>
)
}
export default App
Daha sayfa açılır açılmaz bir kez render edildiğini logtan anlayabiliriz. Daha sonra arttır veya azalt tuşlarına her bastığımda bir kez daha render ediyor. Küçük projeler için pek sıkıntı olmaz ama büyük projeler için berbat bir kullanıcı deneyimi sunacaktır. Bu yüzden bu tur durumlarda başka bir hooks kullanırız.
useEffect Nedir ?
useEffect aynı useState gibidir ama useState gibi her bir işlemde sayfayı tekrar render etmez. Bizim ayarlamalarımıza göre sayfayı render etmektedir.
JavaScript:
import React, { useEffect, useState } from 'react'
function App() {
const [ad, setAd] = useState('')
useEffect(() => {
console.log("Ben her zaman çalışırım")
})
useEffect(() => {
console.log("Ben ilk kez render edildiğinde çalışırım ")
}, [])
useEffect(() => {
console.log("Ben ilk kez render edildiğinde ve ad değişkeni güncellendiğinde çalışırım ")
}, [ad])
return (
<div></div>
)
}
export default App
Bu kodlara ek olarak bir input alanı olsun ve input alanına yazılan değeri ad değişkenine atayalım.
JavaScript:
import React, { useEffect, useState } from 'react'
function App() {
const [ad, setAd] = useState('')
useEffect(() => {
console.log("Ben her zaman çalışırım")
})
useEffect(() => {
console.log("Ben ilk kez render edildiğinde çalışırım ")
}, [])
useEffect(() => {
console.log("Ben ilk kez render edildiğinde ve ad değişkeni güncellendiğinde çalışırım ")
}, [ad])
return (
<div>
<input
type="text" value={ad} onChange={(e) => setAd(e.target.value)} />
<div>{ad}</div>
</div>
)
}
export default App
Fark ettiyseniz her zaman çalışırım diyen ve ad değişkeni güncellendiğinde çalışırım useEffectler hep çalıştı. Diğer ben bir kez çalışırım diye ilk sayfa yüklendiğinde çalıştı ve daha da çalışmadı. Bu durumu belirtmek için ise useEffect en sonuna köşeli parantezler (eğer bir kez çalışmasını istiyorsak), köşeli parantezler içinde değişken adı (bir kez çalışsın ama değişken güncellendiğinde de çalışsın) veya hiçbir şey koymazsak her zaman çalışacaktır.
En çok kullanılan hooks türleri bunlardır. Tabi ki bir sürü hooks var ama şu an başlangıç için bu iki hooks işimizi görecektir. Diğer hooks türlerini daha ileri seviyelerde öğreneceğiz. Başka bir konuda görüşmek üzere okuduğunuz için teşekkür ederim.
