React.js useContext Hook Kullanımı

useContext, bileşeninizden bağlamı okumanıza ve ona abone olmanıza olanak tanıyan bir React Hook’tur.

useContext kancası, React uygulamalarında durum yönetimi için kullanılan Context API ile birlikte kullanılır. useContext, bir Context nesnesini alır ve bu bağlamdaki mevcut değeri döndürür. Böylece, Context içindeki verilere erişmek ve bu verileri kullanmak için kullanılır.

Context API

React.js Context API, React uygulamalarında veri paylaşımını kolaylaştıran bir API’dir. Bir uygulama içinde birden fazla bileşen arasında veri iletimi yaparken, bu veriyi her bileşene props olarak geçirmek yerine, Context API kullanarak veri paylaşımını merkezi bir şekilde yönetmek mümkün olur.

Context API, bir bileşen ağacı içinde veriyi “tüketen” bileşenlerin (consumer) veriye erişimini sağlar. Bu sayede veri, bileşen hiyerarşisinin derinliklerine kadar iletilir ve her bileşenin aynı veriye kolayca erişimi sağlanır.

Context API, genellikle global durum yönetimi için kullanılır. Redux veya MobX gibi diğer durum yönetimi çözümleriyle karşılaştırıldığında daha basit kullanım sağlar, ancak daha küçük ölçekli uygulamalarda daha uygun olabilir.

Kullanımı, bir Context nesnesi oluşturarak başlar ve ardından bu Context nesnesini ağaçtaki tüketici bileşenlere sağlarız. Ardından, herhangi bir tüketici bileşen bu Context’i kullanarak bu paylaşılan veriye erişebilir. Bu, veri paylaşımını çok basitleştirir ve bileşenler arasındaki bağımlılığı azaltır.

Özetle, React Context API, veri paylaşımını yönetmek ve bileşenler arasında veri iletişimini kolaylaştırmak için kullanılan bir API’dir.

Öncelikle, bir Context oluşturalım:

import React, { createContext, useContext, useState } from 'react';

// Bir context oluştur
const ThemeContext = createContext();

// Tema bileşenleri için bir tema sağlayıcısı oluştur
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeProvider, ThemeContext };

Bu örnekte, ThemeProvider bileşeni, uygulama boyunca kullanılacak bir temayı yönetir ve ThemeContext içinde mevcut temayı ve temayı değiştiren bir fonksiyonu sağlar.

Şimdi, useContext kullanarak bu temayı başka bir bileşende kullanalım:

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ThemeTogglerButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme} style={{ background: theme === 'dark' ? '#333' : '#ddd', color: theme === 'dark' ? '#fff' : '#333' }}>
      Toggle Theme
    </button>
  );
};

export default ThemeTogglerButton;

Bu bileşen, ThemeContext içindeki tema durumunu ve temayı değiştiren fonksiyonu almak için useContext kullanır ve ardından bir düğme oluşturur. Tema durumuna göre düğmenin arka plan rengi ve metin rengi değişir.

Son olarak, bu bileşenleri birleştirmek için ThemeProvider‘ı kullanırız:

import React from 'react';
import ThemeTogglerButton from './ThemeTogglerButton';
import { ThemeProvider } from './ThemeContext';

const App = () => {
  return (
    <ThemeProvider>
      <div>
        <ThemeTogglerButton />
      </div>
    </ThemeProvider>
  );
};

export default App;

Bu örnekte, <ThemeProvider> bileşeni, <ThemeTogglerButton> bileşenine ThemeContext içindeki durumu sağlar. Bu şekilde, <ThemeTogglerButton> bileşeni bu durumu doğrudan alabilir ve kullanabilir.

Share on Facebook

Tweet