React Context Kullanarak Global Durum Yönetimi

Adı : React Context Kullanarak Global Durum Yönetimi

Günümüzde React, web uygulamaları için en popüler JavaScript kütüphanelerinden biridir. Ancak, React uygulamalarında aynı veri ya da state yapısının birden fazla component tarafından kullanılması gerektiği durumlarda, veriyi tek bir yerden yönetmek oldukça zordur. Bu sorunu çözmek için, React Context kullanarak global durum yönetimi yapabiliriz. Bu yazıda, Context'i kullanarak global durum yönetimi hakkında detaylı bir şekilde konuşacağız.

React Context Nedir?

React Context, React kullanarak uygulamalar için global bir state yönetimi sağlayan bir API'dir. Context, bir data ismi ve bir data değeri çiftidir. İçerisine yerleştirilen veri, ağaçtaki tüm component'lar tarafından erişilebilir hale gelir. Bu sayede, veriye ihtiyaç duyulan her alanda tekrar kullanılabilir.

React Context, bir tür global veri deposu olarak düşünülebilir. Veri ilk olarak bir provider tarafından belirlenir ve daha sonra çocuk component'lar bu veriye kolayca erişebilir. Ayrıca, Context API ile belirlenen veri değiştirildiğinde, tüm component'lar hemen güncellenir.

React'teki Global State Management Problemi

React uygulamalarında, state yönetimini, state tutan component'lardan diğer component'lara props olarak veri aktaralrak yapabiliriz. Ancak, birden fazla component'ın aynı state'e erişmesi gerektiğinde, verinin geçirilmesi oldukça zor hale gelebilir. Bu noktada, React Context kullanarak, tüm uygulama boyunca tutulan veriye kolayca erişebiliriz.

React Context ile Global State Yönetimi

React Context, Python’daki dictionarylere çok benzer. İçinde bulunduğu yani küçük bir component’de, state tanımlaması yapmadan, bir dictionary oluşturulur. Bu dictionary, provider adındaki ana component’de bulunur. Bu provider, dictionary içinde belirtilen bütün state’leri içinde barındırır.

Bu provider component’ın çocukları tarafından createContext() fonksiyonuyla, içinde olduğu dictionary’ı kullanacaklarına dair zımni bir anlaşma imzalayarak kullanılmaya başlanır.

Örnek bir Context kullanımı aşamacı :

```
import React, { useContext, useState } from \"react\";
const AppContext = React.createContext();
const AppProvider = ({ children }) => {
const [counter, setCounter] = useState(0);
const increment = () => setCounter(counter + 1);
return (

{children}

);
};
```

`createContext()`: Burada createContext() bir fonksiyon döndürür ve bu fonksiyon değerler ve bir Provider ve Consumer component döndürür. createContext() bir argüman alabilir, bu arugment verilirse provider değerine varsayılan değer atanır.

`AppProvider`: Böylelikle Provider component’ının altındaki bütün child component’lar tanımlama yapmadan bu contexte erişebilirler. Ancak öncesinde, örnekteki AppProvider kullanarak bir ana component belirlemiş bunun altında da bir provider component belirlemiş olduk.
Bir note component’ında kullanım olarak örneklendirirsek:

```
import { useContext } from \"react\";
import { AppContext } from \"./AppContext\";
const Note = () => {
const { counter, increment } = useContext(AppContext);
return (

);
};
export default Note;
```

`useContext()` hook'u, Context API ile belirli bir context değerine erişmeyi sağlar. Context'in içinde barındırdığı veriye erişip, bu veriyi kullanmak için useContext() kullanılır.

Sık Sorulan Sorular

1. React Context'i Props yerine kullanmanın avantajları nelerdir?

Context API, prop drilling problemini çözer, çünkü state'i paylaşmak istediğimiz tüm component'lara erişim sağlar. Bu sayede, state verisini tüm component'lara props olarak geçirmek yerine, tek bir yerden state verisine erişim sağlayarak, uygulamanın yapısal düzeninde karmaşa oluşmadan state'i paylaşabilmemizi sağlar.

2. Bir Context'te birden fazla state bilgisi tutabilir miyiz?

Evet, her provider yalnızca bir state verisi sağlasa da, uygulamada istediğiniz kadar provider kullanabilirsiniz. Bu sayede, birden fazla Context kullanarak, uygulamanızda birden fazla state verisini yönetebilirsiniz.

3. Context'i Redux ile karşılaştırabilir miyiz?

Redux ve Context, React uygulamalarında global state yönetimi için kullanılır. Redux, bir kütüphane olarak düşünülebilir ve Context'ten daha gelişmiş özelliklere sahiptir. Redux, uygulamalarda daha araştırma gerektiren bir seçenektir ancak Context daha kolay bir kullanıma sahiptir ve daha az kod yazımı gerektirir.

Sonuç olarak, React Context, React uygulamalarında global durum yönetimini sağlamak için kullanabileceğimiz bir API'dir. Context, verilerin birden fazla component tarafından erişilmesi gerektiği durumlarda, verinin tek bir yerden yönetilmesini sağlar. Ayrıca, React Context düzgün kullanıldığında, uygulamanın kodlaması daha temiz ve düzenli olur. Bu sayede, kodlama süreci daha kolay ve uygulama daha performanslı olur."