React'te useContext nedir?

useContext React'te, fonksiyonel bileşenlerin bağlamdaki değişikliklere abone olmalarını sağlayan bir kancadır. Bu, verileri bileşen ağacı boyunca açıkça prop olarak iletmeye gerek kalmadan iletmenin bir yolunu sağlar.

Çalışma prensibi:

1. Bağlam oluşturma: React.createContext() kullanılarak bir bağlam nesnesi oluşturulur. Bu nesne, bir Provider ve bir Consumer içerir (veya fonksiyonel bileşenlerde useContext kullanılır).
2. Değeri sağlama: Bağlamın Provider bileşeni, değere erişmesi gereken bileşen ağacını sarar. value prop'u aracılığıyla bir değer iletilir ve bu, abone olan tüm bileşenler tarafından erişilebilir hale gelir.
3. Değeri alma: useContext(MyContext) fonksiyonel bir bileşenin içinde çağrılır, burada MyContext daha önce oluşturulmuş bağlamdır. Bu kanca, bağlamın şu anki değerini döndürür. Bağlam değeri değiştiğinde, useContext kullanan bileşen otomatik olarak yeniden render edilir.

Avantajlar:

• Veri iletimini kolaylaştırır: Çok sayıda ara bileşen üzerinden "prop drilling" yapma ihtiyacını ortadan kaldırır.
• Küresel durum: Uygulamanın küresel durumunu yönetmek için uygundur (örneğin, tema, kimlik doğrulama, yerelleştirme).
• Performans: React, useContext kullanan bileşenlerin yeniden render edilmesini optimize eder, yalnızca bağlamdaki değişikliklere abone olanları yeniden render eder.

Dezavantajlar:

• Hata ayıklama zorluğu: Bağlam değerinin nereden geldiğini takip etmek, props ile karşılaştırıldığında daha zor olabilir.
• Sık güncellemelerde performans: Bağlam değeri çok sık güncelleniyorsa, tüm abone bileşenlerin sık sık yeniden render edilmesine neden olabilir.

Örnek:

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

// 1. Bağlam oluşturma
const ThemeContext = createContext('light');

// Sağlayıcı bileşen
function ThemeProvider({ children }) {
  const theme = 'dark'; // Örnek değer
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Bağlamı kullanan bileşen
function ThemedComponent() {
  // 3. Bağlam değerini alma
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Tema: {theme}</div>;
}

// Uygulama
function App() {
  return (
    <ThemeProvider> {/* 2. Değeri sağlama */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;