React’ın Yeni Context API’ını Tanıyın
Giriş: React Context API Neden Önemli?
React, bileşen tabanlı mimarisiyle modern web uygulamaları geliştirmek için popüler bir JavaScript kütüphanesidir. Bileşenler arası veri akışı, React’ın temelini oluşturur. Genellikle bu akış, ebeveyn bileşenden çocuk bileşene “prop”lar aracılığıyla gerçekleşir. Ancak, uygulama büyüdükçe ve bileşen ağacı derinleştikçe, bazı verilerin birçok ara bileşenden geçirilmesi gerekebilir, bu da “prop drilling” olarak bilinen bir soruna yol açar. Prop drilling, kodun okunabilirliğini, bakımını ve yeniden düzenlenmesini zorlaştırır.
React Context API, bu sorunu çözmek için tasarlanmış güçlü bir özelliktir. Bileşen ağacında, prop’ları her seviyeden manuel olarak geçirmeden veri paylaşımı yapmanın bir yolunu sunar. Bu makalede, React’ın “yeni” Context API’ını (React 16.3’ten itibaren kararlı hale gelen ve useContext hook’u ile çok daha güçlü hale gelen versiyonunu) derinlemesine inceleyeceğiz. Ne olduğunu, nasıl kullanılacağını, performans ipuçlarını ve ne zaman kullanılması gerektiğini detaylı bir şekilde ele alacağız.
Prop Drilling Problemi ve Context’in Gerekçesi
React’te veri akışı genellikle tek yönlüdür: ebeveynden çocuğa. Bir bileşenin bir alt bileşenine veri göndermesi gerektiğinde, bu veriyi prop olarak iletir. Ancak, veri doğrudan bir alt bileşene değil de, o alt bileşenin içindeki başka bir alt bileşene (yani daha derindeki bir bileşene) gitmesi gerekiyorsa, bu veri aradaki tüm bileşenlerden prop olarak geçirilmek zorunda kalır. Bu duruma “prop drilling” denir.
Örneğin, bir App bileşeniniz olduğunu ve bu bileşenin bir User bileşenine, User bileşeninin de bir Avatar bileşenine ihtiyacı olan theme verisini tuttuğunu varsayalım:
// App.jsx
function App() {
const theme = { primaryColor: 'blue', secondaryColor: 'lightgray' };
return Welcome, {userName}
Yukarıdaki örnekte, theme verisi sadece Avatar bileşeni tarafından kullanılmasına rağmen, App‘ten Toolbar‘a, Toolbar‘dan User‘a ve User‘dan Avatar‘a olmak üzere üç seviyeden prop olarak geçirilmiştir. Toolbar ve User bileşenleri theme prop’unu kendileri kullanmadıkları halde sadece bir aracı görevi görmüşlerdir. Bu durum, bileşenler arasında gereksiz bağımlılıklar yaratır, kodun okunabilirliğini azaltır ve bir prop’un adını veya yapısını değiştirmek istediğinizde birçok dosyada değişiklik yapmanız gerektiği anlamına gelir.
İşte tam da bu noktada React Context API devreye girer. Context, bu tür “global” veya “yarı-global” verileri, aradaki prop’lara ihtiyaç duymadan doğrudan ilgili bileşenlere ulaştırmanın zarif bir yolunu sunar.
React Context API Nedir?
React Context API, React bileşen ağacında veri paylaşımı için tasarlanmış yerleşik bir mekanizmadır. Bir Context oluşturduğunuzda, aslında bir Provider ve bir Consumer (veya modern yaklaşımla useContext hook’u) elde edersiniz.
* Context Objesi: React.createContext() ile oluşturulan objedir. İçinde Provider ve Consumer bileşenlerini barındırır.
* Context.Provider: Bu bileşen, Context’e değer sağlamak için kullanılır. value prop’u aracılığıyla sağlanan değer, bu Provider‘ın altındaki tüm bileşenler tarafından erişilebilir hale gelir.
* Context.Consumer: (Eski Yöntem) Bu bileşen, bir Context’ten değer almak için kullanılır. Bir “render prop” deseni aracılığıyla çalışır.
* useContext Hook’u: (Modern ve Tercih Edilen Yöntem) Fonksiyonel bileşenlerde bir Context’ten değer almak için kullanılan React Hook’udur. Context.Consumer‘a göre çok daha basit ve okunabilir bir sentaksa sahiptir.
Temel fikir şudur: Bir Provider bileşeni, ağacın üst seviyelerine yerleştirilir ve bir değeri value prop’u aracılığıyla sağlar. Bu Provider‘ın altındaki herhangi bir bileşen (derinliği ne olursa olsun), bu Context’i useContext hook’u (veya eski yöntemlerle Context.Consumer veya contextType) aracılığıyla tüketebilir.
React.createContext() Kullanımı
Bir Context oluşturmak için React.createContext() fonksiyonunu kullanırız. Bu fonksiyon, opsiyonel olarak bir varsayılan değer alabilir.
// src/contexts/ThemeContext.js
import React from 'react';
const ThemeContext = React.createContext({
primaryColor: 'gray', // Varsayılan değer
secondaryColor: 'white'
});
export default ThemeContext;React.createContext()‘e verdiğiniz varsayılan değer, aşağıdaki iki durumda kullanılır:
1. Bir bileşen, ilgili Provider‘ı olmadan bir Context’i tüketmeye çalıştığında.
2. Test amaçlı, Provider‘ı mock’lamak istemediğiniz durumlarda.
Genellikle, Provider her zaman olacağı için bu varsayılan değer nadiren kullanılır. Ancak, value prop’u undefined veya null olarak ayarlanırsa, yine de varsayılan değer tetiklenir.
Context.Provider Bileşeni
Context.Provider bileşeni, oluşturduğumuz Context’e bir değer sağlamak için kullanılır. Bu değeri, value adında özel bir prop aracılığıyla iletiriz.
// App.jsx
import React, { useState } from 'react';
import ThemeContext from './contexts/ThemeContext';
import Toolbar from './components/Toolbar';
function App() {
const [theme, setTheme] = useState({ primaryColor: 'blue', secondaryColor: 'lightgray' });
const toggleTheme = () => {
setTheme(prevTheme => ({
primaryColor: prevTheme.primaryColor === 'blue' ? 'red' : 'blue',
secondaryColor: prevTheme.secondaryColor === 'lightgray' ? 'darkgray' : 'lightgray'
}));
};
return (
{/ Context değerini sağlıyoruz /}
);
}
export default App;Bu örnekte, App bileşeni ThemeContext.Provider‘ı sarmalamıştır. value={theme} prop’u sayesinde, theme objesi bu Provider‘ın altındaki tüm bileşenler tarafından erişilebilir hale gelir. Artık Toolbar bileşeninin theme prop’unu almasına gerek kalmaz.
Bir uygulamada birden fazla Context kullanmak mümkündür. Bu durumda, Provider‘ları iç içe yerleştiririz:
// App.jsx (Birden fazla Context örneği)
import React from 'react';
import ThemeContext from './contexts/ThemeContext';
import UserContext from './contexts/UserContext';
import Layout from './components/Layout';
const currentUser = { name: 'Alice', isLoggedIn: true };
const currentTheme = { primaryColor: 'green', secondaryColor: 'lightgreen' };
function App() {
return (
);
}Bu şekilde, Layout ve onun altındaki bileşenler hem UserContext‘e hem de ThemeContext‘e erişebilirler.
Context Değerine Erişme Yolları
Context tarafından sağlanan değere erişmenin üç ana yolu vardır: Context.Consumer (class bileşenleri için eski yöntem), contextType (class bileşenleri için tek Context) ve useContext hook’u (fonksiyonel bileşenler için modern ve tercih edilen yöntem).
Class Bileşenlerinde Context.Consumer (Eski Yöntem)
Context.Consumer bileşeni, bir “render prop” deseni kullanarak Context değerine erişir. Bu, Consumer‘ın bir çocuk olarak bir fonksiyon alması ve bu fonksiyonun, Context değerini bir argüman olarak alıp render edilecek React elemanlarını döndürmesi anlamına gelir.
// Avatar.jsx (Class bileşeni ile Context.Consumer)
import React from 'react';
import ThemeContext from '../contexts/ThemeContext';
import UserContext from '../contexts/UserContext'; // Örnek için UserContext'i de kullanalım
class Avatar extends React.Component {
render() {
return (
{user => (
{theme => (
Merhaba, {user.name}! ({user.isLoggedIn ? 'Giriş Yapıldı' : 'Misafir'})
{user.name[0]}
)}
)}
);
}
}
export default Avatar;Context.Consumer yaklaşımı çalışsa da, birden fazla Context tüketmeniz gerektiğinde iç içe Consumer‘lar nedeniyle “wrapper hell” olarak bilinen bir soruna yol açabilir. Bu, kodun okunabilirliğini ve düzenini olumsuz etkiler.
Class Bileşenlerinde contextType (Sadece Tek Bir Context İçin)
React 16.3’ten itibaren class bileşenleri için static contextType özelliği eklendi. Bu özellik, bir class bileşeninin tek bir Context’e abone olmasını sağlar ve Context değerini this.context aracılığıyla erişilebilir kılar.
// Avatar.jsx (Class bileşeni ile contextType)
import React from 'react';
import ThemeContext from '../contexts/ThemeContext';
class Avatar extends React.Component {
static contextType = ThemeContext; // Sadece tek bir Context'e abone olabilir
render() {
const theme = this.context; // Context değerine this.context ile erişim
// Bu bileşen UserContext'e bu yöntemle erişemez, bunun için Consumer kullanması gerekir.
const userName = "John Doe"; // Bu bilgiyi prop olarak veya başka bir context'ten almalı
return (
{userName[0]}
);
}
}
export default Avatar;contextType daha temiz bir sentaks sunsa da, en büyük kısıtlaması bir bileşenin sadece tek bir Context’e abone olabilmesidir. Birden fazla Context’e ihtiyacınız varsa, yine Context.Consumer‘ları kullanmanız veya bileşeninizi fonksiyonel bir bileşene dönüştürüp useContext kullanmanız gerekir.
Fonksiyonel Bileşenlerde useContext Hook’u (Modern ve Tercih Edilen Yöntem)
React 16.8 ile tanıtılan useContext hook’u, Context API’ını fonksiyonel bileşenlerde kullanmayı inanılmaz derecede basit ve güçlü hale getirdi. useContext hook’u, bir Context objesini argüman olarak alır ve o Context’in güncel değerini döndürür.
// Avatar.jsx (Fonksiyonel bileşen ile useContext)
import React, { useContext } from 'react';
import ThemeContext from '../contexts/ThemeContext';
import UserContext from '../contexts/UserContext';
function Avatar() {
const theme = useContext(ThemeContext); // ThemeContext'ten değeri al
const user = useContext(UserContext); // UserContext'ten değeri al
return (
Merhaba, {user.name}! ({user.isLoggedIn ? 'Giriş Yapıldı' : 'Misafir'})
{user.name[0]}
);
}
export default Avatar;useContext hook’u, hem kodun okunabilirliğini artırır hem de birden fazla Context’i kolayca tüketmenizi sağlar. Modern React uygulamalarında Context kullanırken tercih edilen yöntem budur. useContext sayesinde “wrapper hell” problemi ortadan kalkar ve bileşenler daha temiz ve işlevsel kalır.
Context API ile Çalışırken Performans Optimizasyonu
Context API, prop drilling sorununu çözerken, dikkatli kullanılmadığında performans sorunlarına yol açabilir. Bunun temel nedeni şudur: Bir Context.Provider‘ın value prop’u değiştiğinde, o Provider‘ın altındaki ve o Context’i tüketen tüm bileşenler (hatta shouldComponentUpdate veya React.memo ile optimize edilmiş olsalar bile) yeniden render edilir.
Bu durum, value prop’unun her render’da yeni bir obje veya dizi referansı oluşturmasıyla sıkça yaşanır. JavaScript’te objeler ve diziler referans tipindedir; yani {} === {} false’tur. Her render’da yeni bir obje oluşturursanız, React bunu değişmiş bir değer olarak algılar ve Context’i tüketen tüm bileşenleri yeniden render eder.
// App.jsx (Performans sorunu yaratabilecek örnek)
import React, { useState } from 'react';
import ThemeContext from './contexts/ThemeContext';
import Toolbar from './components/Toolbar';
function App() {
const [themeName, setThemeName] = useState('light');
const toggleTheme = () => {
setThemeName(prev => (prev === 'light' ? 'dark' : 'light'));
};
// Her render'da yeni bir 'theme' objesi oluşturuluyor!
const theme = {
primaryColor: themeName === 'light' ? 'black' : 'white',
secondaryColor: themeName === 'light' ? 'white' : 'black'
};
return (
{/ theme objesi her render'da yeni bir referans /}
);
}Toolbar ve onun altındaki tüm Context tüketicileri, themeName değişmese bile (örneğin App içinde başka bir state güncellense bile) theme objesinin referansı her render’da değiştiği için yeniden render olacaktır.
Memoizasyon Teknikleri ile Optimizasyon
Bu performans sorununu çözmek için React’ın memoizasyon mekanizmalarını kullanabiliriz:
1. useMemo ile value prop’unu stabilize etmek: useMemo hook’u, pahalı hesaplamaların sonuçlarını önbelleğe almamızı sağlar. Context.Provider‘ın value prop’unu useMemo içine alarak, bağımlılıkları değişmediği sürece aynı obje referansının kullanılmasını sağlayabiliriz.
// App.jsx (useMemo ile optimize edilmiş)
import React, { useState, useMemo } from 'react';
import ThemeContext from './contexts/ThemeContext';
import Toolbar from './components/Toolbar';
function App() {
const [themeName, setThemeName] = useState('light');
const [count, setCount] = useState(0); // Ekstra bir state
const toggleTheme = () => {
setThemeName(prev => (prev === 'light' ? 'dark' : 'light'));
};
// theme objesi sadece themeName değiştiğinde yeniden oluşturulur
const theme = useMemo(() => ({
primaryColor: themeName === 'light' ? 'black' : 'white',
secondaryColor: themeName === 'light' ? 'white' : 'black'
}), [themeName]); // Bağımlılık dizisi: themeName değiştiğinde yeniden hesapla
return (
);
} Bu durumda, count state’i değiştiğinde App yeniden render olsa bile, themeName değişmediği sürece theme objesinin referansı aynı kalır. Bu da ThemeContext‘i tüketen bileşenlerin gereksiz yere yeniden render olmasını engeller (tabii eğer bu bileşenler de React.memo ile sarmalanmışsa).
2. React.memo ile tüketici bileşenleri optimize etmek: React.memo (fonksiyonel bileşenler için) veya PureComponent (class bileşenleri için), bir bileşenin prop’ları değişmediği sürece yeniden render olmasını engeller. Ancak, Context değeri değiştiğinde, useContext hook’u bileşenin yeniden render olmasını tetikler ve React.memo bunu durduramaz. React.memo daha çok bileşene prop olarak gelen değerler için etkilidir.
Context’i kullanan bir bileşen, Context değeri değiştiğinde her zaman yeniden render olacaktır. Bu, Context’i kullanmanın doğasında vardır. Optimizasyon, Provider‘ın value prop’unu mümkün olduğunca stabil tutarak gereksiz Context güncellemelerini önlemekle ilgilidir.
3. Context’i daha küçük parçalara ayırmak: Eğer Context objenizde sık değişen ve nadiren değişen değerler bir aradaysa, bunları ayrı Context’lere bölmek mantıklı olabilir. Böylece, sadece değişen Context’i tüketen bileşenler yeniden render olur.
// Ayrı Context'ler
const AuthContext = React.createContext();
const ThemeContext = React.createContext();
function App() {
const [user, setUser] = useState({ name: 'Alice', isLoggedIn: true });
const [theme, setTheme] = useState('light');
const authContextValue = useMemo(() => ({ user, setUser }), [user]);
const themeContextValue = useMemo(() => ({ theme, setTheme }), [theme]);
return (
{/ ... /}
);
}Bu yaklaşım, örneğin sadece tema değiştiğinde kullanıcı bilgilerini tüketen bileşenlerin yeniden render olmasını engeller.
Context’i Ne Zaman Kullanmalıyız?
Context API, her türlü veriyi paylaşmak için kullanılabilse de, belirli senaryolarda özellikle parlar:
* Tema Ayarları: Uygulamanın genel tema ayarlarını (açık/koyu mod, renk paletleri vb.) bileşen ağacında paylaşmak.
* Kullanıcı Kimlik Doğrulama Durumu: Giriş yapmış kullanıcı bilgileri, oturum durumu gibi verileri global olarak erişilebilir kılmak.
* Dil ve Yerelleştirme: Uygulamanın geçerli dilini ve çeviri fonksiyonlarını sağlamak.
* Uygulama Ayarları: Kullanıcının tercih ettiği ayarlar (örneğin, bildirim tercihleri, görüntüleme seçenekleri) gibi global konfigürasyonlar.
* Prop Drilling’i Önlemek: Bir verinin çok sayıda ara bileşenden geçirilmesi gerektiği ve bu ara bileşenlerin veriyi kendilerinin kullanmadığı durumlar.
Context API, “küresel” verilere kolay erişim sağlamanın ve prop drilling’i azaltmanın harika bir yoludur.
Context’i Ne Zaman Kullanmamalıyız? (Alternatifler)
Context API güçlü olsa da, her zaman en iyi çözüm değildir ve yanlış kullanıldığında sorunlara yol açabilir.
* Sık Güncellenen, Karmaşık Global State Yönetimi: Eğer uygulamanızın state’i çok karmaşık, sık güncellenen ve birçok farklı bileşen arasında birbirine bağlıysa, Context API tek başına yeterli olmayabilir. Bu tür durumlarda Redux, Zustand, Recoil, Jotai gibi özel state yönetim kütüphaneleri daha uygun çözümler sunar. Bu kütüphaneler genellikle daha gelişmiş optimizasyon, hata ayıklama araçları ve middleware gibi özelliklere sahiptir. Context API, bu kütüphanelerin sağladığı “seçici abonelik” (selective subscription) mekanizmalarına sahip değildir; yani Context’teki küçük bir değişiklik bile tüm tüketicileri yeniden render edebilir.
* Bileşenler Arası Yerel İletişim: Eğer veri sadece iki veya üç seviye derinlikteki bileşenler arasında paylaşılıyorsa ve bu veri yerel bir state ise, prop drilling’in maliyeti Context API’ını kurmanın karmaşıklığından daha az olabilir. Basit durumlarda prop geçirmek veya callback fonksiyonları kullanmak daha anlaşılır ve daha az “overhead” oluşturabilir.
* Çok Sık Değişen Değerler: Context’in value prop’u çok sık değişiyorsa ve bu değişiklikler yüzünden birçok bileşen gereksiz yere yeniden render ediliyorsa, performans sorunları yaşayabilirsiniz. Bu durumda, ya Context’i daha küçük parçalara ayırmanız ya da daha optimize state yönetim kütüphanelerine yönelmeniz gerekebilir.
* API Çağrıları ve Cache Yönetimi: API’dan gelen verilerin yönetimi, önbellekleme (caching) ve asenkron state’ler için React Query (TanStack Query), SWR gibi veri çekme kütüphaneleri genellikle Context API’dan daha iyi bir çözümdür. Bu kütüphaneler, verinin yüklenmesi, hata durumu, tekrar deneme, önbellekleme ve güncel tutulması gibi konularda özel çözümler sunar.
Context API ile Daha Gelişmiş Kullanım Senaryoları: useReducer ile State Yönetimi
useContext hook’u, useReducer hook’u ile birleştirildiğinde, Redux benzeri basit bir global state yönetim sistemi oluşturmak için oldukça güçlü bir araç haline gelir. Bu desen, orta büyüklükteki uygulamalar için harici bir state yönetim kütüphanesine ihtiyaç duymadan yeterli olabilir.
Örneğin, bir yapılacaklar listesi uygulaması için bir Context ve useReducer kombinasyonu:
// src/contexts/TodoContext.js
import React, { createContext, useReducer, useContext } from 'react';
// 1. Context'i oluştur
const TodoContext = createContext();
// 2. Reducer fonksiyonunu tanımla
const todoReducer = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return [...state, { id: Date.now(), text: action.payload, completed: false }];
case 'TOGGLE_TODO':
return state.map(todo =>
todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
);
case 'REMOVE_TODO':
return state.filter(todo => todo.id !== action.payload);
default:
return state;
}
};
// 3. Provider bileşenini oluştur
export const TodoProvider = ({ children }) => {
const [todos, dispatch] = useReducer(todoReducer, []); // Başlangıç state'i boş dizi
// value prop'unu useMemo ile stabilize et
const contextValue = useMemo(() => ({ todos, dispatch }), [todos]);
return (
{children}
);
};
// 4. Custom hook oluştur (isteğe bağlı ama önerilir)
export const useTodos = () => {
const context = useContext(TodoContext);
if (context === undefined) {
throw new Error('useTodos must be used within a TodoProvider');
}
return context;
};Şimdi bu TodoContext‘i nasıl kullanacağımıza bakalım:
// App.jsx
import React from 'react';
import { TodoProvider } from './contexts/TodoContext';
import TodoList from './components/TodoList';
import AddTodoForm from './components/AddTodoForm';
function App() {
return (
);
}
export default App;// src/components/AddTodoForm.jsx
import React, { useState } from 'react';
import { useTodos } from '../contexts/TodoContext';
function AddTodoForm() {
const [todoText, setTodoText] = useState('');
const { dispatch } = useTodos(); // dispatch fonksiyonunu Context'ten al
const handleSubmit = (e) => {
e.preventDefault();
if (todoText.trim()) {
dispatch({ type: 'ADD_TODO', payload: todoText }); // dispatch ile eylem gönder
setTodoText('');
}
};
return (
);
}
export default AddTodoForm;// src/components/TodoList.jsx
import React from 'react';
import { useTodos } from '../contexts/TodoContext';
function TodoList() {
const { todos, dispatch } = useTodos(); // todos ve dispatch'i Context'ten al
return (
{todos.map(todo => (
-
dispatch({ type: 'TOGGLE_TODO', payload: todo.id })}
style={{ marginRight: '10px' }}
/>
{todo.text}
))}
);
}
export default TodoList;Bu örnekte, TodoProvider‘ı uygulamanın en üst seviyesine yerleştirerek todos state’ini ve dispatch fonksiyonunu tüm alt bileşenlere sağladık. useTodos custom hook’u sayesinde, herhangi bir fonksiyonel bileşen bu bilgilere kolayca erişebilir ve dispatch fonksiyonunu kullanarak state’i güvenli bir şekilde güncelleyebilir. useMemo kullanımı, todos dizisi değişmediği sürece contextValue referansının aynı kalmasını sağlayarak gereksiz yeniden render’ları önler.
Özet ve En İyi Uygulamalar
React’ın yeni Context API’ı, prop drilling sorununu çözmek ve bileşen ağacında veri paylaşımını kolaylaştırmak için güçlü ve esnek bir araçtır. useContext hook’u sayesinde, fonksiyonel bileşenlerde Context kullanımı oldukça basitleşmiş ve modern React geliştirmenin vazgeçilmez bir parçası haline gelmiştir.
Anahtar Çıkarımlar:
* Prop Drilling’i Azaltır: Global veya yarı-global verileri ara bileşenlere prop olarak geçirme ihtiyacını ortadan kaldırır.
* Basit Kullanım: React.createContext(), Context.Provider ve useContext() temel yapı taşlarıdır.
* Modern Yaklaşım: useContext hook’u, Context değerini tüketmenin en temiz ve tercih edilen yoludur.
* Performans Optimizasyonu: Context.Provider‘ın value prop’unun referansının stabil kalması için useMemo kullanmak önemlidir. Aksi takdirde, Context’i tüketen tüm bileşenler gereksiz yere yeniden render olabilir.
* useReducer ile Güçlü Kombinasyon: useContext ve useReducer birlikte kullanılarak Redux benzeri basit bir state yönetim sistemi oluşturulabilir.
* Ne Zaman Kullanmalı: Tema, kimlik doğrulama, dil gibi global ayarlar için idealdir.
* Ne Zaman Alternatif Düşünmeli: Çok karmaşık, sık güncellenen veya asenkron veri yönetimi gerektiren durumlar için Redux, Zustand, React Query gibi kütüphaneler daha uygun olabilir.
Context API’ı, React’ın temel yeteneklerini genişleterek daha temiz, daha sürdürülebilir ve daha performanslı uygulamalar geliştirmenize olanak tanır. Doğru kullanıldığında, React ekosistemindeki en değerli araçlardan biridir. Uygulamanızın ihtiyaçlarına göre ne zaman Context kullanacağınıza ve ne zaman alternatif çözümlere yöneleceğinize karar vermek, deneyimle gelişen önemli bir beceridir.