React Hooks kullanarak global state yönetimi, React uygulamalarında state yönetimini kolay ve hızlı hale getirir useState, useEffect ve useContext gibi React Hook'ları, global state yönetimi için kullanılabilir Global state yönetimi, tüm bileşenlerin aynı state'e erişerek veri paylaşımını mümkün kılar ve gereksiz component yeniden renderlama problemi ortadan kalkar useState fonksiyonu ile component içerisinde değişkenler tanımlayabilir ve bu değişkenleri state olarak kullanabilirsiniz useState fonksiyonu ile state kullanımı yaparken, useState fonksiyonunun mutlaka en üst düzeyde bulunması gerekiyor ve useState fonksiyonu içeren component unmount edildiğinde, state değeri de otomatik olarak sıfırlanacaktır
React uygulamaları karmaşık ve büyük boyutlu olabilir. Bu gibi durumlarda, state yönetimini düzenlemek oldukça zor bir hale gelebilir. Bu durumda, React Hooks kullanarak global state yönetimi yapabilirsiniz. React Hooks, React 16.8 sürümünden itibaren kullanıma sunulan bir yöntemdir ve React uygulamalarında kullanılan state yönetimini daha kolay ve daha hızlı hale getirir.
React Hooks, componentlerin state tanımlamasını ve bir ya da birden fazla state değişkenini yönetmesini sağlar. Bu yöntem sayesinde componentler arasında state paylaşımı daha kolay hale gelir ve kod tekrarından kaçınarak daha temiz bir strüktür elde edilir.
Bununla birlikte, React Hooks kullanmadan önce state yönetimi ile ilgili temel bilgilere sahip olmanız gerekir. Ayrıca, global state yönetimi yaparken kullanılacak Hook'ların doğru bir şekilde kullanılmasına ve olası hataların önlenmesine dikkat etmeniz gereklidir.
React Hooks ve Global State Yönetimi
React uygulamalarında state yönetimi, birçok geliştiricinin en büyük sorunlarından biridir. React'taki state, bir bileşenin durumunu veya içindeki verileri tutan bir nesnedir ve React Hooks, bu state yönetimini kolaylaştırmak için kullanılabilir. Global state yönetimi yapmak, birden fazla bileşen arasında veri paylaşımını mümkün kılar ve bu nedenle çok önemlidir.
React Hooks kullanarak global state yönetimi yapmak, daha kolay ve esnek bir yaklaşım sunar. Global state yönetiminde, tüm bileşenlerin erişebildiği bir state nesnesi oluşturulur ve bu nesne, gerektiğinde güncellenebilir. Böylece, uygulamanın herhangi bir yerinde bu state'i kullanabilirsiniz. Tüm bileşenlerin aynı state'e erişerek, veri paylaşımı mümkün olur ve gereksiz component yeniden renderlama problemi ortadan kalkar.
Global state yönetimi yapmak, daha büyük React projelerinde oldukça yararlıdır ve kod tekrarını önlemek için de kullanılabilir. Başka bir deyişle, aynı state'i birden fazla kez yazmak yerine, bir kez yazarak, uygulamanın her yerinden erişim sağlayabilirsiniz. Bu da zaman ve efor tasarrufu sağlar.
React Hooks Kullanımı
React projelerinde global state yönetimi için kullanılan React Hook'larının kullanımı oldukça önemlidir. useState, useEffect ve useContext gibi React Hook'ları ile global state yönetimi işlemleri kolaylıkla yapılabilmektedir. useState Hook'u kullanarak component içerisinde değişkenler tanımlayabilir ve bu değişkenleri state olarak kullanabilirsiniz. useEffect Hook'u kullanarak component'in mount, update ve unmount işlemlerini kontrol edebilirsiniz. useContext Hook'u ise global state yönetimi yaparak componentler arasında data paylaşımını sağlar. Bu React Hook'ları ile React projelerinde global state yönetimi işlemleri daha kolay ve hızlı bir şekilde yapılabilmektedir.
useState
React Hooks'a geçiş yapılması ile birlikte, state'in kullanımı da kolaylaştı. useState fonksiyonu ile component içerisinde değişkenler tanımlayabiliyoruz ve bu değişkenleri state olarak kullanabiliyoruz. Bu sayede, componentimizdeki data'nın değişen durumlarını kontrol edebiliyoruz.useState ile state kullanımı oldukça basittir. İlk olarak, state değerimizi tanımlıyoruz. Bunun için, useState fonksiyonunu kullanıyoruz. useState fonksiyonunun parametresi, ilk değerini ifade eder. Örneğin, aşağıda inputState değişkenine, string tipinde "İsim" değeri verilmiş. Bu şekilde useState fonksiyonu ile state değerimizi belirlemiş oluyoruz.```import React, { useState } from "react";const Example = () => { const [inputState, setInputState] = useState("İsim"); return (
useState örneği
useState, React Hooks'un en popülerlerinden biridir ve component içerisindeki değişkenlerin state olarak kullanılmasına olanak sağlar. Bu örnekte, bir counter uygulaması yaratarak useState Hook'unu kullanacağız.
| Kod: | Açıklama: |
|---|---|
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( | Yukarıdaki kod, useState Hook'unun nasıl kullanıldığını göstermektedir. Öncelikle useState fonksiyonu ile count adlı state değişkeni ve setCount adlı değişkenin değerlerini başlangıçta 0 olarak ayarladık. Ardından, component içerisinde count değişkenine bağlı olarak bir <p> ve <button> elemanı oluşturduk. Button'a tıklama işlemi gerçekleştiğinde, setCount fonksiyonu üzerinden count değişkeninin değeri güncellenir ve component yenilenir. |
Bu örnek, useState Hook'unun nasıl kullanıldığına ilişkin basit bir örnektir. Siz de farklı state değerleri için useState Hook'unu kullanabilirsiniz. Tek yapmanız gereken useState fonksiyonu içerisinde başlangıç değerlerinizi belirlemek ve setCount fonksiyonu aracılığıyla değişkenleri güncellemektir.
useState kullanırken dikkat edilmesi gereken noktalar
useState Hook’unun kullanımı oldukça yaygındır ancak hatalar da yapılabilen bir konudur. Bunun için kullanım sırasında dikkat edilmesi gereken bazı noktalar vardır.
- Değişken isimleri verilirken aynı isimler birden fazla tanımlanmamalıdır.
- useState Hook’u içindeki değişkenleri atanırken sıralama önemlidir. Eğer bir değişken ataması yapılırsa, sonrasında kalan değişkenlerin atanması yapılır.
- Örnek olarak, aşağıdaki kodda kusurlu kod bilgisine sahibiz:
| Kod örneği | Değerlendirme |
|---|---|
const [state, setState] = useState({ name: '', age: 0});const [name, setName] = useState('');const [age, setAge] = useState(0); | Bu örnekte, ilk useState Hook’u içerisindeki değişkenler(state, setState) sonrasında gelen useState Hook’ları için değişkenlerin atanmasına yardımcı olur. |
Bu yüzden değişkenlerin atanması sırasında öncelikle obje şeklindeki state, setState değişkenleri sonrasında ise diğer değişkenlerin atanması sağlanmalıdır.
Ayrıca, useState Hook’ları içinde yönetilen bir obje varsa, bu obje her defasında yeniden oluşturulmamalıdır. Bu durum, rendering'lerde süre kaybına neden olabilir. Bunun için objenin değiştirilemez olduğu belirtilmelidir.
useEffect
React Hooks'un en önemli öğelerinden biri useEffect Hook'udur. useEffect Hook'u, component'in mount, update ve unmount süreçlerini kontrol etmeye yarar. Bu sayede component'in bir tür yaşam döngüsü ortaya çıkmaktadır. useEffect Hook'u, kullanımı kolay olan bir yapıya sahiptir ve ihtiyaç duyulan durumda kullanılarak component'in durumunu kontrol etmek mümkündür.
useEffect Hook'u, component'in mount sürecinde yani sayfaya ilk yüklendiği anlarda çalışır. Buna ek olarak, component'in durumu değiştiğinde, yani update işlemi gerçekleştiğinde de çalışacaktır. Bu sayede component'in durumu kontrol edilerek, gerektiği gibi yeniden render edilmesi sağlanacaktır. Ayrıca, component'in unmount sürecinde çalışarak, bellek sızıntısı ve gereksiz yere yanlış bir şekilde render etme sorunları da önlenmiş olur.
Bununla birlikte, useEffect Hook'u kullanırken dikkat edilmesi gereken bazı hususlar bulunmaktadır. İlk olarak, useEffect Hook'u içerisinde yer alan işlemlerin mümkün olduğunca hafif olması gerekmektedir. Aksi takdirde, component'in performansı olumsuz yönde etkilenebilir. İkinci olarak, useEffect Hook'u içerisinde bulunan kodlar büyük harflerle yazılmamalıdır. Bu, React tarafından öngörülen kurallara aykırıdır ve hatalara sebep olabilir.
Bu nedenle, useEffect Hook'u kullanırken doğru bir şekilde kullanmaya özen göstermek gerekmektedir.
useEffect örneği
useEffect Hook'u, componentlerin mount, update ve unmount süreçlerini kontrol etmek için kullanılır. Bu hook, render edildikten sonra herhangi bir değişiklik olduğunda tetiklenir.Bu örnekte useEffect Hook'u, component mount olduğunda ve belirli bir durumda çalışacak şekilde ayarlanmıştır. Örneğin, bir blog yazısı sayfası düşünelim. Bu sayfa component'i mount olduğunda, belirli bir blog yazısının yüklenmesi gerekiyor. Bu durumda useEffect Hook'una, yalnızca component mount olduğunda tetiklenecek olan işlevi yazabiliriz. ```jsimport React, { useState, useEffect } from 'react';function BlogPost({ id }) { const [title, setTitle] = useState(''); const [content, setContent] = useState(''); useEffect(() => { fetch(`https://api.example.com/posts/${id}`) .then(response => response.json()) .then(data => { setTitle(data.title); setContent(data.content); }); }, [id]); return ({content}
useEffect kullanırken dikkat edilmesi gereken noktalar
useEffect, React projelerindeki componentlerin mount, update ve unmount süreçlerinde kullanılan bir Hook'tur. Bu Hook'un doğru kullanımı, uygulamanızın performansı ve çalışma süresi açısından oldukça önemlidir. useEffect kullanırken dikkat edilmesi gereken noktalar aşağıdaki gibidir:
- useEffect içerisinde kullanılan state ve props'ların değişimlerini takip etmek için, dependency array'e eklemek önemlidir. Aksi takdirde, istenmeyen sonuçlar ortaya çıkabilir.
- useEffect içerisinde işlemler yaparken, bunların sadece belirli bir durumda çalışması gerekiyorsa, condition'ların kullanımı önerilmektedir. Bu sayede gereksiz işlemlerden kaçınabilirsiniz.
- useEffect içerisindeki işlemler mümkünse async/await kullanılarak yapılmalıdır. Böylece işlemler asenkron olarak gerçekleştirilerek, uygulama performansı artırılabilir.
- useEffect içerisindeki işlemler sırasında oluşabilecek hataların yakalanması ve handle edilmesi gerekmektedir. Bu sayede uygulamanızın daha da stabil hale gelmesi sağlanır.
useEffect, uygun şekilde kullanıldığında, React projelerinizdeki süreçleri kontrol etmenizi ve yönetmenizi sağlayan bir Hook'tur. Bu nedenle, doğru şekilde kullanmak ve yukarıdaki noktalara dikkat etmek, uygulamanızın performansını artıracak ve daha iyi bir kullanıcı deneyimi sunacaktır.
useContext
useContext Hook'u, React uygulamaları içerisinde global state yönetiminde kullanılan ve componentler arasında data paylaşımını sağlayan bir React Hook'udur. useContext kullanımı, tek bir state nesnesinin farklı componentlerde kullanılabilmesine ve bu componentler arasındaki data paylaşımın daha kolay bir şekilde yapılabilmesine olanak tanır.
useState Hook'u kullanımı gibi, useContext Hook'u kullanımı da oldukça basit bir yapıya sahiptir. İlk olarak, createContext() fonksiyonu kullanılarak bir context nesnesi oluşturulmalıdır. Daha sonra, bu context nesnesi Provider componenti içinde kullanılmalı ve gerektiği yerde Consumer componenti ile erişim sağlanmalıdır.
Örneğin, bir kullanıcının adı ve soyadının global state yönetimi yapılacak olsun. createContext() fonksiyonu kullanılarak bir context nesnesi oluşturulur ve bu context nesnesi Provider componenti içinde kullanılır. Ardından, bir input alanı içinde bu global state kullanılarak kullanıcının adı ve soyadı değiştirilebilir ve diğer componentlerin de bu değişimleri takip etmesi sağlanır.
Ayrıca, useContext Hook'u kullanarak global state yönetimi yaparken dikkat edilmesi gereken en önemli nokta, bu global state'in gereksiz yere yeniden render edilmesinin önlenmesidir. Bu nedenle, createContext() fonksiyonu kullanılırken initialState parametresi kullanılmalıdır ve sadece state'te değişiklik olduğu durumlarda yeniden render edilmelidir.
Sonuç olarak, useContext Hook'u kullanarak global state yönetimi yapmak oldukça kolay bir yöntemdir ve componentler arasındaki data paylaşımını daha kolay ve hızlı hale getirir.
useContext örneği
UseContext Hook'u kullanarak global state yönetiminin nasıl yapıldığını daha iyi anlamak için bir örnek verelim. Örneğimizde bir kullanıcının siteye giriş yapma durumunu kontrol etmek için global state kullanacağız. useState Hook'u kullanarak 'isUserLoggedIn' adında bir değişken tanımlayacağız ve useContext Hook'u kullanarak bu değişkene erişeceğiz.
Öncelikle, createContext() fonksiyonu ile bir context oluşturuyoruz ve içinde kullanmak istediğimiz değişkenleri tanımlıyoruz. Bu örnekte sadece 'isUserLoggedIn' değişkenini kullanacağız.
```import React, { createContext, useState, useContext } from 'react';
// createContext ile context oluşturmaconst UserContext = createContext();
function App() {
// useState ile değişken tanımlama const [isUserLoggedIn, setUserLoggedIn] = useState(false);
return (
function Dashboard() { const { isUserLoggedIn } = useContext(UserContext); return (
export default App;```
Bu örnekte, UserContext.Provider, 'isUserLoggedIn' değişkeninin, Dashboard component'ine child olarak aktarılmasını sağlar. Dashboard component'inde, useContext Hook'u kullanarak değişkene erişebiliriz.
Bu örnek, daha karmaşık bir uygulama için de kullanılabilir. Örneğin, bir kullanıcının seçtiği tema renklerini global state kullanarak her component'in bu tema renklerine erişmesi sağlanabilir.
Kısacası, useContext Hook'unu kullanarak global state yönetimi yapmak, componentler arasında veri paylaşımı yapmak oldukça kolay ve hızlı bir yöntemdir.
useContext kullanırken dikkat edilmesi gereken en önemli nokta
useContext Hook'u kullanarak global state yönetimi yaparken dikkat edilmesi gereken en önemli nokta, komponent ağacı içerisindeki bileşenlerin yeniden render edilmesiyle ilgilidir. useContext Hook'u kullandığınızda, context'ten bir değeri değiştirdiğinizde, tüm alt bileşenlerin yeniden render edilmesi gerekebilir. Bu durumda, tüm bileşenlerin yeniden render edilmesi performans sorunlarına neden olabilir.
Bu durumun önüne geçmek için, context'ten yalnızca ihtiyaç duyulan verileri almak gerekir. Bu sayede sadece ihtiyaç duyulan bileşenler yeniden render edilir, diğer bileşenler performans sorunlarına neden olmaz. Ayrıca, useMemo Hook'u kullanarak değerlerin önbelleklemesi yapılabilir, böylece global state'in değiştiği durumlarda sadece ilgili bileşenlerin yeniden render edilmesi sağlanabilir.
Özellikle büyük bir uygulama geliştirirken, useContext kullanımında dikkatli olmak ve performans sorunlarının önüne geçmek önemlidir. Bu önemli noktanın üzerinde durarak, uygulamanızın performansını arttırabilir ve daha iyi bir kullanıcı deneyimi sağlayabilirsiniz.
Sonuç
React uygulamalarında state yönetimi oldukça önemlidir. Bu yönetimi yaparken özellikle global state yönetimi gerektiğinde, React Hooks kütüphanesi kullanılabilir. Hem kodun okunabilirliğini artırmak hem de işlemleri daha hızlı yapabilmek için Hooks kullanımı oldukça avantaj sağlar.
React Hooks kullanarak global state yönetimi yapmanın kolay ve hızlı bir şekilde yapılabileceği konusunda bir özet çıkarabiliriz. useState, useEffect ve useContext gibi Hooks'ların kullanıldığı global state yönetimi, componentler arasında data paylaşımını da sağlar. Bunun dışında Hooks kullanımı sayesinde, componentler içerisindeki state'leri kolayca yönetebilir ve süreçleri kontrol edebilirsiniz. useState sayesinde değişkenlerinizi state olarak tutabilir, useEffect ile mount, update ve unmount işlemlerini yönetebilir, useContext ile de global state yönetimi yapabilirsiniz.
Sonuç olarak, React projelerinde global state yönetimi yapmak için, Hooks kütüphanesinden faydalanmak oldukça avantajlıdır. useState, useEffect ve useContext gibi Hooks'lar sayesinde bu süreçler daha kolay bir şekilde yönetilebilir. Eğer React Hooks kullanımını öğrenerek global state yönetimi yapmak isterseniz, bu işlemleri kolayca gerçekleştirebilirsiniz.