Sıfırdan ileriye ReactJs serisinin yeni bölümüne hoş geldiniz. En son React-Router ile yönlendirme işlemleri yapmıştık. Bugün ise Custom Hooks göreceğiz.
Hooks kavramını zaten biliyoruz bugüne kadar da kullandık. Örneğin useState,useEffect,useNavigate vb. Bugün tam olarak biz de kendi hookslarımızı yapıp projeler içinde kullanabileceğiz. Yapımı oldukça kolay eğer hooks kavramına aşina iseniz (buraya kadar geldiyseniz zaten biliyorsunuzdur) hiç zorlanmayacağınız bir konu olacaktır.
Hooks kavramını zaten biliyoruz bugüne kadar da kullandık. Örneğin useState,useEffect,useNavigate vb. Bugün tam olarak biz de kendi hookslarımızı yapıp projeler içinde kullanabileceğiz. Yapımı oldukça kolay eğer hooks kavramına aşina iseniz (buraya kadar geldiyseniz zaten biliyorsunuzdur) hiç zorlanmayacağınız bir konu olacaktır.
Custom Hooks Yapımı ve Projelerde Kullanımı
Şimdi yeni bir dosya oluşturalım adını da useSayac tarzı bir şey koyabilirsiniz.
JavaScript:
import React, { useState } from 'react'
function useSayac() {
const [say, setSay] = useState(0);
const arttir = () => {
setSay(say + 1);
}
const azalt = () => {
setSay(say - 1)
}
return { arttir, azalt, say }
}
export default useSayac
Burada useState kullanarak sayıyı depoluyoruz ve ilk olarak değerimiz 0. 0 ile başlayacak program daha sonra arttır adlı fonksiyon ile say useStateni 1 arttırıyoruz aynı işlemin tersini azalt fonksiyonunda yapıyoruz. En sonda ise normalde return <div> </div> olan kısımı silip bir buraya oluşturduğumuz hooks değeri ve fonksiyonlarımızı yazıyoruz böyle bir sonraki componente aktarabileceğiz. Şimdi app.jsx dosyamıza gidelim.
JavaScript:
import useSayac from "./useSayac"
function App(){
const {arttir,azalt,say} = useSayac();
return(
<div>
<p>{say}</p>
<button onclick={arttir}>Arttır>button>
<button onclick={azalt}>Azalt>button>
</div>
)}
export default app
Burada useSayac custom hooksumuz app.jsx import edip Javascriptin özelliği olan parçalama işlemi ile export edilen değerleri parçaladık. Daha sonra bu parçalanan değerlerinde biri olan sayı useStateni p etiketleri içine koyup butonlarımıza ise arttır ve azalt fonksiyonlarımızı yerleştirdik böylece uygulamayı çalıştırabiliriz.
İlk baştaki değerimiz 0 biraz arttıralım bu değeri.
Görüldüğü üzere değer 13 oldu şimdi azaltalım.
Şimdi ise değerimiz -10 oldu.
Bu örneğe ek olarak bir örnek daha yapalım custom hooks hakkında. Bu sefer kullanıcı aktif mi değil mi gibi basit bir işlem yapalım. Böylece Custom Hooks mantığını daha iyi anlayacağız.
İlk olarak useCheckUser adlı bir dosya oluşturalım ve daha sonra şu işlemleri yapalım.
JavaScript:
import { useState } from "react"
function useCheckUser() {
const [userActive, setUserActive] = useState(false);
const [writeStatus, setWriteStatus] = useState("Kullanıcı Aktif Değil")
const checkUser = () => {
setUserActive(!userActive)
if (userActive) {
setWriteStatus("Kullanıcı Aktif")
}
else {
setWriteStatus("Kullanıcı Aktif Değil")
}
}
return { userActive, writeStatus, checkUser }
}
export default useCheckUser
Burada iki adet useState tanımladık biri aktif olduğunda true, aktif olmadığında false dönecek olan userActive state bir diğeri ise aktifliği yazacak writeStatus state. Daha sonra checkUser adlı bir fonksiyon yaratıp bu fonksiyon her tetiklendiğinde userActive statenin değeri tam tersine dönmesi gerektiğini söylüyoruz. Daha sonra eğer userActive değeri true ise writeStatus statene kullanıcı aktif else içine ise kullanıcı aktif değil diyerek fonksiyonumuzu bitiriyoruz. En sonda ise bu değerleri başka yerde kullanacağımızı belirtiyoruz.
Şimdi app.jsx dosyasına geçelim.
JavaScript:
import useCheckUser from "./useCheckUser"
function App() {
const { userActive, writeStatus, checkUser } = useCheckUser()
return (
<div>
<p>{writeStatus}</p>
<button onClick={checkUser}>{userActive ? "Aktif ol" : "Çevrimdışı Ol"}</button>
</div>
)
}
export default App
Burada önce useCheckUser custom hookumuzu import edip parçalayarak değerleri alıyoruz. Daha sonra p etiketi içine writeStatus değerini koyuyoru butona ise checkUser fonksiyonunu yerleştiriyoruz. Daha sonra butonun etiketi içine ise eğer userActive false ise "Aktif Ol" false ise "Çevrimdışı Ol" diyoruz. Böylece Javascriptin özelliği olan kısa yoldan if-else kullanımıyla işimizi bitiriyoruz ve uygulamamızı çalıştırıyoruz.
İlk olarak Aktif değiliz ve aktif ol butonuna basıyoruz.
Artık aktifiz ve butonun etiketi değişti "Çevrimdışı Ol" olarak gözüküyor. Bu da demek oluyor ki custom hooksumuz çalışıyor.
Bugün Custom Hooks nasıl yapılır ve nasıl kullanıldığı gördük bu şekilde kendinize has hooks oluşturabilir ve kullanabilirsiniz. Bir başka konuda görüşmek üzere okuduğunuz için teşekkürler.
