createContext, bileşenlerin sağlayabileceği veya okuyabileceği bir context oluşturmanızı sağlar.

const SomeContext = createContext(defaultValue)

Referans

createContext(defaultValue)

Bir context oluşturmak için bileşenlerin dışından createContext’i çağırın.

import { createContext } from 'react';

const ThemeContext = createContext('light');

Daha fazla örnek için aşağıya bakınız.

Parametreler

  • defaultValue: Context’i okuyan bileşenlerin üzerinde eşleşen bir context sağlayıcısı olmadığında contextin sahip olmasını istediğiniz değer. Anlamlı bir varsayılan değeriniz yoksa, null belirtin. Varsayılan değer, “son çare” olarak başvurulacak bir alternatif olarak düşünülür. Statiktir ve zamanla asla değişmez.

Geri Dönüş Değeri

createContext bir context nesnesi döndürür.

Context nesnesinin kendisi herhangi bir bilgi içermez. Diğer bileşenlerin hangi contexti okuyacağını veya sağlayacağını temsil eder. Genellikle, context değerini belirtmek için bileşenin üstünde SomeContext.Provider kullanır ve bileşenin altında okumak için useContext(SomeContext) çağırırsınız. Context nesnesinin birkaç özelliği vardır:

  • SomeContext.Provider bilenşenlerin context değerini sağlamanıza olanak tanır.
  • SomeContext.Consumer context değerini okumak için nadiren kullanılan alternatif bir yöntemdir.

SomeContext.Provider

Bileşenlerinizi bir context sağlayıcısı ile sarmalayarak içindeki tüm bileşenler için bu contextin değerini belirtin:

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

Props

  • value: Ne kadar derin olursa olsun, bu sağlayıcının içindeki contexti okuyan tüm bileşenlere aktarmak istediğiniz değer. Context değeri herhangi bir türde olabilir. Sağlayıcı içinde useContext(SomeContext) kullanan bir bileşen, üzerindeki en içte bulunan ilgili context sağlayıcısının value değerini alır.

SomeContext.Consumer

useContext var olmadan önce, contexti okumak için daha eski bir yol vardı:

function Button() {
  // 🟡 Eski yöntem (önerilmez)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

Bu eski yöntem hala çalışıyor olsa da, yeni yazılan kodun contextini useContext() ile okumak daha uygundur:

function Button() {
  // ✅ Önerilen yöntem
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

Props

  • children: Bir fonksiyon. React, üst bileşenlerden gelen contextin güncel değerini useContext() ile aynı algoritmayı kullanarak belirleyecek ve bu fonksiyondan döndürdüğünüz sonucu render edecektir. Üst bileşenlerden gelen context değiştiğinde, React bu fonksiyonu tekrar çalıştırır ve UI’yi günceller.

Kullanım

Context oluşturma

Context, bileşenlerin bilgiyi derinlemesine aktarmasına olanak tanır ve açıkça propları geçirmeden yapar.

Bir veya birden fazla context oluşturmak için bileşenlerin dışında createContext’i çağırın.

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext bir context nesnesi döndürür. Bileşenler okumak istediği contexti useContext()‘e ileterek kullanabilir:

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

Varsayılan olarak, aldıkları değerler contexti oluştururken belirttiğiniz varsayılan değerler olacaktır. Ancak, varsayılan değerlerin hiçbiri zamanla değişmediği için bu tek başına yararlı değildir.

Context, bileşenlerinizden diğer dinamik değerleri sağlayabileceğiniz için kullanışlıdır:

function App() {
  const [theme, setTheme] = useState('dark');
  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });

  // ...

  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

Şimdi Page bileşeni ve içindeki herhangi bir bileşen, ne kadar derin olursa olsun, iletilen context değerlerini “görecek” ve iletilen context değerleri değişirse, React contexti okuyan bileşenleri yeniden render edecektir.

Okuma ve sağlama contexti hakkında daha fazla bilgi edinin ve örnekleri görün.

Contexti bir dosyadan içe ve dışa aktarma

Çoğu zaman, farklı dosyalardaki bileşenlerin aynı contexte erişmesi gerekecektir. Bu nedenle, contextleri ayrı bir dosyada oluşturmak yaygındır. Ardından, diğer dosyalar için contexti kullanılabilir kılmak için export ifadesini kullanabilirsiniz:

// Contexts.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);

Diğer dosyalarda tanımlanan bileşenler, bu contexti okumak veya sağlamak için import ifadesini kullanabilir:

// Button.js
import { ThemeContext } from './Contexts.js';

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}
// App.js
import { ThemeContext, AuthContext } from './Contexts.js';

function App() {
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

Bu, bileşenleri içe ve dışa aktarma. işlemine benzer şekilde çalışır.

Sorun Giderme

Context değerini değiştirmenin bir yolunu bulamıyorum

Böyle bir kod, varsayılan context değerini belirtir:

const ThemeContext = createContext('light');

Bu değer asla değişmez. React, yalnızca eşleşen bir sağlayıcı bulamazsa bu değeri bir geri dönüş olarak kullanır.

Contextin zaman içinde değişmesini sağlamak için, state ekleyin ve bileşenleri context sağlayıcısıyla sarın.

Previouscache
NextforwardRef