React useContext Nedir? React useContext Kullanımı

React yazı dizimize önemli bir konu ile devam ediyoruz. Bu yazımızda React useContext Nedir, React useContext Kullanımı‘na bakacağız.

useContext React tarafından sağlanan ve farklı componentler arasında verilere erişmemizi ve bunları kullanmamızı sağlayan güçlü bir hook’tur. Bu yazımızda, React useContext’in ne olduğunu, onu neden kullandığımızı ve bize sunduğu faydaları anlamanız için size adım adım yol göstereceğim.

İster React’te yeni olun ister temel bilgilerine zaten aşina olun, bu useContext kılavuzu, konuyu kavramanıza ve useContext’i etkili bir şekilde kullanmaya başlamanıza yardımcı olacaktır.

React Hook Nedir?

React Hook, React 16.8 sürümü ile birlikte eklenen ve function componentlerde state ve lifecycle yönetimi sağlayan özelliktir. Componentlerde state ve lifecycle yönetimi için sınıf bileşenlerine ihtiyaç duymadan, function componentlerde bu işlevleri kullanmamıza imkan tanır.

React useContext Nedir? Neden Kullanılır?

useContext, React Hooklarından biridir ve React uygulamalarında global state yönetimini kolaylaştırmak için kullanılır. Componentler arasında veri iletişimini ve paylaşımını basitleştirir. useContext sayesinde state’i props drilling olmadan istediğimiz componentten diğerine aktarabiliriz.

Öncelikle, useContext’ı kullanmak için React 16.8 sürümü veya daha üst bir sürüme sahip olmalıyız. createContext() fonksiyonunu kullanarak bir context oluştururuz ve bu context içindeki veriyi paylaşmak istediğimiz componentlerde erişim sağlarız.

React uygulamalarında state yönetimi büyük önem taşır. Özellikle büyük uygulamalarda state yönetimini sağlamak için props drilling (prop’ları alt componentlere aktarma) kullanmak karmaşık hale gelebilir. Bu durumda useContext kullanarak state’i tüm componentlere kolayca ulaştırabiliriz. Bu sayede, state’i tekrar tekrar props olarak iletmek zorunda kalmayız ve uygulamanın performansını artırırız.

React useContext’ın Faydaları

Daha Temiz ve Daha Kısa Kod: useContext sayesinde state’i props drilling olmadan doğrudan componentlere iletebiliriz. Bu, kodun daha temiz ve daha kısa olmasını sağlar.
Performans Artışı: Props drilling yerine useContext kullanmak, uygulamanın performansını artırır. Çünkü her componentte state’i props olarak iletmek, gereksiz yeniden render işlemlerine neden olabilir. useContext sayesinde bu durumu önlemiş oluruz.
Daha İyi Yönetilebilirlik: Global state’i kullanmak, uygulamadaki componentler arasında veri paylaşımını kolaylaştırır ve state yönetimini daha iyi bir şekilde yapmamızı sağlar.

React useContext Kullanımı

Örnek olarak, bir tema değiştirme özelliği olan bir React uygulaması düşünelim. useContext kullanmadan önce, tema bilgisini her alt componente props olarak geçmemiz gerekecekti. Ancak useContext kullanarak tema bilgisine her componentten erişebilir ve değiştirebiliriz. Şimdi bunu örnek üzerinde detaylı olarak görelim.

Adım 1:

İlk olarak context yapısını oluşturacağım. Bunun için bir component oluşturmam lazım. Bu componentin içine context provider’ımı oluşturacağım.

Bu örnekte oluşturmak istediğim context, tema ile ilgili. Componentime ThemeContext.js adını veriyorum ve içerisine ThemeContext adında bir context oluşturuyorum. ThemeContextProvider adında fonksiyonumu yazıyorum. Daha sonra da bunu diğer componentlerde kullanabilmek için export ediyorum.

ThemeContext .js

import { createContext, useState } from "react";
export const ThemeContext = createContext();
const ThemeContextProvider = (props) => {
const [theme, setTheme] = useState('light-theme');
const [selectedTheme, setSelectedTheme] = useState('Beyaz');  
const toggleTheme = () => {
setTheme(theme === 'light-theme' ? 'dark-theme' : 'light-theme');
setSelectedTheme(selectedTheme === 'Beyaz' ? 'Siyah' : 'Beyaz')
};
return (
<ThemeContext.Provider value={{ theme, setTheme, selectedTheme, setSelectedTheme, toggleTheme  }}>
{props.children}
</ThemeContext.Provider>
);
};
export default ThemeContextProvider;

import { createContext, useState } from "react";

export const ThemeContext = createContext();

const ThemeContextProvider = (props) => {

const [theme, setTheme] = useState('light-theme');

const [selectedTheme, setSelectedTheme] = useState('Beyaz');

const toggleTheme = () => {

setTheme(theme === 'light-theme' ? 'dark-theme' : 'light-theme');

setSelectedTheme(selectedTheme === 'Beyaz' ? 'Siyah' : 'Beyaz')

};

return (

<ThemeContext.Provider value={{ theme, setTheme, selectedTheme, setSelectedTheme, toggleTheme }}>

{props.children}

</ThemeContext.Provider>

);

};

export default ThemeContextProvider;

Artık uygulamamda kullanacağım bütün state’leri, fonksiyonları burada oluşturacağım ve value olarak (props gibi) süslü parantezler içerisine yazacağım. Böylece istediğim componentte bunlara erişebilir ve kullanabilirim.

Adım 2:

Daha sonra ana kapsayıcım olan App.js componentimi render eden index.js componentine geliyorum ve ThemeContextProvider’ı buraya import ediyorum.

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
//Provider'ımı buraya import ettim
import ThemeContextProvider from "./componets/ThemeContext"
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<ThemeContextProvider>
<App />
</ThemeContextProvider>
</React.StrictMode>
);

import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App";

import reportWebVitals from "./reportWebVitals";

//Provider'ımı buraya import ettim

import ThemeContextProvider from "./componets/ThemeContext"

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

<React.StrictMode>

<App />

</ThemeContextProvider>

</React.StrictMode>

);

Sonra da App componentimi ThemeContextProvider ile sarmalıyorum. Artık context yapım hazır. ThemeContext.js içerisinde oluşturduğum tüm yapıları, state’leri, fonksiyonları value olarak gönderebilir ve useContext ile istediğim componentte bu verilere erişebilirim.

Adım 3:

Componentlerde useContext ile state’lere ve fonksiyonlara erişiyorum. Header.js içerisinde bana toggleTheme fonksiyonu lazım. Önce ThemeContext’i import ediyorum. Sonra da useContext ile toggleTheme fonksiyonunu alıyorum.

Header.js

import { useContext } from 'react';
import {ThemeContext} from './ThemeContext';
const Header = () => {
const { toggleTheme } = useContext(ThemeContext);
return (
<header>
<h1>Mehsatek Yazılım ve Teknoloji Sitesi</h1>
<button onClick={toggleTheme}>Tema Değiştir</button>
</header>
);
};
export default Header;

import { useContext } from 'react';

import {ThemeContext} from './ThemeContext';

const Header = () => {

const { toggleTheme } = useContext(ThemeContext);

return (

<h1>Mehsatek Yazılım ve Teknoloji Sitesi</h1>

<button onClick={toggleTheme}>Tema Değiştir</button>

</header>

);

};

export default Header;

Aynı şekilde diğer componentlerde de erişmek istediğim yapılara useContext ile erişiyorum ve istediğim şekilde kullanıyorum. Şimdi diğer componentleri de inceleyelim.

Content.js

import React, { useContext } from 'react';
import {ThemeContext} from './ThemeContext';
import "../style.css"
import SelectedTheme from './SelectedTheme';
const Content = () => {
const { theme } = useContext(ThemeContext);
return (
<div className={theme}>
<p>Bu alan useContext kullanilarak arka plan rengi alir </p>
<SelectedTheme />
</div>
);
};
export default Content;

import React, { useContext } from 'react';

import {ThemeContext} from './ThemeContext';

import "../style.css"

import SelectedTheme from './SelectedTheme';

const Content = () => {

const { theme } = useContext(ThemeContext);

return (

<p>Bu alan useContext kullanilarak arka plan rengi alir </p>

</div>

);

};

export default Content;

SelectedTheme.js

import { useContext } from 'react';
import {ThemeContext} from './ThemeContext';
const SelectedTheme = () => {
const { selectedTheme } = useContext(ThemeContext);
return (
<div>
<p>Kullanmayı seçtiğiniz tema: {selectedTheme}</p>
</div>
);
};
export default SelectedTheme;

import { useContext } from 'react';

import {ThemeContext} from './ThemeContext';

const SelectedTheme = () => {

const { selectedTheme } = useContext(ThemeContext);

return (

<div>

<p>Kullanmayı seçtiğiniz tema: {selectedTheme}</p>

</div>

);

};

export default SelectedTheme;

Burada dikkat ettiyseniz SelectedTheme.js App.js in bir alt çocuğu. Yani torunu. Eğer buraya props ile state’leri göndermek isteseydik, önce Content.js‘ye gönderecektik, sonra Content.js‘de yakalayıp, yeniden SelecetedTheme.js‘ye gönderecektik. Orda da yakalayıp kullanacaktık.

Bu derinliğin daha da arttığını düşündüğümüzde, props ile gönderirken en alt katmana ulaşana kadar bütün componentlerden geçmemiz gerekecekti. Ama useContext ile state’leri App.js de kullanıma açıyoruz, daha sonra nerede lazım ise yakalayıp kullanıyoruz.

App.js

import Header from './componets/Header';
import Content from './componets/Content';
const App = () => {
return (
<div>
<Header />
<Content />
</div>
);
};
export default App;

import Header from './componets/Header';

import Content from './componets/Content';

const App = () => {

return (

<div>

</div>

);

};

export default App;

Çıktı:

Umarım “React useContext Nedir? React useContext Kullanımı” başlıklı yazım sizin için faydalı olmuştur. useContext kullanımı ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.

Şu yazılar da ilginizi çekebilir.

React Formlar

Happy coding!

Kaynaklar

react.dev

w3schools.com

React useContext Nedir? React useContext Kullanımı

React Hook Nedir?

React useContext Nedir? Neden Kullanılır?

React useContext’ın Faydaları

React useContext Kullanımı

Kaynaklar

Yazar Hakkında

Yorum Yazın

React Hook Nedir?

React useContext Nedir? Neden Kullanılır?

React useContext’ın Faydaları

React useContext Kullanımı

Kaynaklar

Benzer Yazılar

Yazar Hakkında

Yorum Yazın