Örnek sorular
React Context StateZorluk 1
İki kardeş component, SearchBox ve ResultsList, aynı query string'ine ihtiyaç duyuyor — SearchBox yazıyor, ResultsList okuyor. Şu an ikisinin de kendi lokal useState'i var, bu yüzden senkron değiller. İdiomatik React çözümü nedir?
- a
query state'ini ortak parent'a taşı, değeri ve bir updater'ı her iki child'a prop olarak aşağı geçir✓ - b
ResultsList'e, SearchBox'ın DOM node'unu poll'layıp güncel input değerini okuyan bir useEffect ekle - c
query'yi ResultsList'in her render'da okuduğu global mutable bir değişkende tut - dHer iki kardeşi de kendi ayrı
Context.Provider'ına sar, böylece birbirlerine doğrudan state yayınlasınlar
Açıklama:Kardeş component'ler doğrudan birbirleriyle konuşarak state paylaşamaz — React'te veri props üzerinden aşağı akar, yana değil. Standart çözüm 'state'i yukarı taşımak': state'i en yakın ortak parent'a taşı, sonra değeri ve bir setter'ı her iki child'a prop olarak geçir. Bu tek bir doğruluk kaynağı garanti eder. Burada Context'e başvurmak, bir seviye arayla duran iki kardeş için abartı; Context, bir değerin çok sayıda seviyeyi ya da alakasız dalı geçmesi gerektiğinde işe yarar, basit bir 'iki child'lı tek parent' durumunda değil.
React Context StateZorluk 2
React'in veri akışında, bir child component parent'a bir şeyin olduğunu bildirmek zorunda (örn. bir butona tıklandı). "Props aşağı, event yukarı" modeline en doğru uyan ifade hangisi?
- aChild, bir prop objesini doğrudan mutasyona uğratır, parent obje değiştiği için re-render olur
- bParent aşağı bir callback prop geçirir; child bunu çağırır, parent buna karşılık kendi state'ini günceller✓
- cChild, parent'ın kendi listener'ının yakaladığı native bir DOM
CustomEvent'i dispatch eder - dChild, parent component'in modülünü import edip onun internal state setter'ını doğrudan çağırır
Açıklama:Veri props olarak aşağı akar; ters yöne giden her şey, child'ın parent'a geriye uzanmasıyla değil, parent'ın aşağı verdiği bir fonksiyon üzerinden gitmek zorunda. Parent bir callback tanımlar (örn. onSearch), aşağı geçirir, child event olduğunda bunu çağırır, ve gerçekte re-render'a yol açan şey parent'ın kendi useState güncellemesidir. Geçirilen bir prop objesini mutasyona uğratmak (a) React'in props kurallarını bozar, başka bir modülün internal'ine uzanmak da (d) component'lerin iletişim şekli değildir.
React Context StateZorluk 1
React'te createContext('light'), 'light''ı context'in default değeri olarak ayarlar. Bu context'i useContext ile okuyan bir component, bu default 'light' değerini tam olarak ne zaman alır?
- aContext için uygulamanın herhangi bir yerinde en az bir Provider mount edilmişse, o Provider'a hangi
value verildiğinden bağımsız olarak - bYalnızca bir Provider
value={null} geçerse; value={undefined} geçen bir Provider hâlâ 'light''a düşer - cYalnızca kapsayan hiçbir Provider yoksa;
value={undefined} geçen bir Provider yine de kazanır ve component 'light' değil undefined okur✓ - dYalnızca component'in ilk render'ında; üstünde gerçek bir değerle bir Provider mount edilse bile sonraki render'lar hâlâ
'light' döner
Açıklama:createContext'e verilen default argüman, yalnızca useContext'in kapsayan hiçbir Provider bulamadığı durumlarda kullanılan bir yedektir — açık bir value ile birleştirilmez ya da onun yerine geçmez. <ThemeContext.Provider value={undefined}> hâlâ bir Provider'dır: default'a karşı kazanır, bu yüzden useContext 'light' değil undefined okur. React 19'da üç kardeş component yan yana render edilerek doğrulandı — Provider'ı olmayan biri ('light' okur), value={undefined} ile Provider'a sarılı biri (undefined okur), value='dark' ile Provider'a sarılı biri ('dark' okur) — default'un yalnızca ilk durumda geçerli olduğu doğrulandı.
React Context StateZorluk 2
Bir ağaç App -> Page -> Section şeklinde (sadece bir seviye geçiş var), ve Section, App'in tuttuğu bir currentUser değerine ihtiyaç duyuyor. Bir takım arkadaşı bunun zaten tam bir Context kurulumunu gerektirdiğinde ısrarcı. Junior seviyesinde en makul bakış açısı hangisi?
- aKatılıyorum — tek bir component üzerinden geçen her prop bile prop drilling'dir ve Context kullanılmalı
- bKatılmıyorum — uygulama Redux da kullanmadıkça Context asla kullanılmamalı
- cKatılıyorum — bir değer ağaçta herhangi bir yerde birden fazla component tarafından okunuyorsa Context zorunludur
- dKatılmıyorum — tek bir ara component üzerinden geçmek ucuz; Context henüz değmeyen bir dolayım ekliyor✓
Açıklama:Tek bir ara component üzerinden tek bir sıçrama, ucuz ve takip etmesi kolay bir durumdur, Context'in çözmeyi amaçladığı derin ya da geniş zincir türünden değildir. Buraya Context sokmak, tek bir prop'un zaten temiz şekilde çözdüğü bir sorun için bir Provider, bir consumer hook'u ve fazladan bir dolayım katmanı ekler. Context, zincir birkaç seviye derinleştiğinde ya da değerin aynı anda birçok alakasız dala ulaşması gerektiğinde işe yaramaya başlar.
React Context StateZorluk 1
const ThemeContext = createContext('light')
function Toolbar() {
return <Button />
}
function Button() {
const theme = useContext(ThemeContext)
return <button className={theme}>Kaydet</button>
}
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
)
}
Render edilen
<button> hangi
className'e sahip olur?
- a"dark" —
Button, aradaki Toolbar'a bakmaksızın, en yakın Provider'dan değeri okur✓ - b
"light" — Toolbar onu prop olarak iletmediği için Button her zaman createContext'in default değerini alır - c
undefined — useContext yalnızca çağıran component Provider'ın direkt child'ıysa çalışır - d
"dark", ama yalnızca ikinci render'dan itibaren
Açıklama:Context hiç props üzerinden geçmez — ne kadar derinde olursa olsun herhangi bir descendant useContext çağırıp en yakın kapsayan Provider'dan değeri alabilir. Aradaki Toolbar'ın context'in varlığını bilmesine hiç gerek yoktur. Bu yüzden Button, Toolbar hiçbir şey iletmeden, doğrudan ilk render'da "dark" okur.
React Context StateZorluk 2
const ThemeContext = createContext('light')
function Label() {
const theme = useContext(ThemeContext)
return <span>{theme}</span>
}
function App() {
return (
<div>
<ThemeContext.Provider value="dark">
{/* Label BURAYA konmadı */}
</ThemeContext.Provider>
<Label />
</div>
)
}
<Label /> hangi metni render eder?
- a
"dark" — App ağacında bir yerde ThemeContext için bir Provider var - b"light" —
Label o Provider'ın descendant'ı değil, bu yüzden default değere düşer✓ - cRender sırasında hata fırlatılır çünkü
Label hiçbir Provider ile sarılmamış - dBoş string, çünkü context değerleri yalnızca effect içinde çözülür, render sırasında değil
Açıklama:Bir Provider yalnızca içinde render edilen component'leri etkiler. Burada Label, ThemeContext.Provider'ın child'ı değil, kardeşi; yani Label'ın bakış açısından hiçbir kapsayan Provider yok — useContext, createContext('light')'a geçirilen default değeri döner. Bu klasik sessiz-bug örüntüsüdür: Provider dosyada var ama kablolama tüketiciyi onun subtree'sinin dışına koyuyor, ve hiçbir şey hata vermiyor — sessizce default'a düşüyor.