Bunlar en sık karşılaşılan React mülakat soruları; seviyeye göre gruplanmış ve bir mülakatçının beklediği gibi cevaplanmış: kısa, React 19 için doğru ve kuralın arkasındaki nedenle birlikte. Davranışı görmenin onun hakkında okumaktan daha iyi olduğu yerlerde cevabın canlı bir editörü var ve birkaç soru, çalıştırmadan önce konsol çıktısını tahmin etmeni istiyor.
Tıklamadan önce: önizlemenin altındaki konsol ne yazdırır ve düğme ne gösterir? Cevap aşağıdaki başlangıç bölümünde.
Başlangıç soruları
React nedir?
React, kullanıcı arayüzlerini bileşenlerden kurmaya yarayan bir JavaScript kütüphanesidir. Mevcut veri için arayüzün bir tarifini döndüren fonksiyonlar yazarsın; o veri değiştiğinde React neyin değiştiğini bulur ve DOM'u senin için günceller. Yalnızca görünüm katmanını ele alır: yönlendirme, veri çekme ve formlar başka kütüphanelerden ya da Next.js gibi bir framework'ten gelir.
JSX nedir?
JSX, JavaScript içinde işaretleme yazmanı sağlayan bir sözdizimi uzantısıdır. Bir derleyici (Babel, esbuild, SWC) her etiketi bir React öğesi oluşturan bir çağrıya çevirir, bu yüzden <p className="note">{text}</p>, type: 'p' ve props içeren bir nesneye dönüşür. JavaScript olduğu için class yerine className kullanırsın, ifadeleri {} içine koyarsın ve her etiket kapanmalıdır. JSX sayfası kuralları ayrıntılı anlatıyor.
Bir bileşen ile bir öğe arasındaki fark nedir?
Bir bileşen, props alan ve arayüz döndüren bir fonksiyondur (ya da class). Bir öğe ise JSX'in ürettiği, neyin render edileceğini tarif eden düz nesnedir: <Avatar size={40} />, type'ı Avatar fonksiyonu olan bir öğedir. React öğeleri DOM etiketlerine kadar daha fazla öğeye çevirmek için bileşenini çağırır. Öğeler ucuz ve değişmezdir (immutable); bir bileşeni asla kendin çağırmazsın.
Props ile state arasındaki fark nedir?
Props ebeveyn tarafından aktarılır ve bileşenin içinde salt okunurdur. State bileşene aittir, zamanla bir setter aracılığıyla değişir ve her değişiklik yeni bir render planlar. Bunu söylemenin yaygın bir yolu: props bir bileşeni yapılandırır, state onun hafızasıdır. Aynı değer bir ebeveynde state, çocuğunda ise bir prop olabilir.
Bu sayfadaki ilk örnek ne kaydeder?
logged: 0 kaydeder ve düğme 2 değil Count: 1 gösterir. State bir anlık görüntüdür: count tüm render boyunca bir sabittir, bu yüzden iki setCount(count + 1) çağrısı da 0 + 1 hesaplar ve kayıt eski değeri okur, çünkü yeni değer yalnızca sonraki render'da vardır. İki eklemek için updater biçimini kullan: iki kez setCount((c) => c + 1).
Listeler neden key'e ihtiyaç duyar ve index neden kötü bir key'dir?
React, her liste öğesini önceki render'daki öğeyle eşleştirmek için key'i kullanır. Dizi index'ini kullanıp en üste bir öğe eklersen her index kayar, böylece React her satırın state'ini eski konumunda tutar ve onu yanlış veriye bağlar.
Ada'yı işaretle, sonra "Add to top"a tıkla: işaret yeni ilk satıra atlar. key={index}'i key={person.id} yap ve yeniden dene; işaret Ada'yla kalır. Geliştirmede React key'ler eksik olduğunda da uyarır; önizleme bir production derlemesi gibi çalışır, bu yüzden bu uyarıyı burada görmezsin.
Kontrollü input nedir?
Değeri React state'inden gelen bir input'tur: value aktarır ve state'i onChange içinde güncellersin, böylece tek doğruluk kaynağı React olur ve her tuş vuruşunu doğrulayabilir ya da dönüştürebilirsin. Kontrolsüz bir input kendi değerini DOM'da tutar ve onu ihtiyacın olduğunda bir ref ya da formun FormData'sı aracılığıyla okursun. Arayüz kullanıcının yazdığına tepki verdiğinde kontrollü input'lar varsayılan seçimdir.
State'i yukarı taşımak ne demektir?
İki bileşen aynı veriye ihtiyaç duyduğunda state'i en yakın ortak ebeveynlerine taşır ve onu değiştirecek bir fonksiyonla birlikte props olarak aşağı aktarırsın. Çocuklar kendi kopyalarına sahip olmayı bırakır, bu yüzden asla çelişemezler. Context'e ya da bir store'a başvurmadan önce "kardeş bileşenler state'i nasıl paylaşır" sorusunun standart cevabıdır.
Hook kuralları nelerdir?
Hook'ları yalnızca bir bileşenin ya da özel bir hook'un en üst düzeyinde çağır, asla koşulların, döngülerin ya da iç içe fonksiyonların içinde değil; ve yalnızca React fonksiyonlarından çağır, düz JavaScript fonksiyonlarından değil. React her hook'u çağrıların sırasıyla tanır, bu yüzden bu sıra her render'da aynı olmalıdır. eslint-plugin-react-hooks paketi iki kuralı da uygular.
Fragment nedir?
Bir fragment, bir DOM düğümü eklemeden birkaç öğeyi gruplar: <>...</> ya da bir liste içinde bir key'e ihtiyacın olduğunda <Fragment key={id}>. Bir bileşen tek bir kök döndürmelidir ve fragment'lar bu kökün birkaç kardeş olmasını sağlar; bu, fazladan bir div'in işaretlemeyi bozacağı tablolar ve flex yerleşimler içinde önemlidir.
Orta seviye sorular
useEffect bağımlılık dizisi nasıl çalışır?
React efekti render commit edildikten sonra (genellikle tarayıcı boyadıktan sonra), sonra dizideki bir değerin değiştiği (Object.is ile karşılaştırılır) sonraki her render'dan sonra yeniden çalıştırır. Dizi olmadan her render'dan sonra çalışır; [] ile ilk render'dan sonra bir kez çalışır. Efektin okuduğu, bileşenden gelen her değer diziye aittir ve biri eksik olduğunda linter sana söyler.
Efekt temizlemesi ne zaman çalışır?
Bir efektten döndürdüğün fonksiyon, efekt yeni bağımlılıklarla yeniden çalışmadan önce ve bileşen unmount olduğunda bir kez çalışır. Efektin kurduğunu geri aldığın yer orasıdır: bir zamanlayıcıyı temizle, bir dinleyiciyi kaldır, bir bağlantıyı kapat.
"Switch room"a tıkla ve konsolu izle: önce eski odanın temizlemesi çalışır, sonra efekt yeni odaya bağlanır. "Hide chat" yalnızca temizlemeyi çalıştırır. Geliştirmede StrictMode, temizlemenin çalıştığını kontrol etmek için mount sırasında fazladan bir bağlan, kes, bağlan ekler; önizleme bir production derlemesi gibi çalışır, bu yüzden yalnızca gerçek sırayı görürsün.
State'im setInterval içinde neden eski görünüyor?
Interval callback'i, onu oluşturan render'daki count üzerinde bir closure'dır. Boş bir bağımlılık dizisiyle efekt bir daha hiç çalışmaz, bu yüzden callback sonsuza kadar o ilk count'u okumaya devam eder.
broken 1'e ulaşır ve durur, çünkü her tik 0 + 1 hesaplar. fixed saymaya devam eder, çünkü updater fonksiyonu en son değeri alır. broken'ı bağımlılık dizisine eklemek de çalışır, bunun bedeli interval'ı her saniye temizleyip yeniden oluşturmaktır.
Batching nedir?
React birkaç state güncellemesini tek bir render'da gruplar. React 18'den beri bu her yerde geçerlidir: olay işleyicileri, timeout'lar, promise'ler ve yerel olay dinleyicileri. Bir güncellemeden hemen sonra DOM'un güncellenmesi gerekiyorsa react-dom'dan flushSync bunun dışına çıkar, ama ona nadiren ihtiyacın olur.
Tıklama üç render değil, tek bir render 1 1 1 kaydeder. Bir timeout içindeki üç state güncellemesi React 18'den önce üç render demekti.
Bu ne kaydeder? (efekt sırası)
Koda bak ve konsolun yazdıracağı dört satırı sırayla, ona bakmadan önce yaz.
Render yukarıdan aşağı gider: önce render App, sonra render Child. Efektler, tüm ağaç commit edildikten sonra aşağıdan yukarı çalışır: önce effect Child, sonra effect App. Bir ebeveynin efekti, çocuklarının efektlerinin zaten çalışmış olmasına güvenebilir.
useMemo ile useCallback arasındaki fark nedir?
useMemo(() => compute(a, b), [a, b]) bir hesaplamanın sonucunu önbelleğe alır. useCallback(fn, [deps]) fonksiyonun kendisini önbelleğe alır, yani useMemo(() => fn, [deps]) ile aynıdır. İkisi de yalnızca aşağıdaki bir şey referansa göre karşılaştırdığında işe yarar: bir memo çocuğu ya da başka bir hook'un bağımlılık dizisi. React Compiler 1.0'dan beri (Ekim 2025) bir derleme adımı bu memoization'ı otomatik olarak ekleyebilir, ama manuel memoization hâlâ çalışır ve onu hâlâ çoğu kod tabanında göreceksin.
React.memo ne yapar ve neden çoğu zaman useCallback'e ihtiyaç duyar?
memo(Component), props'u geçen seferkiyle aynı olduğunda, tek tek Object.is ile karşılaştırarak, bileşenin yeniden render'ını atlar. Ebeveynde satır içi yazılan bir fonksiyon her render'da yeni bir fonksiyondur, bu yüzden değişmiş bir prop sayılır ve memo'yu boşa çıkarır. useCallback aynı fonksiyonu render'lar arasında tutar.
Konsolu temizle ve "Re-render parent"a tıkla: yalnızca render inline handler görünür. Diğer çocuk aynı fonksiyonu aldı ve atlandı. Button'ın etrafındaki memo(...)'yu kaldır; ikisi de her tıklamada kayıt yazar, bu da useCallback'in tek başına hiçbir şey yapmadığını gösterir.
Context nedir ve maliyeti nedir?
Context, bir provider'ın altındaki her bileşene bir değeri props'tan geçirmeden aktarır: createContext, sonra React 19'da <ThemeContext value={theme}> (ya da <ThemeContext.Provider>) ve onu okumak için useContext(ThemeContext). Maliyeti, context'i okuyan her bileşenin değer değiştiğinde yeniden render olması ve memo'nun bunu durdurmamasıdır. İlgisiz değerleri ayrı context'lere bölerek, bir nesne değerini useMemo ile sararak ve hızlı değişen state'i uygulama genelindeki context'in dışında tutarak onu ucuz tut. Bkz. useContext.
Ref'ler nedir ve state yerine ne zaman bir ref kullanırsın?
useRef(initial), current özelliği render'lar boyunca kalıcı olan bir nesne döndürür ve onu değiştirmek bir render tetiklemez. Ekranın bağlı olmadığı değerler (bir zamanlayıcı id'si, önceki değer, bir bayrak) ve DOM erişimi için (<input ref={inputRef}>, sonra inputRef.current.focus()) bir ref kullan. Değer ekranda gösteriliyorsa state'e aittir.
Sanal DOM nedir ve reconciliation nedir?
Her render'da React yeni bir öğe ağacı oluşturur ve onu öncekiyle karşılaştırır; bu karşılaştırma reconciliation'dır. Bir öğenin tipi değiştiyse (bir div bir section oldu ya da ProfileA, ProfileB oldu) React o alt ağacı ve state'ini yok eder ve yenisini oluşturur. Tip aynıysa DOM düğümünü korur ve değişen props'u günceller; listelerdeki çocukları eşleştirmek için de key'leri kullanır. "Sanal DOM", bellekteki bu ağacın popüler adıdır; hız ağacın kendisinin hızlı olmasından değil, yalnızca değişene dokunmaktan gelir.
Özel hook nedir?
Adı use ile başlayan ve başka hook'ları çağıran bir fonksiyondur; böylece state'li mantığı bileşenler arasında yeniden kullanabilirsin: useOnlineStatus, useLocalStorage, useDebouncedValue. Onu çağıran her bileşen kendi bağımsız state'ini alır; özel bir hook veriyi değil mantığı paylaşır. Bkz. özel hook'lar.
StrictMode ne yapar?
<StrictMode> yalnızca geliştirmede ekstra kontroller açar. Saf olmayan render'ı ortaya çıkarmak için bileşenleri iki kez render eder, eksik temizlemeyi ortaya çıkarmak için mount sırasında efektleri bir kez kurulum, temizleme, kurulum olarak çalıştırır, ref callback'leri için de aynısını yapar ve kullanımdan kalkan API'ler hakkında uyarır. Bunların hiçbiri production derlemesinde olmaz, bu yüzden geliştirmede çift bir konsol kaydı beklenen bir şeydir, hata değil.
İleri seviye sorular
Bu ne kaydeder? (render, layout efekti, efekt)
Bir tahmin daha. Üç kayıt, bir render'ın üç farklı anı.
Sıra, useEffect önce yazılmış olsa bile render, sonra useLayoutEffect, sonra useEffect'tir. Layout efektleri React DOM'u güncelledikten sonra ama tarayıcı boyamadan önce çalışır; bu yüzden bir öğeyi ölçmeye uyarlar. Normal efektler daha sonra, genellikle boyamadan sonra çalışır ve varsayılan olmalıdır.
Error boundary nedir?
Çocuklarını render ederken fırlatılan hataları yakalayan ve tüm uygulamayı unmount etmek yerine bir yedek arayüz gösteren bir class bileşenidir. static getDerivedStateFromError (yedek arayüze geçmek için) ve genellikle componentDidCatch (kaydetmek için) gerektirir. Hâlâ bir hook karşılığı yoktur, bu yüzden fonksiyon bileşenli kod tabanlarında ekipler bir class yazar ya da react-error-boundary paketini kullanır.
"Break it"e tıkla: yedek arayüz yalnızca boundary'nin çocuklarının yerini alır, düğme kalır ve React yakalanan hatayı yine konsola bildirir. Boundary'ler olay işleyicilerindeki, setTimeout gibi async koddaki ya da boundary'nin kendisindeki hataları yakalamaz. Bunlar için try/catch kullanır ve state ayarlarsın.
Portal nedir?
react-dom'dan createPortal(children, domNode), çocukları farklı bir DOM düğümüne, genellikle document.body'ye render eder, onları React ağacında aynı yerde tutarken. Modallar, tooltip'ler ve bildirimler bir ebeveynin overflow: hidden'ından ya da katmanlama bağlamından kaçmak için onu kullanır. Context bir portal üzerinden yine çalışır ve olaylar React ağacı boyunca kabarcıklanır, bu yüzden portal içindeki bir tıklama, DOM düğümleri başka yerde olsa bile ebeveynin onClick'ine ulaşır. Bkz. portal'lar.
Suspense ve lazy nedir?
lazy(() => import('./Chart')) bir bileşenin kodunu ilk render olduğunda yükler; bu da paketini böler. <Suspense fallback={<Spinner />}>, içindeki herhangi bir şey hâlâ yüklenirken yedek içeriği gösterir: lazy kod ya da use(promise) ile veya Suspense'i destekleyen bir framework ile okunan veri. Sınırları yerleştirmek sayfanın hangi kısımlarının birlikte bekleyeceğine karar verir.
import { lazy, Suspense } from 'react';
const Chart = lazy(() => import('./Chart.jsx'));
export default function Dashboard() {
return (
<Suspense fallback={<p>Loading chart...</p>}>
<Chart />
</Suspense>
);
}
useTransition ne yapar?
Bir state güncellemesini acil değil olarak işaretler. const [isPending, startTransition] = useTransition() ve startTransition(() => setTab('posts')), React'in mevcut ekranı akıcı tutmasını ve bir tuş vuruşu gibi daha acil bir güncelleme gelirse yavaş render'ı kesmesini sağlar. isPending bir ipucu göstermeni söyler. React 19'da aktardığın fonksiyon async olabilir; React buna action der. Onu bir metin input'unun kendi değerini güncellemek için kullanma; o güncelleme acil olmalıdır.
React Server Components nedir?
Yalnızca sunucuda (ya da derleme zamanında) çalışan ve tarayıcıya kodlarını değil, render edilmiş sonuçlarını gönderen bileşenlerdir. async olabilir ve bir veritabanını ya da dosya sistemini doğrudan okuyabilirler, ama state, efekt ya da tarayıcı API'leri kullanamazlar. 'use client' ile işaretlenmiş bir dosya, etkileşimli bileşenlerin yaşadığı bir istemci sınırı başlatır ve 'use server', istemci kodunun çağırabileceği sunucu fonksiyonlarını işaretler. Onları App Router ile Next.js gibi bir framework aracılığıyla kullanırsın; düz Vite uygulamalarının onları çalıştıracak bir sunucusu yoktur.
React 19'da ne değişti?
- Actions: bekleme durumu senin için yönetilen, transition'lar içindeki async fonksiyonlar. Bir
<form action={fn}>,fn'i formunFormData'sı ile çağırır. - Yeni hook'lar: bir formun sonucu ve bekleme durumu için
useActionState, iyimser arayüz içinuseOptimisticvereact-domiçindeuseFormStatus. use: bir promise'i (resolve olana kadar askıya alarak) ya da bir context'i okur ve diğer hook'ların aksine bir koşulun içinde çağrılabilir.- Prop olarak
ref: fonksiyon bileşenleriref'i diğer her prop gibi alır, bu yüzden yeni kod içinforwardRefartık gerekmez. Ref callback'leri bir temizleme fonksiyonu döndürebilir. - Provider olarak
<Context>, ayrıca belgenin head bölümüne taşınan<title>ve<meta>etiketleri. - Kaldırılanlar:
ReactDOM.render, string ref'ler, eski context ve fonksiyon bileşenlerindedefaultProps(varsayılan parametreleri kullan).
// React 19: ref is a normal prop
function TextInput({ ref, ...props }) {
return <input ref={ref} {...props} />;
}
React 19 sayfasında her birinin çalıştırılabilir örnekleri var.
React bileşenleri nasıl test edilir?
React Testing Library ve Vitest ya da Jest gibi bir çalıştırıcıyla. Bileşeni render edersin, öğeleri bir kullanıcının bulacağı şekilde (role, etikete ya da metne göre) bulursun, user-event ile etkileşime girersin ve iç state'e değil görünen şeye göre doğrularsın. Bu, testlerin yeniden düzenlemeler boyunca geçerli kalmasını sağlar.
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';
test('counts clicks', async () => {
const user = userEvent.setup();
render(<Counter />);
await user.click(screen.getByRole('button', { name: /clicked 0 times/i }));
expect(screen.getByRole('button')).toHaveTextContent('Clicked 1 times');
});
toHaveTextContent, @testing-library/jest-dom'dan gelir. Sayfalar arası tüm akışlar için ekipler bunun üstüne Playwright ya da Cypress ekler.
Bir performans sorunu nasıl bulunur ve düzeltilir?
Önce ölç. React DevTools'ta Profiler sekmesini aç, yavaş etkileşimi kaydet ve alev grafiğini oku: hangi bileşenlerin render olduğunu, her birinin ne kadar sürdüğünü ve ("record why each component rendered" ayarıyla) nedenini gösterir. Denenecek sırayla tipik çözümler: state'i aşağı taşı ki daha az bileşen ona bağlı olsun, yavaş alt ağaçları children olarak aktar, pahalı kısmı memo, useMemo ve useCallback ile memoize et, uzun listeleri sanallaştır ve ağır güncellemeleri useTransition ya da useDeferredValue ile ertele. Bir production ya da profiling derlemesinde profil çıkar; geliştirme derlemeleri daha yavaştır ve render sürelerini abartır.
Bir bileşen neden saf olmalı?
Aynı props, state ve context verildiğinde bir bileşen aynı JSX'i döndürmeli ve render sırasında kendi dışındaki hiçbir şeyi değiştirmemelidir. React bir bileşeni birden fazla kez, sırasız render edebilir ya da bir render'ı atabilir (transition'lar, Suspense, StrictMode), bu yüzden gövdedeki bir değişkeni değiştirmek ya da bir istek göndermek gibi yan etkiler öngörülemeyen sayıda çalışır. Yan etkiler önce olay işleyicilerine, onlara hiçbir olay yol açmadığında ise efektlere aittir.
Ne zaman bir efekt kullanmamalısın?
Değer render sırasında hesaplanabildiğinde (filtrelenmiş listeler, tam adlar, toplamlar), iş bir kullanıcı eyleminden kaynaklandığında (onu olay işleyicisine koy) ve bir prop değişikliğinde state'i sıfırlamak istediğinde (bir key kullan). Efektler React dışındaki bir şeyle senkronize olmak içindir: bir ağ bağlantısı, bir tarayıcı API'si, üçüncü taraf bir widget. State ayarlayan efekt zincirleri, fazladan render'ların ve hataların yaygın bir kaynağıdır.
Sıkça Sorulan Sorular
React nedir?
React, kullanıcı arayüzlerini bileşenlerden kurmaya yarayan bir JavaScript kütüphanesidir. Ekranın mevcut veriye göre nasıl görünmesi gerektiğini tarif edersin; o veri değiştiğinde React gerçek DOM'u günceller.
State ile props arasındaki fark nedir?
Props, bir ebeveynin bir bileşene aktardığı girdilerdir ve bileşen onları salt okunur olarak ele alır. State ise bir bileşenin sahip olduğu ve zamanla bir setter ile değiştirdiği veridir; bu da React'in onu yeniden render etmesini sağlar.
React'te hook'lar nedir?
Hook'lar, adları use ile başlayan ve bir fonksiyon bileşeninin React özelliklerini kullanmasını sağlayan fonksiyonlardır: state için useState, yan etkiler için useEffect, context için useContext, render tetiklemeyen değerler için useRef ve daha fazlası.
Sanal DOM (virtual DOM) nedir?
React'in arayüzün bellekteki tarifinin adıdır. Her render'da React yeni bir tarif oluşturur, onu öncekiyle karşılaştırır ve gerçek DOM'a yalnızca farkları uygular. Bu karşılaştırmaya reconciliation denir.
React listelerinde key'ler neden önemli?
Bir key, render'lar arasında bir listedeki hangi öğenin hangisi olduğunu React'e söyler. Sabit key'lerle (bir id gibi) React, öğeler eklendiğinde, çıkarıldığında ya da yeniden sıralandığında her öğenin state'ini ve DOM düğümünü doğru veriye bağlı tutar. Dizi index'ini kullanmak sıra değiştiğinde bunu bozar.
JSX nedir?
JSX, JavaScript içinde HTML benzeri işaretleme yazmanı sağlayan bir sözdizimi uzantısıdır. Bir derleyici her etiketi bir React öğesi oluşturan bir fonksiyon çağrısına çevirir, bu yüzden <h1>Hi</h1> bir h1'i tarif eden düz bir nesneye dönüşür.
