Bir State Tanımı Yapmak İçin Kullanılan Hook Nedir?

Bir State Tanımı Yapmak İçin Kullanılan Hook Nedir?

React, web uygulamaları geliştirmek için popüler bir JavaScript kütüphanesidir. Bir React uygulamasında, bileşenler state (durum) adı verilen veri yönetimi için kullanılır. State, bir bileşenin hafızasında saklanır ve bileşenin re-rendering (yeniden çizme) işlemlerinde kullanılır. Ancak, önceden class component kullanılarak state yönetimi yapılıyordu. Yeni React sürümlerinde ise state yönetimi için "Hook" adı verilen bir yapı geliştirildi.

Hooks, state ve diğer React özelliklerini class olmadan kullanmamızı sağlar. Bir hooked bileşen, state tanımlayabilir, state değerine erişebilir ve ona güncelleme yapabilir. Bu sayede kodun okunurluğu ve yeniden kullanılabilirliği artar. React'in üç önemli Hook'u useState, useEffect ve useContext'dir.

useState: useState, state yönetimi için kullanılan en temel Hooke'dir. Bir bileşende bir veya birden fazla state tanımlamak için kullanılır. Bir useState Hook'u ile state tanımladığımızda, React bize iki elemanlı bir dizi döner. Birinci eleman, state'in mevcut değerini temsil eder ve ikinci eleman ise state değerinin güncellenmesini sağlayan bir fonksiyondur.

Örneğin, bir bileşende kullanıcı adı state'ini tanımlamak için useState kullanabiliriz:

const [username, setUsername] = useState('');

Burada, "username" adında bir state tanımlanır ve boş bir string değeri ile başlatılır. "setUsername" ise username state'inin güncellenmesini sağlayan fonksiyondur.

useEffect: useEffect, bir bileşende yaşam döngüsüne bağlı olarak fonksiyonları çalıştırmak için kullanılan bir Hooke'dir. useEffect, bileşen her render olduğunda veya istenilen state değeri güncellendiğinde çalıştırılabilir.

Bununla birlikte, useEffect'in çalışması bileşenin render işleminden sonra gerçekleşir. Bu sayede, async veri alma, veri işleme veya diğer asenkron işlemleri yönetmek için kullanılabilir.

Örneğin, bir bileşenin ilk renderında API'den veri çekmek için useEffect kullanabiliriz:

useEffect(() => {
fetchData();
}, []);

Burada, boş bir dizi ([]) kullanarak useEffect'in sadece bileşenin ilk renderında çalışmasını sağlıyoruz. Eğer dizi içerisine belirli bir state değeri eklersek, useEffect yalnızca o state değeri güncellendiğinde çalışacaktır.

useContext: useContext, React uygulamasında global state paylaşan bileşenler arasında veri iletişimini sağlamak için kullanılır. useContext ile bir Context oluşturulur ve bu Context içerisine veri kaydedilir. Daha sonra, useContext ile bu Context'e erişebilir ve veriye erişimi yönetebiliriz.

Bir örnek olarak, kullanıcı oturum bilgisinin paylaşıldığı bir Context tanımlayabiliriz:

const UserContext = createContext();

Bu Context içerisine kullanıcı adı ve oturum başlatma fonksiyonu gibi değerler kaydedilir. Daha sonra UserContext'i kullanarak bu verilere herhangi bir bileşenden erişebiliriz:

const user = useContext(UserContext);

Sonuç olarak, başlangıçta React'ta state yönetimini gerçekleştirmek için class component kullanılıyordu. Ancak, yeni React versiyonları ile birlikte Hook yapısı geliştirilmiştir. useState, useEffect ve useContext gibi Hook'lar, React bileşenlerinde state tanımlamayı, state'e erişmeyi ve state'i güncellemeyi kolaylaştırır. Bu sayede daha temiz ve okunabilir bir React kodu yazmak mümkün hale gelmiştir.

Sıkça Sorulan Sorular

useState hook'u, React'ta bir state tanımı yapmak için kullanılan bir özelliğidir. Bu hook, bir functional component içinde state kullanmamızı sağlar. Kullanımı için öncelikle useState hook'u React kütüphanesinden import edilmelidir. Ardından bir değişken ve onun değerinin güncellenebilmesini sağlayan bir fonksiyon döndüren bir destructuring işlemi ile state tanımlanır. Bu fonksiyon, state'in herhangi bir değişikliğinde yeni değeri React'e bildirir ve yeniden render işlemi gerçekleşir.

useState hook'u, component'in kendi içerisinde bağımsız bir özelliğin takibinin yapılması gerektiği durumlarda tercih edilmelidir. Örneğin, bir tuşa tıklama sayısının veya bir formdaki kullanıcının girdiği değerin takibinin yapılması gibi durumlar için kullanılabilir. Component'in render işlemini etkileyen ve bağımsız olarak değişen durumları takip etmek için useState hook'u kullanmak iyidir.

Evet, useState hook'u ile birden fazla state kullanılabilir. Bir component içinde kullanılmak istenen her bir state için ayrı bir useState hook'u kullanılabilir. Kullanılacak her yeni state için kullanıcıya yeni bir değişken ve onun değerini güncelleyen bir fonksiyon döndüren bir destructuring işlemi yapılır.

useState hook'u ile state güncellemek için, tanımlanmış olan değişkenin güncelleme fonksiyonu kullanılmalıdır. Bu fonksiyon, state'in mevcut değerini alır ve bu değeri güncellemenizi sağlar. Yani, örneğin bir tuşa tıklama sayısını tutan bir state'in değerini artırmak için güncelleme fonksiyonunu kullanabilirsiniz. Bu fonksiyon, önceki değeri değiştirmez ancak yeni değeri React'e bildirir ve yeniden render işlemi gerçekleştirir.

useState hook'u ile state'in önceki değerine erişmek için, önceki değeri saklamak için bir ref oluşturmanız gerekir. Bunun için useRef hook'u kullanılabilir. useRef hook'u ile bir ref oluşturarak, state değerini güncellediğinizde önceki değerini bu ref ile saklayabilirsiniz. Bu şekilde, ref.current değeri ile önceki değere erişebilirsiniz. Ref'in değeri herhangi bir nesne gibi tutulur ve her render işlemi sırasında değişmez, sadece kendini güncelleyen component'un kadar canlı kalır. Bu sayede önceki state değerini tutarak karşılaştırma yapabilirsiniz.