React Mülakat Soruları: 20 Soru ve Cevap

React mülakatları üç ana eksende ilerler: temel kavramlar (component, state, props), hooks ve performans. Aşağıda bu üç eksende en sık sorulan soruları, gerçek ve doğrulanmış cevaplarıyla bir araya getirdik — ezber için değil, kavramları gerçekten anlayıp anlamadığınızı test etmek için kullanın.

Temel kavram soruları

React nedir?

Kullanıcı arayüzü oluşturmak için kullanılan, Meta tarafından geliştirilen açık kaynaklı bir JavaScript kütüphanesidir. Bileşen tabanlı çalışır: arayüzü küçük, tekrar kullanılabilir parçalara bölmenizi ve her parçanın kendi durumunu yönetmesini sağlar.

Virtual DOM nedir ve neden önemlidir?

Gerçek DOM'un bellekte tutulan hafif bir kopyasıdır. State değiştiğinde React önce bu kopya üzerinde hesaplama yapar, eski ve yeni hâli karşılaştırır (diffing) ve gerçek DOM'a yalnızca gerekli olan en az sayıda güncellemeyi uygular. Mülakatçının burada beklediği, gerçek DOM'a doğrudan yazmanın neden pahalı bir işlem olduğunu ve React'in bu maliyeti nasıl azalttığını anlatabilmenizdir — yalnızca tanımı ezbere söylemek yeterli görülmez.

State ile props arasındaki fark nedir?

State, bir bileşenin kendi içinde tuttuğu ve zaman içinde değiştirebildiği veridir. Props ise üst bileşenden alınan ve doğrudan değiştirilemeyen (salt okunur) veridir. Veri akışı her zaman üstten alta doğru ilerler; bu, bir bileşenin davranışını sadece kendi state'ine ve aldığı props'lara bakarak öngörülebilir kılar.

JSX nedir?

JavaScript içinde HTML benzeri söz dizimi yazmayı sağlayan bir uzantıdır. Derleme sırasında React.createElement çağrılarına dönüşür; yani JSX bir zorunluluk değil, okunabilirlik için bir kolaylıktır — React, JSX olmadan da saf JavaScript ile yazılabilir.

Controlled ve uncontrolled bileşen farkı nedir?

Controlled bileşende form verisi (örneğin bir input'un değeri) React state'i tarafından yönetilir; her tuş vuruşu state'i günceller. Uncontrolled bileşende veri doğrudan DOM'da tutulur ve gerektiğinde bir ref ile okunur. Çoğu React uygulaması controlled yaklaşımı tercih eder çünkü veri tek bir kaynaktan (state) yönetilir.

Key prop'u ne işe yarar?

Liste elemanlarını benzersiz şekilde tanımlar; React'in hangi elemanın değiştiğini, eklendiğini veya silindiğini doğru tespit etmesini sağlar. Yanlış veya kararsız bir key kullanımı, listenin gereksiz yere baştan render edilmesine ya da yanlış elemanın güncellenmesine yol açabilir.

Hooks soruları

useState ve useReducer ne zaman tercih edilir?

Basit, birbirinden bağımsız state'ler için useState yeterlidir. Birbiriyle ilişkili, karmaşık state geçişleri (örneğin bir formun birden fazla alanının birbirini etkilediği durumlar) için useReducer daha okunaklı, öngörülebilir ve test edilebilir bir yapı sunar.

useEffect'in bağımlılık dizisi ne işe yarar?

Efektin hangi değerler değiştiğinde yeniden çalışacağını belirler. Bağımlılık dizisi boşsa efekt yalnızca ilk render'da çalışır; dizi hiç verilmezse her render'da çalışır. Yanlış veya eksik bir bağımlılık dizisi, en sık karşılaşılan React hatalarından biridir — mülakatçılar genelde bu konuyu örnek bir kod üzerinden test eder.

useMemo ile useCallback farkı nedir?

useMemo bir hesaplamanın sonucunu, useCallback ise bir fonksiyonun kendisini bir sonraki render'a kadar bellekte tutar (memoize eder). İkisi de gereksiz yeniden hesaplama veya yeniden render'ı önlemek için kullanılır, ama biri değer biri fonksiyon üzerinde çalışır.

Custom hook nedir, neden yazılır?

"use" ile başlayan, birden fazla bileşende tekrarlanan state veya efekt mantığını tek bir yerde toplayan sade fonksiyonlardır. Örneğin bir API çağrısını yükleme/hata/veri durumlarıyla birlikte yöneten mantığı her bileşende tekrar tekrar yazmak yerine, bunu bir kez custom hook olarak yazıp projenin her yerinde tekrar kullanabilirsiniz.

Hooks kuralları nelerdir?

Hook'lar yalnızca bileşenin en üst seviyesinde çağrılır — döngü, koşul veya iç içe fonksiyon içinde çağrılamaz. Bir hook'u bir if bloğunun içine koyarsanız, React bir sonraki render'da hangi state'in hangi hook'a ait olduğunu şaşırabilir çünkü hook'ların çağrılma sırası tutarlı olmalıdır. Bu yüzden koşullu mantık her zaman hook'un içine, hook'un kendisi koşulun dışına yazılır.

Performans soruları

• Gereksiz render'lar nasıl önlenir? React.memo, useMemo, useCallback ile bileşenin veya değerin gerçekten değişmediği durumlarda yeniden hesaplama/render engellenir.
• Code splitting nedir? Uygulamayı tek bir büyük paket yerine, ihtiyaç anında yüklenen küçük parçalara bölmektir; React.lazy ve dinamik import ile yapılır.
• Liste render'ında performans nasıl korunur? Doğru ve kararlı key değerleri kullanmak, gerektiğinde sanallaştırma (yalnızca görünen satırları render etmek) uygulamak.
• Performans nasıl ölçülür? React Developer Tools'un Profiler sekmesi ve tarayıcının yerleşik performans panelleri, hangi bileşenin ne sıklıkla ve ne kadar sürede render olduğunu ayrıntılı şekilde gösterir.

Mülakat süreci genelde nasıl işler?

Çoğu şirkette React mülakatı üç aşamadan oluşur. İlk aşama genelde bir ön görüşme — geçmiş projeleriniz, kullandığınız teknolojiler ve genel teknik bilginiz hakkında sohbet niteliğinde. İkinci aşama canlı kodlama: küçük bir bileşen yazmanız veya mevcut bir koddaki hatayı bulmanız istenir. Üçüncü aşama, kıdemli pozisyonlar için sistem tasarımı — büyük bir uygulamayı nasıl bileşenlere böleceğinizi, state'i nerede tutacağınızı, veri akışını nasıl kuracağınızı tartışırsınız. Junior pozisyonlarda genelde ilk iki aşama yeterli oluyor.

Sık yapılan hatalar

• State'i gereğinden fazla yerde tutmak: Aynı veriyi birden fazla bileşende ayrı state olarak saklamak, senkronizasyon sorunlarına yol açar. Veri, ona ihtiyaç duyan en üst ortak bileşende tutulmalı.
• useEffect'i her şey için kullanmak: Bir değeri başka bir değerden hesaplayabiliyorsanız buna efekt değil, doğrudan render sırasında hesaplama denir; gereksiz efekt kullanımı hem performansı düşürür hem kodu karmaşıklaştırır.
• Key olarak dizi indeksini kullanmak: Liste sıralaması değişebiliyorsa indeksi key olarak kullanmak, React'in yanlış elemanı güncellemesine yol açabilir; mümkünse benzersiz bir kimlik kullanılmalı.
• Her render'da yeni fonksiyon/obje oluşturmak: Bir fonksiyonu doğrudan JSX içinde tanımlamak, alt bileşenlerin gereksiz yere yeniden render olmasına neden olabilir; bu durumda useCallback işe yarar.

Deneyim ve proje soruları

Teknik sorulara ek olarak mülakatlarda deneyime dayalı sorular da sorulur. Bunlar doğru/yanlış cevabı olan sorular değil; nasıl düşündüğünüzü gösterme fırsatı. En sık gelenler: "Karşılaştığınız en zor state yönetimi problemi neydi ve nasıl çözdünüz?", "Bir bileşeni ne zaman küçük parçalara bölersiniz?", "Bir performans sorununu nasıl teşhis edip çözdünüz?" Bu sorularda beklenen, genel bir tanım değil; gerçek bir projeden somut bir örnektir — hangi aracı kullandığınızı, sorunu nasıl teşhis ettiğinizi ve çözümün sonucunu ölçülebilir şekilde anlatmanız beklenir.

React'i sıfırdan öğreniyorsanız

Mülakat sorularına geçmeden önce sağlam ve güncel bir JavaScript temeliniz olması gerekiyor — özellikle fonksiyonlar, closure'lar, diziler/nesneler üzerinde çalışma ve asenkron kod (promise, async/await). React'e nasıl başlanacağını anlattığımız yazımızda bu temelden başlayan bir yol haritası bulabilirsiniz. React'i Angular veya Vue ile karşılaştırmak isteyenler için de React ile Angular karşılaştırmamıza göz atabilirsiniz.