React Hook’ları Anlamak

Giriş

React kullanıcı arayüzleri oluşturmak için kullanılan en popüler JavaScript kütüphanelerinden biridir.  Class Components yani sınıf bileşenleri ile uzun süre geçiren React, 2019 yılında tanıttığı Hook sistemi ile fonksiyonel bileşenleri daha güçlü ve yetenekli hale getirdi. Bu yazıda, React Hook’larının ne olduğunu, neden ortaya çıktığını, nasıl kullanıldığını ve geliştiriciye sağladığı avantajları anlatacağım. React Hook'larının amacı React geliştiricilerinin bu konsepti doğru anlamasını ve uygulamalarında etkili şekilde kullanabilmesini sağlamaktır.

HookNedir?

React Hook’lar fonksiyonel bileşenler içerisinde state ve lifecycle gibi sınıf bileşenlerine özgü özellikleri kullanmayı mümkün kılar. Hook terimi bileşene bazı React özelliklerini eklemek olarak düşünülebilir. React Hook’lar ortaya çıkmadan önce eğer bir bileşenin içinde state yönetmek veya yaşam döngüsü methodlarını kullanmak gerekiyorsa sınıf bileşeni tanımlamak gerekiyordu. Bu durum basit bileşenlerde bile karmaşık yapılar ortaya çıkmasına neden oluyordu. Yani çok basit bir sayaç, form veya API isteği bile yazacak olsak uzun ve karmaşık bir sınıf yapısı oluşturmak gerekiyordu. Hook’lar bu sınırlamayı ortadan kaldırarak daha sade, okunabilir ve yeniden kullanılabilir kodlar yazılmasını mümkün kıldı. 

React Hook’ları Nelerdir?

• useState
• useEffect
• useContext
• useReducer
• useRef

useState Hook'u

useState fonksiyonel bir bileşende durum yönetimini sağlar. React’te bir değişkenin değerini bileşen içinde saklamak ve güncellemek için kullanılır. Fonksiyon bileşenlerinde state kavramını tanıtmanın yoludur. Daha iyi anlaşılması açısından şöyle diyebiliriz; State bir bileşenin o anki durumunu temsil eden veridir ve bu veri değiştiğinde React otomatik olarak bileşeni yeniden render eder.

Gerçek projelerden bir örnek verecek olursak dialog kavramını söyleyebiliriz. Örneğin bir dialog yani açılır bir pencere oluşturmak istiyorum. Bu pencere bir butona bastığımda görünsün istiyorum. useState ile oldukça kolay bir yapı oluşturulabilir,  burada dialogun açık mı kapalı mı sorusunun cevabı useState'de tutulur. Genel olarak ilk başlangıçta useState(false) ile tanımlayarak başlangıçta pencerenin kapalı olduğunu tutarız, daha sonra butona onClick ile verdiğimiz useState(true) ifadesi sayesinde dialogu görünür yaparız, yine dialog içerisinde yer alan kapat butonuna tıklandığında false vererek kapanmasını sağlarız.

Ayrıca çok kolay bir şekilde useState' de tanımladığımız örneğin  isOpen ? {<dialog>......<dialog/>} şeklinde dialog içerisini istediğimiz gibi kolayca yönetebiliriz. Yine bir sayaç örneğiyle kodun görünüşü açısından nasıl bir yapıda olduğunu aşağıdaki örnekte görebilirsiniz.

import { useState } from 'react';
function Sayaç() {
 const [sayi, setSayi] = useState(0);
 return (
   <div>
     <p>Sayac: {sayi}</p>
     <button onClick={() => setSayi(sayi + 1)}>Artır</button>
   </div>
 );
}

useEffect Hook'u

useEffect React’te bileşen render edildikten sonra çalışmasını istediğimiz kodları yazmamızı sağlar. API çağrıları, localStorage işlemleri, event dinleyicileri gibi etkiler için kullanılır.

Yine gerçek bir projeden örnek vermek gerekirse sayfa ilk yüklendiğinde bir API’den veri almak istiyoruz. Bu işlemin sadece bir kez yapılmasını isteriz. Çünkü durup dururken API çağrısı sonsuz bir döngüye girer ve bunu istemeyiz. İşte bunu useEffect ile çok kolay şekilde sağlayabiliriz. Genellikle useEffect(() => {...}, []) şeklinde boş bir diziyle tanımlanır. Bu sayede sadece ilk yüklenmede çalışır.

Bir de yazılı örnek vermek gerekirse aşağıdaki örnekte sayfa ilk açıldığında konsola bir mesaj yazdırmayı yapabiliriz:

import { useEffect } from 'react';
function Merhaba() {
 useEffect(() => {
   console.log("Bileşen yüklendi.");
 }, []);
 return <p>Herkese Selam</p>;
}

useContext Hook'u

useContext global olarak tanımlanmış bir veriye alt bileşenlerden kolayca erişmemizi sağlar. Yani ortak veri havuzu gibidir. Örneğin uygulamada tema, dil seçeneği ya da oturum bilgisi gibi veriler genel olarak birden fazla yerde kullanılır. Bu durumda useContext kullanmak oldukça rahatlatıcı olur ve temiz bir yapı kurmamızı sağlar.

Örneğin tema rengini değiştiren bir ayar ekranı oluşturduk. Bu tema bilgisi tüm bileşenlerde geçerli olacaksa useContext ile tanımlanan veriyi her bileşen içinde doğrudan okuyabiliriz. Böylece prop ile veri taşımaya gerek kalmaz ve useContext ile veriye doğrudan erişiriz, JSX içinde de rahatça kullanabiliriz.

useRef Hook'u

useRef bir bileşende en çok bu iki amaç için kullanılır:

• DOM öğelerine erişmek
• Render olmadan veri saklamak

DOM öğelerine erişmek örneğin bir input’a odaklanmak. DOM sayfadaki tüm HTML öğelerinin JavaScript tarafından erişilebilen halidir. Örneğin bir <input> etiketi varsa JavaScript bu input’a document.querySelector() ile ulaşabilir. Ama React’te direkt document.querySelector() kullanmak önerilmez ve tercih edilmemelidir çünkü React’in yönetimini dışarıdan bozabilir ve performanslı değildir. Bu yüzden React bize useRef diye bir hook veriyor.

 useRef kullanıldığında oluşturacağımız yapı const inputRef = useRef() şeklindedir. Bu;

{
 current: null
}

şeklinde bir obje döner. Bu ref’i JSX içinde bir DOM öğesine verirsek (<input ref={inputRef} />) artık inputRef.current, doğrudan o input elementi olur. Mesela inputRef.current.value = "Merhaba" diyerek  input’un değerini değiştirebiliriz.

useReducer Hook'u

useReducer özellikle karmaşık state yapılarında kullanılır. useState onlarca farklı state yönetmemiz gerekliyse bunun yerine tek bir reducer fonksiyonu ile tüm durumları kontrol edebiliriz. Gerçek projeden örnek olarak bir todo list uygulaması düşünebiliriz. Todo ekleme, silme, tamamlama gibi birden fazla işlem olduğu için bunları tek tek useState ile yönetmek çok karmaşık, anlaşılması zor bir yapı oluşturacaktır. Oysa useReducer ile bir reducer fonksiyonu tanımlarız ve bütün işlemleri dispatch ederek tek yerden kontrol edebiliriz. dispatch işlemi tetiklemeyi sağlar. Örneğin başlangıçta useReducer(reducerFn, initialState) diye tanımımızı yaptıktan sonra şöyle bir fonksiyon oluşturduk diyelim; 

function reducerFn(state, action) {
 switch (action.type) {
   case 'ARTTIR':
     return { sayi: state.sayi + 1 };
   case 'AZALT':
     return { sayi: state.sayi - 1 };
   default:
     return state;
 }
}

çağrı yapılmasını istediğimiz butona onclick ile  onClick={() => dispatch({ type: 'ARTTIR' })} verdiğimizde, butona tıklandığında bu çağrının aslında demek istediği, reducerFn fonksiyonuna git, 'ARTTIR' satırını bul, işlemi yap, state' i güncelle ve bileşeni yeniden render et. useState' e oranla en iyi avantajı ise, tüm işlemler tek bir yerde toplar ve böylece kod okunabilirliği artar.
 
Sonuç

React Hook’lar  React geliştirme sürecinde vazgeçilmez bir yere sahiptir. Fonksiyonel bileşenleri daha yetenekli hale getirerek hem daha okunabilir hem de yeniden kullanılabilir kodlar yazılmasını sağlar. useState, useEffect, useContext gibi temel Hook’lar dışında ihtiyaca göre özel Hook’lar yazmak da mümkündür. React' da sağlam bir temel oluşturmak isteyen herkesin Hook mantığını iyi kavraması büyük önem taşır.