React Native Mülakat Soruları ve Cevapları

React Native, Meta'nın (eski adıyla Facebook) geliştirdiği; JavaScript veya TypeScript ve React kullanarak tek bir kod tabanından iOS ve Android uygulaması üretmeyi sağlayan bir framework'tür. Bir React Native mülakatında React'in temel kavramlarının yanı sıra, native köprü mimarisi ve mobil performans optimizasyonu hakkında sorularla karşılaşırsınız. Aşağıda bu soruları seviyeye göre gruplayıp örnek cevaplarla anlatıyoruz.

Hangi Seviyede Hangi Konular Sorulur?

Temel Seviye Sorular

Component, Props ve State

Bir React Native ekranı, birbirine geçmiş component'lerden oluşur. Props, bir component'e dışarıdan, üst component tarafından geçirilen ve component içinden değiştirilemeyen verilerdir. State ise component'in kendi içinde tuttuğu ve değiştikçe ekranı yeniden çizdiren (re-render) veridir.

function SayacButonu() {
  const [sayi, setSayi] = useState(0);

  return (
    <TouchableOpacity onPress={() => setSayi(sayi + 1)}>
      <Text>Tikla: {sayi}</Text>
    </TouchableOpacity>
  );
}

Stil ve Layout: Flexbox

React Native'de stil, CSS'in bir alt kümesine benzeyen StyleSheet nesneleriyle tanımlanır ve layout için varsayılan olarak Flexbox kullanılır — web'den farklı olarak varsayılan flexDirection değeri row değil column'dur. Bu fark, mülakatlarda "bir React Native ekranını web'den ayıran nedir" sorusunun klasik bir parçasıdır.

Orta Seviye Sorular

Navigasyon: React Navigation

Ekranlar arası geçiş genellikle React Navigation kütüphanesiyle yönetilir; stack, tab ve drawer olmak üzere farklı navigasyon desenleri sunar. Mülakatlarda bir ekrandan diğerine parametre nasıl geçirileceği (navigation.navigate("Detay", { id })) ve geri tuşu davranışının nasıl özelleştirileceği sorulabilir.

State Yönetimi: Context API ve Global Store

Küçük ölçekli, birkaç component arasında paylaşılan state için React'in yerleşik Context API'si yeterlidir. Daha büyük uygulamalarda, sık güncellenen ve birçok ekranı etkileyen state için Redux, Zustand gibi ayrı bir state yönetim kütüphanesi tercih edilir; mülakatlarda hangisini ne zaman seçeceğinizi gerekçelendirmeniz beklenir.

API Entegrasyonu ve Asenkron Veri Çekme

Bir API'den veri çekerken useEffect içinde asenkron bir fonksiyon çağrılır ve component unmount olduğunda isteğin iptal edilmesi (race condition'ı önlemek için) iyi bir pratiktir.

useEffect(() => {
  let iptalEdildi = false;

  async function veriGetir() {
    const yanit = await fetch("https://api.example.com/urunler");
    const veri = await yanit.json();
    if (!iptalEdildi) setUrunler(veri);
  }

  veriGetir();
  return () => { iptalEdildi = true; };
}, []);

AsyncStorage ve Yerel Veri Saklama

Basit anahtar-değer verilerini (kullanıcı tercihi, oturum durumu gibi) cihazda kalıcı olarak saklamak için AsyncStorage kullanılır; asenkron çalışır ve içeriği şifrelemez. Bu yüzden token veya şifre gibi hassas veriler için react-native-keychain gibi güvenli depolama kütüphaneleri tercih edilir. Mülakatlarda "hangi veriyi nerede saklarsınız" sorusu, bu ayrımı bilip bilmediğinizi ölçer: küçük ve hassas olmayan veri AsyncStorage'da, kimlik doğrulama bilgisi gibi hassas veri güvenli depoda tutulmalıdır. Aynı prensip web tarafındaki localStorage/sessionStorage ayrımına da benzer, ama mobilde şifreleme desteğinin varsayılan olmaması mülakatlarda özellikle vurgulanır.

Animasyonlar: Animated API ve Reanimated

React Native'in yerleşik Animated API'si JS thread üzerinde çalışır; karmaşık, sürekli etkileşimli animasyonlarda (gesture'a bağlı kaydırma gibi) JS thread meşgul olduğunda animasyon takılabilir. react-native-reanimated kütüphanesi ise animasyon mantığının çoğunu UI thread'inde çalıştırarak bu sorunu ortadan kaldırır. Mülakatlarda "bir animasyon neden takılıyor" sorusuna JS thread/UI thread ayrımıyla cevap vermek, mimariyi anladığınızı gösterir.

Deep Linking ve Push Bildirimleri

Deep linking, bir bağlantıya (örneğin bir e-posta veya SMS içindeki link) tıklandığında uygulamanın doğrudan ilgili ekrana açılmasını sağlar; React Navigation, URL şemasını ekran isimleriyle eşleştiren bir linking yapılandırması sunar. Push bildirimleri ise genelde Firebase Cloud Messaging (Android) ve Apple Push Notification service (iOS) üzerinden, platform bağımsız bir katman sağlayan Expo Notifications veya Notifee gibi kütüphanelerle yönetilir. Mülakatlarda bu iki konunun birbirinden farklı sorunlar çözdüğünü ayırt edebilmek — biri gezinme, diğeri bildirim teslimatı — önemlidir.

İleri Seviye Sorular

Native Modüller ve Yeni Mimari (JSI)

React Native, JavaScript kodunun native platform kodlarıyla haberleşmesi için önceden asenkron ve seri hale getirilmiş (serialized) bir köprü (bridge) kullanıyordu. Yeni mimaride bu köprünün yerini, JavaScript ve native tarafın birbirini doğrudan, senkron olarak çağırabildiği JSI (JavaScript Interface) alıyor; bu da özellikle animasyon ve kamera gibi düşük gecikme gerektiren senaryolarda performansı artırıyor. Hazır bir native modülün yetersiz kaldığı durumlarda Swift/Kotlin (veya eski Objective-C/Java) ile özel bir native modül yazılabilir.

Liste Performansı ve Gereksiz Render'ları Önleme

Uzun listelerde performans için FlatList'in keyExtractor, getItemLayout ve windowSize gibi propsları doğru ayarlanmalı; liste öğeleri ise React.memo ile sarmalanarak üst component her render olduğunda gereksiz yere yeniden çizilmesi engellenmelidir.

const UrunKarti = React.memo(function UrunKarti({ urun }) {
  return (
    <View style={styles.kart}>
      <Text>{urun.ad}</Text>
    </View>
  );
});

Hermes Motoru ve Başlangıç Performansı

Hermes, Meta'nın React Native için geliştirdiği, açık kaynak bir JavaScript motorudur. Kodu cihazda çalışma anında yorumlamak yerine derleme sırasında bytecode'a önceden derler; bu da uygulamanın açılış süresini kısaltır ve bellek kullanımını azaltır. Güncel React Native sürümlerinde varsayılan olarak etkindir. Mülakatlarda "uygulamanın açılışı neden yavaş" sorusuna verilecek ilk kontrol noktalarından biri, Hermes'in projede aktif olup olmadığını kontrol etmektir.

Test ve Hata Ayıklama

Birim testleri genellikle Jest ve component davranışını test etmek için React Native Testing Library ile yazılır. Hata ayıklama tarafında ise React Native DevTools ve Flipper gibi araçlar, ağ isteklerini, layout'u ve performansı gerçek zamanlı incelemeyi sağlar; bir mülakatta bu araçlardan en az birini nasıl kullandığınızı somut bir örnekle anlatmanız iyi bir izlenim bırakır. Test yazmayı hiç bilmeyen bir aday için bile, en azından bir hatayı nasıl yeniden üretip (reproduce) izole ettiğinizi anlatabilmek önemli bir sinyal verir.

Sık Yapılan React Native Hataları

Örneğin bir e-ticaret uygulamasında ürün listesi, sepete ekleme butonuna her basıldığında tüm liste yeniden render oluyorsa, sorun genelde sepet state'inin liste component'inin en üst seviyesinde tutulmasından kaynaklanır; state'i yalnızca ilgili satırın ihtiyaç duyduğu şekilde ayırmak (ya da context yerine daha lokal bir state yönetimi kullanmak) bu tür gereksiz render zincirini keser.

• Her state değişikliğinde tüm listeyi yeniden render etmek: React.memo ve useCallback kullanılmadığında, tek bir öğe değişse bile tüm FlatList yeniden çizilebilir.
• Inline fonksiyon ve stil tanımlamak: Her render'da yeniden oluşturulan inline fonksiyon veya obje, memoization'ı etkisiz hale getirir.
• Platform farklarını göz ardı etmek: iOS ve Android'de klavye davranışı, gölge (shadow) stilleri ve SafeAreaView farklı çalışır; tek platformda test edip diğerini atlamak canlıda sorun çıkarır.
• Gereksiz native modül eklemek: JS tarafında çözülebilecek bir işi native modülle çözmek, build karmaşıklığını ve bakım yükünü artırır.

Örnek Mülakat Senaryosu: Liste Neden Takılıyor?

Mülakatlarda sık sorulan pratik bir senaryo şudur: "500 öğelik bir listede scroll takılıyor, nasıl teşhis edersiniz?" Beklenen cevap adım adım şu noktaları kapsar:

1. FlatList mi ScrollView mi kullanılıyor kontrol edin — ScrollView tüm öğeleri baştan render eder.
2. Liste öğesi component'i React.memo ile sarılı mı, öğeye geçirilen prop'lar (özellikle fonksiyonlar) her render'da yeniden mi oluşturuluyor kontrol edin.
3. keyExtractor doğru ve stabil bir anahtar (index değil, id) döndürüyor mu bakın.
4. Ağır işlemler (görsel işleme, karmaşık hesaplama) render fonksiyonu içinde mi yapılıyor, yoksa önceden mi hesaplanmış kontrol edin.
5. Gerekirse React Native DevTools'un performans profiliyle hangi component'in render süresinin uzun olduğunu ölçün.

Bu tür bir soruda mülakatı yapan kişi genelde doğru cevaptan çok, sorunu sistematik olarak nasıl daralttığınızı ve teşhis ettiğinizi gözlemler. Aynı sistematik yaklaşım — önce ölçmek, sonra optimize etmek — bellek sızıntısı veya yavaş açılış süresi gibi diğer performans sorularında da geçerlidir.

Örnek Mülakat Senaryosu: Uygulama Neden Yavaş Açılıyor?

İleri seviye mülakatlarda sorulan bir diğer pratik senaryo şudur: "Kullanıcılar uygulamanın açılışının yavaş olduğunu söylüyor, nasıl teşhis edersiniz?" Beklenen cevap adım adım şu kontrolleri kapsar:

1. Hermes motorunun projede aktif olup olmadığını kontrol edin; kapalıysa açmak genelde ilk ve en kolay kazanımdır.
2. Başlangıçta senkron çalışan ağır importları (büyük kütüphaneler, kullanılmayan modüller) tespit edip gerektiğinde lazy loading'e taşıyın.
3. Bir bundle analiz aracıyla hangi paketin bundle boyutunu şişirdiğini ölçün.
4. Açılışta yapılan gereksiz API çağrılarını veya AsyncStorage'dan büyük veri okuma gibi senkron olmayan ama açılışı bekleten işlemleri belirleyin.
5. Görsellerin boyutunu ve formatını kontrol edin; yüksek çözünürlüklü, sıkıştırılmamış görseller açılış süresini gereksiz yere uzatır.

Bu senaryoda da mülakatı yapan kişi, doğru cevaptan çok sorunu nereden başlayıp nasıl daralttığınızı gözlemler. Ölçmeden optimize etmeye başlamak — örneğin hangi paketin bundle'ı şişirdiğini bilmeden rastgele kütüphane değiştirmek — sık yapılan bir hatadır ve mülakatta olumsuz bir izlenim bırakır.

Mülakata Hazırlık İçin Pratik İpuçları

• Uçtan uca küçük bir uygulama (API'den veri çeken, en az iki ekranlı) geliştirip App Store veya Play Store'a benzer bir build süreci deneyimleyin.
• Expo ile bare React Native workflow'u arasındaki farkı ve hangi durumda hangisinin tercih edileceğini net bir şekilde anlatabilin.
• FlatList performans ayarlarını ve React.memo/useCallback ile gereksiz render'ları nasıl önlediğinizi somut bir örnekle açıklamaya hazırlanın.
• iOS ve Android arasındaki platforma özgü davranış farklarına (örneğin klavye davranışı, güvenli alan/SafeAreaView) en az birkaç örnek verebilecek kadar aşina olun.
• Bir ekranın neden gereksiz yere yeniden render olduğunu React DevTools Profiler ile nasıl tespit edeceğinizi bir kez pratik edin; bu, ileri seviye mülakatlarda sık sorulan bir beceridir.
• Hermes'in projede aktif olup olmadığını ve bunun açılış süresine etkisini bir kez kendi projenizde gözlemleyin; performans sorularında somut bir referans noktası verir.

React Native mülakatına hazırlanırken JavaScript mülakat soruları ve TypeScript mülakat soruları yazılarımız da işinize yarayabilir. AppFellas'ın mobil uygulama geliştirme hizmetlerine göz atabilir, geçmiş işlerimizi inceleyebilir ya da bizimle iletişime geçebilirsiniz.

Sıkça Sorulan Sorular