Bugün, React dünyasının büyüleyici bir köşesine adım atıyoruz ve “useState Hook” ile eğlenceli bir yolculuğa çıkıyoruz. Şimdi, React’taki state yönetiminin temelini oluşturan bu önemli konuyu daha yakından inceleyerek başlayalım.
Bölüm 1: useState Hook’unun Temel Kullanımı
React projelerinde state yönetimine başlamak için useState Hook’u kullanıyoruz. Peki, bu useState Hook’u nedir ve nasıl kullanılır? İlk adımımızı atmadan önce bu temel sorulara yanıt verelim.
useState Hook’u, bir state değişkeni oluşturmak için kullanılır. Örneğin, bir sayfa üzerindeki bir metin kutusunun içeriğini saklamak için bir state değişkeni oluşturabiliriz. Bu değişkenin değerini okumak ve güncellemek için ise bazı özel fonksiyonlar sunar.
Bölüm 2: İlk State Atamaları
Peki, bu state değişkenlerine nasıl başlangıç değerleri atarız? Başlangıç değerleri, state’in ilk durumunu belirler. Bu noktada, farklı veri türlerini nasıl kullanabileceğimizi göreceğiz. Örneğin, bir metin kutusu için bir başlangıç metni veya bir sayı için sıfır gibi.
const [text, setText] = useState("Merhaba, React!");const [count, setCount] = useState(0);Bölüm 3: Çoklu State Kullanımı
React projelerinde birden fazla state değişkeni kullanmak yaygındır. Örneğin, kullanıcı adı ve şifre gibi bilgileri yönetmek için aşağıdaki gibi state’leri tanımlayabiliriz:
const [username, setUsername] = useState("");const [password, setPassword] = useState("");Bu state’leri kullanarak kullanıcıdan veri alabiliriz. Örneğin, bir formda kullanıcı adı ve şifre girişini yönetmek için:
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Kullanıcı Adı"/><input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Şifre"/>State’ler arasındaki ilişkiyi korumak önemlidir. Kullanıcı adı ve şifreyi bir arada kullanarak işlemler yapabiliriz, ayrıca bu state’leri gruplayarak da yönetebiliriz. Örneğin, user state'i içinde username ve password alt state'leri kullanabiliriz. Bu sayede daha organize bir yapı elde ederiz.
Sonuç olarak, birden fazla state değişkeni kullanarak React uygulamalarını daha esnek ve yönetilebilir hale getirebiliriz. Bu sayede verileri ve uygulama durumunu daha iyi yönetebiliriz.
Bölüm 4: Önceki State Değerlerini Kullanma
Önceki state değerlerini kullanarak yeni bir state oluşturmak, bazen uygulamalarınızda oldukça faydalı olabilir. Bu özellikle, mevcut state değerini değiştirmeden önceki değeri kullanmanız gereken senaryolarda kullanışlıdır.
const [count, setCount] = useState(0);const increment = () => { setCount((prevCount) => prevCount + 1);};Yukarıdaki kod örneği, React’ta önceki state değerini kullanarak yeni bir değer hesaplamayı gösteriyor. Bir sayaç uygulaması örneğini ele alalım. useState ile başlatılan bir “count” state’i var ve bu state değerini artırmak için bir “increment” işlevi bulunuyor. Ancak, bu işlevin içindeki setCount çağrısında, önceki state değeri kullanılarak yeni bir state değeri hesaplanmıştır.
Bu kod parçasında, setCount içindeki arrow işlevi kullanılarak önceki “count” değeri alınır ve bu değer üzerine 1 eklenir. Bu sayede her çağrıldığında önceki state değeri kullanılarak yeni bir state değeri oluşturulmuş olur.
Bu yaklaşım, state değerlerinin güvenli bir şekilde güncellenmesini sağlar, özellikle çoklu state güncellemeleri veya asenkron işlemler sırasında. Böylece, her zaman güncel ve doğru bir önceki state değerine erişebilirsiniz.
Bu bölümde, önceki state değerlerini kullanarak yeni bir state oluşturmayı öğrendik. Bu yaklaşım, React uygulamalarınızda daha karmaşık mantıklar ve state yönetimi için kullanabilirsiniz.
Bölüm 5: State Değerlerini Güncelleme
State değerlerini güncellemenin püf noktalarını ve dikkat etmemiz gereken önemli detayları bu bölümde inceleyeceğiz. Özellikle, state değerini doğrudan değiştirmek yerine, setState fonksiyonunu kullanmanın neden önemli olduğunu anlayacağız.
React’ta state değerlerini güncellemek için setState fonksiyonunu kullanmalısınız. Bu fonksiyon, state'i güncellediğinizde React'e bu değişiklikleri bildirir ve bileşeni tekrar render eder.
Önemli Noktalar:
setState kullanın: State değerlerini güncellerken doğrudan değiştirmeyin, setState fonksiyonunu kullanın.
Asenkron İşlem: setState asenkron olarak çalışır, bu nedenle güncellemeler hemen gerçekleşmeyebilir.
Fonksiyonel Güncelleme: Önceki state değerine dayalı güncellemelerde fonksiyonel güncellemeyi tercih edin.
Birden Fazla State: Birden fazla state değeri varsa, her birini ayrı ayrı yönetin.
İmmutability: State içeriğini güncellerken mevcut state’i değiştirmeyin, yeni bir kopya oluşturun.
Kontrolsüz Bileşenlere Dikkat: Kontrolsüz bileşenlerde state güncellemesi manuel olarak yapılabilir, ancak dikkatli olun.
Bu basit kurallara dikkat ederek, React uygulamanızın daha güvenilir ve performanslı olmasını sağlayabilirsiniz. State yönetimi, React uygulamalarının temel bir konseptidir ve doğru şekilde uygulanması önemlidir.
Bölüm 6: State Değişikliklerini Takip Etme (useEffect ile)
useState kullanırken, state değişikliklerini nasıl takip edebiliriz? İşte burada useEffect devreye giriyor. Bu hook ile state değişikliklerini nasıl dinleyebileceğinizi ve uygun şekilde tepki verebileceğinizi öğreneceksiniz.
useEffect(() => { console.log("count değeri değişti: ", count);}, [count]);` [count], useEffect kancasının sadece count değiştiğinde çalışmasını sağlar. [] ise kancanın yalnızca bileşenin ilk render'ında çalışmasını sağlar. Bu, belirli değişkenlere tepki verme veya yalnızca bir kere çalışma gereksinimlerine uygun kullanımı temsil eder.`
Bölüm 7: useState İle İleri Düzey Kullanımlar
useState Hook’unu daha derinlemesine kullanmanın yollarını da öğreneceğiz. Örneğin, özel state güncelleme fonksiyonları oluşturarak veya state değerlerini nesne veya dizi olarak kullanarak daha karmaşık senaryoları ele alabiliriz.
const [person, setPerson] = useState({name: "", age: 0});const updateName = (newName) => { setPerson((prevPerson) => ({ ...prevPerson, name: newName }));};`React bileşeninde kullanılan bir state (person) ve bu state'i güncellemek için bir fonksiyon (updateName) içerir. İlk olarak, person adında bir nesne tanımlanır ve başlangıçta boş bir isim (name: "") ve yaş (age: 0) değeriyle başlatılır. updateName fonksiyonu, mevcut person nesnesini kopyalayarak (spread operatörü kullanarak) ve yeni bir isimle güncelleyerek state'i günceller. Böylece, React'ta state güncellemesi yaparken önceki state'i korur ve sadece değiştirmek istediğimiz alanları güncelleriz.`
Bölüm 8: useState ile Yaygın Hatalar ve Çözümleri
Son olarak, useState Hook’u kullanırken karşılaşabileceğiniz yaygın hataları ve bu hatalardan nasıl kaçınabileceğinizi keşfedeceğiz. Bu sayede kodunuzu daha sağlam ve hata toleranslı hale getirebiliriz.
State Düzgün İlk Değerle Başlatılmadı: Hata: State’i uygun bir başlangıç değeri olmadan tanımlarsanız, uygulamanız hatalarla karşılaşabilir. Çözüm: State’i uygun bir başlangıç değeri ile başlatın, boş bir dize, 0 veya null gibi.
// Örnek başlangıç değeri olarak 0 kullanmaconst [count, setCount] = useState(0); State’i Yanlış Şekilde Güncellemek: Hata: State’i güncellerken mevcut değeri değiştirmek için doğru yöntemleri kullanmazsanız, beklenmeyen sonuçlar elde edebilirsiniz. Çözüm: State’i güncellemek için önceki değeri koruyarak fonksiyonel güncellemeleri tercih edin
Doğru Yol: setCount(count + 1);
Bu satır, count değişkeninin mevcut değerine 1 ekler ve sonucu count değişkenine atar. Bu yöntem, özellikle React veya benzeri bir bileşen tabanlı bir uygulama geliştiriyorsanız, bileşenin yeniden render edilmesini tetiklemek ve güncel veriyi UI'ınıza yansıtmak için kullanılır. Bu yöntemi kullanmak, durumunuzu ve kullanıcı arayüzünüzü güncel ve senkron tutmanıza yardımcı olur
Yanlış Yol: count += 1;
Bu satır, count değişkenine doğrudan 1 ekler. Bu yöntem, basit bir JavaScript uygulaması oluştururken veya sadece değişkeni güncellemeniz gerektiğinde kullanılabilir. Ancak, bu yaklaşımın dezavantajı, React veya benzeri bir bileşen tabanlı bir çerçeve kullanıyorsanız, bileşenin yeniden render edilmemesi ve kullanıcı arayüzünün güncel veriyle güncellenmemesi olabilir.
Yani temel fark, “Doğru Yol” kullanıldığında değişken güncellendiğinde React veya benzeri bir kütüphane tarafından takip edilir ve uygun şekilde güncellenen UI’ı tetikler. “Yanlış Yol” ise sadece değişkenin değerini artırır, ancak bu güncelleme UI’ı otomatik olarak güncellemez. Bu nedenle, projenizin gereksinimlerine bağlı olarak hangi yöntemi kullanmanız gerektiğini seçmelisiniz.
State’i Farklı Yerlerde Kullanmak: Hata: Aynı state’i farklı bileşenlerde kullanıyorsanız, senkronizasyon sorunlarına yol açabilir. Çözüm: State yönetimini yukarıdan aşağıya veri akışını sağlayan bir yapıyla yapın, örneğin Redux veya Context API kullanarak.
Yanlış Bağımlılık Dizisi Kullanmak: Hata: useEffect gibi yan etkiyi tetikleyen fonksiyonlarda yanlış bağımlılık dizileri kullanırsanız, beklenmeyen davranışlar oluşturabilirsiniz. Çözüm: İlgili bağımlılıkları eksiksiz ve doğru şekilde belirtin.
useEffect(() => { // ...}, [count]); // Doğru bağımlılık dizisini kullanarakHesaplamaları Render İçinde Yapmak: Hata: Her render sırasında aynı hesaplamaları yapmak performans sorunlarına yol açabilir. Çözüm: Hesaplamaları gerekirse useMemo veya useCallback kullanarak optimize edin.
const expensiveCalculation = useMemo(() => { // Hesaplamalar}, [dependencyArray]);Bu yaygın hatalardan kaçınarak, useState Hook’unu daha sağlam hale getirebilirsiniz. Doğru başlangıç değerleri, doğru güncelleme yöntemleri ve uygun bağımlılık dizileri kullanarak uygulamanızın daha güvenilir olmasını sağlayabilirsiniz.
Sonuç olarak, React’ta useState Hook’unun gücünü ve avantajlarını keşfederken, bu Hook’un bazı sınırlamalarını da göz önünde bulunduracağız.
Öğrendiklerimizi pekiştirmek için pratik örnekler ve uygulamalar sunacağız.
Basit Bir Sayaç Uygulaması:
import React, { useState } from 'react;function Counter() { // useState Hook'unu kullanarak bir state değişkeni oluşturuyoruz const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Artır</button> <button onClick={() => setCount(count - 1)}>Azalt</button> </div> );}export default Counter;Bu örnekte useState Hook’u kullanarak count adında bir state değişkeni oluşturuyoruz. Bu sayacı artırmak veya azaltmak için iki düğme ekliyoruz ve düğmeye tıkladığınızda setCount fonksiyonunu kullanarak state'i güncelliyoruz.
Form İnput ile Kullanıcı Girişi:
import React, { useState } from 'react';function LoginForm() { // useState Hook'u kullanarak iki state değişkeni oluşturuyoruz const [username, setUsername] = useState(''); // Kullanıcı adını saklayacak state const [password, setPassword] = useState(''); // Şifreyi saklayacak state // Form gönderildiğinde çalışacak işlev const handleSubmit = (e) => { e.preventDefault(); // Sayfanın yeniden yüklenmesini engeller // Kullanıcı adı ve şifre, burada işlenmeye hazır hale gelir. // Bu örnekte, sadece konsola yazdırıyoruz, ancak gerçek uygulamada bu bilgileri bir sunucuya göndererek // kullanıcı doğrulama ve oturum açma gibi işlemleri gerçekleştirebilirsiniz. console.log('Kullanıcı adı:', username); console.log('Şifre:', password); // Form gönderildikten sonra, kullanıcı adı ve şifre alanlarını sıfırlamak için state'i boş bir dize ile güncelliyoruz. setUsername(''); setPassword(''); }; return ( <form onSubmit={handleSubmit}> <input type="text" placeholder="Kullanıcı Adı" value={username} onChange={(e) => setUsername(e.target.value)} // Kullanıcı adı değiştiğinde state'i günceller /> <input type="password" placeholder="Şifre" value={password} onChange={(e) => setPassword(e.target.value)} // Şifre değiştiğinde state'i günceller /> <button type="submit">Giriş Yap</button> {/* Formu göndermek için düğme */} </form> );}export default LoginForm;Bu örnekte, kullanıcı adı ve şifre için iki ayrı state değişkeni oluşturuyoruz ve bu state’leri input alanlarına bağlıyoruz. Kullanıcı bir form gönderdiğinde, handleSubmit işlevi bu bilgileri işleyebilir.
Tema Değiştirme Uygulaması:
import React, { useState } from 'react';function ThemeSwitcher() { // useState Hook'u kullanarak tema adında bir state değişkeni oluşturuyoruz const [theme, setTheme] = useState('light'); const toggleTheme = () => { // Temayı değiştiriyoruz (light <-> dark) setTheme(theme === 'light' ? 'dark' : 'light'); }; return ( <div className={`App ${theme}`}> <button onClick={toggleTheme}>Tema Değiştir</button> <p>Aktif tema: {theme}</p> </div> );}export default ThemeSwitcher;Bu örnekte, temayı değiştirmek için bir state değişkeni kullanıyoruz. toggleTheme işlevi ile tema değiştirme işlemi gerçekleşiyor. Tema değiştikçe, bileşenin sınıf adı (App light veya App dark) güncellenir ve bu sayede tema değişiklikleri uygulanır.
Hazır mısınız? React yolculuğumuz şimdi başlıyor! 🚀😊
Sevgiler, Tarık TunçReactJS’te useState Kullanırken Dikkat Edilmesi Gerekenler