useContext Hooku ile global state yönetimi

Adı : useContext Hooku ile global state yönetimi

Başlık: useContext Hook'u ile Global State Yönetimi

Giriş:
React, modern web uygulamaları geliştirirken en yaygın kullanılan JavaScript kütüphanelerinden biridir. React, bileşen tabanlı bir yapıya sahip olup, bileşenlerin state'ini yönetmekte kullanılan mekanizmalar sunar. Bu mekanizmalardan biri de useContext hook'u olarak adlandırılır. useContext hook'u, state'i paylaşmak ve iletmek için kullanılan bir React hook'udur. Bu makalede, useContext hook'u ile global state yönetimi hakkında detaylı bir inceleme yapacak, kullanım örnekleri sunacak ve sık sorulan sorulara cevaplar vereceğim.

1. useContext Hook'u Nedir?
React'ta state yönetimi, ağaç yapısı boyunca state'i iletmek veya Redux gibi bir ek kütüphane kullanmak için tek bir state yönetimi mekanizması gerektirir. Bu ihtiyacı karşılamak için React 16.8 sürümüyle birlikte useContext hook'u kullanıma sunulmuştur. useContext hook'u, paylaşılan bir state'i bileşenler arasında kolayca iletmek için kullanılır.

2. useContext Hook'u Nasıl Kullanılır?
useContext hook'u kullanırken ilk olarak bir context oluşturulması gerekmektedir. Bunun için createContext() fonksiyonu kullanılır. createContext() fonksiyonunun bir parametresi olan defaultValue, eğer bir bileşen doğrudan bir context'i talep ederse kullanılabilecek varsayılan değeri belirlemek için kullanılır.

Örnek olarak, aşağıdaki gibi bir context oluşturulabilir:

```
const MyContext = createContext();
```

Daha sonra sağlanan context'i kullanabilmek için useState() hook'u ile bir state oluşturulur. Bu state, global state'i tutacak ve useContext hook'u ile paylaşılacaktır.

```
const [myState, setMyState] = useState(initialState);
```

Son olarak, oluşturulan context'i Provider bileşeni ile sarmalanarak, alt bileşenlerin bu context'i kullanabilmesi sağlanır.

```

...

```

Oluşturulan context'i kullanmak için useContext hook'u kullanılır.

```
const myState = useContext(MyContext);
```

Bu şekilde useContext hook'u kullanılarak global state yönetimi sağlanmış olur.

3. Örnekler:

a) Tema Değiştirme Örneği:
Bu örnekte, bir uygulamanın tema ayarlarını değiştirebilmek için useContext hook'u kullanılabilir. Kullanıcının seçtiği tema, bir global state olarak tutulur ve ilgili bileşenlerde bu tema değeri kullanılır.

```
// TemaContext.js
import React, { createContext, useState } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');

return (

{children}

);
};

export { ThemeContext, ThemeProvider };

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import Header from './Header';
import Content from './Content';
import Footer from './Footer';

const App = () => {
return (