React.Js useContext() Kullanımı

React.Js useContext() Kullanımı

useContext()

useContext React'ta bir hook'tur ve React'in Context API'sini fonksiyon bileşenlerinde kullanmayı kolaylaştırır. Bu hook, belirli bir context'ten mevcut değeri okumanıza olanak tanır. useContext'i kullanarak, bileşen ağacında yukarıdan aşağıya veri geçişi yapmak için props kullanmanıza gerek kalmaz. Bu, özellikle uygulama genelinde erişilmesi gereken veriler (örneğin, tema, dil, kullanıcı bilgileri) için yararlıdır.

Kullanımı

useContext'in temel kullanımı oldukça basittir. Öncelikle bir context oluşturulur:

const MyContext = React.createContext(defaultValue);

Bu context'i daha sonra useContext hook'u ile kullanabiliriz:

const value = useContext(MyContext);

Örnek

Aşağıda bir tema context'i oluşturulmuş ve useContext ile kullanılmıştır:

import React, { useContext, createContext } from 'react';
// Tema için bir context oluşturuluyor
const ThemeContext = createContext('light');
function App() {
return (
// Provider ile context değeri belirleniyor
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
// useContext ile mevcut tema değeri okunuyor
const theme = useContext(ThemeContext);
return (
<div>
The current theme is: {theme}
</div>
);
}

Dikkat Edilmesi Gerekenler

• useContext hook'u yalnızca bileşenlerin en üst seviyesinde kullanılmalıdır. Döngüler, koşullar veya iç içe fonksiyonlar içinde kullanılmamalıdır.
• useContext'in döndürdüğü değer, en yakın Context.Provider'ın value prop'una eşittir. Eğer hiçbir Provider yoksa, createContext'te belirtilen defaultValue kullanılır.
• useContext'i kullanırken, context değeri değiştiğinde bileşenin yeniden render olacağını unutmamak önemlidir. Bu nedenle, performansı etkileyecek şekilde çok fazla yeniden render olmamasına dikkat etmek gerekir.
• useContext hook'u, global veya bileşen ağacı genelinde erişilmesi gereken verileri yönetmek için oldukça kullanışlıdır. Ancak, karmaşık durum yönetimi için genellikle useReducer veya dış kütüphaneler (örneğin, Redux) ile birlikte kullanılır.