React'ta Context

Bir sonraki hook'u öğrenmeye geçmeden önce, React'ta context kavramını ele almamız gerekiyor.

Normalde verileri, üst bileşenlerden alt bileşenlere props'lar aracılığıyla iletirdik. Bu yöntem, az sayıda bileşeniniz varsa ve props'ları üst bileşenden istediğiniz bileşene, alt bileşenler üzerinden 2-3 kereden fazla iletmemeniz gerekiyorsa iyidir.

Bu yöntem ayrıca, ara bileşenlerde bu props'lar hiç kullanılmıyorsa (böyle bir probleme prop drilling denir) veya aynı verileri çok sayıda bileşene iletmeniz gerekiyorsa, son derece sakıncalı hale gelebilir ve çeşitli sorunlara yol açabilir.

Bu gibi durumlarda, üst bileşenin verilerini, alt bileşenin bileşen ağacındaki konumundan bağımsız olarak, props'lar aracılığıyla iletmeden, herhangi bir alt bileşen için erişilebilir kılan context bize yardımcı olabilir. Buna göre, verileri yalnızca ihtiyaç duyan bileşenler alacaktır.

Context'ten yararlanmak için onu oluşturmanız gerekir. Öncelikle, MyContext.js dosyasını oluşturalım ve içine createContext fonksiyonunu içe aktaralım:

import { createContext } from 'react';

Şimdi context nesnesini oluşturalım, onu MyContext değişkenine atayalım ve dışa aktarmayı unutmayalım. Bizim durumumuzda, createContext içine başlangıç değeri olarak null ayarladık, çünkü bizim için önemli değil (sadece boş parantez de bırakılabilirdi). Varsayılan olarak belirlenen değer, başka bir değer bulunamazsa, context okunurken ortaya çıkacaktır. Bu değer herhangi bir türde olabilir:

export const MyContext = createContext(null);

Bir sonraki derste, ayrı dosyalarda bulunan birkaç bileşenden oluşan bir uygulama oluşturacağız. Tüm bileşenler bir dosyada olsaydı, context oluşturmak için ayrı bir dosya yapmaz ve onu dışa aktarmazdık.

Şimdi MyContext.js dosyasını, boş App bileşenine - verileri iletmeyi planladığımız bileşene - içe aktaralım:

import { MyContext } from './MyContext.js';

MyContext.js dosyasını oluşturun ve onu, derste anlatıldığı gibi, boş App bileşenine içe aktarın.