React İle Global Durum Yönetimi İçin Context Api Kurulumu Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Context API ile çalışmaya başlamadan önce geliştirme ortamınızın güncel olduğundan emin olmalısınız. En az React 18.x veya 19.x sürümü kullanmanız, modern "hooks" yapısından tam verim almanızı sağlar.

• Node.js (LTS sürümü önerilir).
• React projesi (Vite veya Next.js tabanlı).
• Temel JavaScript (ES6+) ve React Hooks (useState, useContext) bilgisi.

Projeyi oluşturmak için terminalinizde npm create vite@latest komutunu kullanarak temiz bir React ortamı kurabilirsiniz. Kurulum sonrası gerekli bağımlılıkları yükleyerek geliştirme aşamasına geçebiliriz.

Context API Temel Yapılandırması

Context API üç ana parçadan oluşur: createContext ile oluşturulan nesne, Provider ile verinin sarmalanması ve useContext ile verinin tüketilmesi. İlk adım, bir "Context" dosyası oluşturmaktır.

// context/UserContext.jsx
import { createContext, useState } from 'react';

// Context nesnesini oluşturuyoruz
export const UserContext = createContext(null);

// Provider bileşenini oluşturuyoruz
export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'Misafir', isAuthenticated: false });

  return (
    
      {children}
    
  );
};

Bu kodda, uygulamanın genelinde paylaşılacak olan user durumunu ve bu durumu güncelleyecek setUser fonksiyonunu value prop'u ile sarmalayıcıya aktarıyoruz.

Provider Bileşeninin Uygulamaya Entegre Edilmesi

Oluşturduğumuz UserProvider bileşenini, veriye ihtiyaç duyan tüm bileşenlerin üst seviyesinde (genellikle main.jsx veya App.jsx) kullanmalıyız.

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { UserProvider } from './context/UserContext';

ReactDOM.createRoot(document.getElementById('root')).render(
  
    
  
);

Bu yapı sayesinde, UserProvider içinde tanımlanan tüm veriler, App bileşeni ve onun altındaki tüm dallar tarafından erişilebilir hale gelir.

Context Verisini Tüketme (useContext Kullanımı)

Veriyi kullanmak istediğimiz herhangi bir alt bileşende, useContext hook'unu kullanarak tanımladığımız context nesnesine erişim sağlarız.

// components/UserProfile.jsx
import { useContext } from 'react';
import { UserContext } from '../context/UserContext';

const UserProfile = () => {
  const { user, setUser } = useContext(UserContext);

  return (
    

      


Kullanıcı: {user.name}
       setUser({ name: 'Ahmet', isAuthenticated: true })}>
        Giriş Yap
      
    
  );
};

Bu örnekte, UserProfile bileşeni doğrudan global durumdaki user verisine erişir ve setUser fonksiyonu ile durumu günceller. Bu, prop drilling yapmadan veri yönetiminin en temiz yoludur.

Performans İpuçları ve Yaygın Hatalar

Context API kullanırken en büyük hata, tüm global durumu tek bir devasa Context nesnesinde tutmaktır. Bu durum, Context her değiştiğinde ona bağlı tüm bileşenlerin gereksiz yere yeniden render (re-render) olmasına neden olur.

Kritik Uyarı: Context API, yüksek frekanslı güncellemeler (örneğin her milisaniyede değişen bir sayaç veya mouse koordinatları) için tasarlanmamıştır. Bu tür durumlarda Zustand veya Redux gibi daha optimize durum yönetim kütüphanelerini tercih etmelisiniz.

Performansı artırmak için "Context'i bölme" (splitting) stratejisini kullanın. Örneğin; kullanıcı bilgileri için ayrı, tema ayarları için ayrı Context'ler oluşturun.

Context API vs. Diğer Yöntemler

Özel Hook ile Context Kullanımını Kolaylaştırma

Her bileşende useContext ve ilgili context'i import etmek yerine, özel bir hook yazarak süreci sadeleştirebiliriz. Bu yöntem, hem hata payını azaltır hem de kod okunabilirliğini artırır.

// context/UserContext.jsx (Geliştirilmiş)
export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser, UserProvider içinde kullanılmalıdır!');
  }
  return context;
};

Artık bileşenlerinizde sadece const { user } = useUser(); satırı ile verilere erişebilirsiniz.

Kod Güvenliği Sorumluluk Reddi: Bu rehberde paylaşılan kod örnekleri eğitim amaçlıdır. Uygulamalarınızda hassas verileri (şifre, token vb.) global durumda tutarken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olun ve verileri her zaman güvenli bir şekilde (örneğin HttpOnly cookie) saklayın.

Sıkça Sorulan Sorular

Context API tüm state yönetimi için yeterli mi?

Küçük ve orta ölçekli projeler için yeterlidir. Ancak çok karmaşık, sık güncellenen verileriniz varsa performans darboğazı yaşayabilirsiniz.

Context API ile veri nasıl korunur?

Context API bir veri saklama aracı değil, taşıma aracıdır. Hassas verileri Context içinde tutmak, tarayıcı konsolundan erişilebilir olmalarına neden olabilir; bu nedenle kimlik doğrulama verilerini güvenli depolama yöntemleriyle birleştirin.

Provider içine birden fazla değer nasıl gönderilir?

value={{ user, theme, settings }} şeklinde bir nesne olarak gönderebilirsiniz. Ancak her güncellemede tüm bu değerlerin yeniden render tetikleyeceğini unutmayın.

Context güncellendiğinde tüm bileşenler render olur mu?

Evet, o Context'i tüketen (useContext kullanan) tüm bileşenler güncellenir. Bu yüzden Context'leri mantıksal parçalara ayırmak performans için kritiktir.

React 19 ile Context değişti mi?

Temel çalışma mantığı aynı kalsa da, React 19 ile birlikte gelen yeni özellikler (örneğin use hook'u) Context tüketimini daha da basitleştirmektedir.

Context API ile Gerçek Dünya Senaryosu: Tema Yönetimi

Context API'nin en yaygın ve verimli kullanım alanlarından biri tema (koyu/açık mod) yönetimidir. Bu senaryoda, uygulamanın genelinde geçerli olan tema durumunu yönetmek için bir ThemeProvider oluşturacağız. Bu yapı, kullanıcı tercihlerini kalıcı hale getirmek için localStorage ile entegre çalışacaktır.

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

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');

  useEffect(() => {
    localStorage.setItem('theme', theme);
    document.documentElement.className = theme;
  }, [theme]);

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

  return (
    
      {children}
    
  );
};

export const useTheme = () => useContext(ThemeContext);

Context API'de Hata Ayıklama ve Geliştirici Araçları

Context yapısı büyüdükçe, hangi değerin hangi bileşene ulaştığını takip etmek zorlaşabilir. React DevTools, Context içeriklerini incelemek için en güçlü aracınızdır. Ancak, karmaşık yapılarda hata ayıklamayı kolaylaştırmak için şu stratejileri izleyebilirsiniz:

• Display Name Kullanımı: Context nesnenize bir displayName atayarak React DevTools'ta daha kolay ayırt edilmesini sağlayın: ThemeContext.displayName = 'ThemeContext';
• Provider İçi Hata Yakalama: Eğer bir bileşen, Provider dışında bir Context'i tüketmeye çalışırsa uygulamanız çöker. Bunu engellemek için özel hook'unuzda kontrol sağlayın.

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme hook\'u bir ThemeProvider içinde kullanılmalıdır!');
  }
  return context;
};

Context API Test Stratejileri

Context kullanan bileşenleri test ederken, bileşeni ilgili Provider ile sarmalamanız (wrap) gerekir. Aksi takdirde, bileşeniniz undefined bir değer almaya çalışacaktır. @testing-library/react kullanarak bir test senaryosu şu şekilde oluşturulur:

import { render, screen } from '@testing-library/react';
import { ThemeProvider } from './ThemeContext';
import MyComponent from './MyComponent';

test('tema değerini başarıyla okur', () => {
  render(
    
      
    
  );
  expect(screen.getByText(/mevcut tema:/i)).toBeInTheDocument();
});

İleri İpucu: Eğer uygulamanızda çok sayıda Context varsa, bunları tek bir AppProvider bileşeninde birleştirerek main.jsx dosyanızın okunabilirliğini artırabilirsiniz. Bu, "Provider Hell" olarak bilinen iç içe geçmiş yapıdan kurtulmanızı sağlar.

Sonuç

React ile global durum yönetimi için Context API kurulumu, modern bir React geliştiricisinin sahip olması gereken en temel yeteneklerden biridir. Bu rehberde, kurulumdan başlayarak özel hook'lar ile kullanımı optimize etmeye kadar olan süreci adım adım inceledik. Bir sonraki adım olarak, büyük ölçekli projelerinizde performans analizi yaparak Context'i ne zaman Zustand gibi kütüphanelerle değiştirmeniz gerektiğini araştırmanızı öneririm.