React ve Modern JavaScript Mülakat Soruları: Teknik Mülakatlara Hazırlık

React mülakat soruları, ön yüz geliştirici adaylarının JavaScript temellerini, React bileşen mantığını ve gerçek bir arayüz problemini çözme becerisini ölçen soru setidir. 2012'den beri web projeleri yönetiyorum ve ekibe geliştirici alırken bu soruları masanın öbür tarafından soruyorum. Bu yazıda soruları konulara göre gruplayıp yanıtlarını ve kısa kod örneklerini paylaşıyorum.

Yazının amacı ezber listesi vermek değil. Her sorunun altında mülakatçının aslında neyi ölçtüğünü de anlatıyorum, çünkü iyi bir yanıt tanımı tekrar etmekten çok nedenini açıklar. Yazılımla ilgili diğer yazılara yazılım kategorisinden ulaşabilirsiniz.

React mülakat soruları nelerdir ve nasıl hazırlanmalısınız?

React mülakat soruları dört ana başlığı kapsar: modern JavaScript temelleri, React çekirdek kavramları, hook ve state yönetimi, performans ile mimari. Hazırlanırken her başlıktan birkaç soruyu kendi cümlelerinizle yanıtlamayı, kısa bir kod yazmayı ve bu kodun neden çalıştığını sesli anlatmayı alışkanlık hâline getirmelisiniz.

Talebin boyutunu anlamak için resmi bir veriye bakalım. Stack Overflow 2025 Geliştirici Anketi sonuçlarına göre JavaScript katılımcıların yaklaşık yüzde 66'sının kullandığı dil, React ise yaklaşık yüzde 44,7 ile en çok kullanılan web çatısı. Dolayısıyla ön yüz ilanlarının büyük kısmında React bilgisini doğrudan ölçen bir aşama yer alıyor.

Benim önerim şu: önce JavaScript, sonra React, en son mimari. Temeli sağlam olmayan aday hook sorularında zorlanıyor, çünkü closure ve referans eşitliğini bilmeden useEffect bağımlılıklarını anlamak neredeyse imkânsız.

Teknik mülakat süreci hangi aşamalardan oluşur?

Şirketten şirkete değişse de sahada gördüğüm akış genelde benzer. Aşağıdaki tablo her aşamada neyin ölçüldüğünü ve nasıl hazırlanabileceğinizi özetliyor. Süreler saha tecrübesine dayalı başlangıç aralığıdır, garanti değildir.

Kıdemli pozisyonlarda son aşama ağırlık kazanır. Örneğin bir sitenin birden fazla ekip tarafından geliştirilmesi konuşulursa micro frontend mimarisi gibi konulara hazır olmanız gerekir.

JavaScript temellerinde hangi sorular gelir?

Hemen her React mülakatı birkaç saf JavaScript sorusuyla başlar. Mülakatçı burada dilin kurallarını bilip bilmediğinizi ve hata ayıklarken nereye bakacağınızı ölçer.

var, let ve const arasındaki fark nedir?

var fonksiyon kapsamlıdır ve hoisting sırasında undefined değeriyle yukarı taşınır. let ve const ise blok kapsamlıdır; tanımlandıkları satıra kadar "temporal dead zone" içinde kalırlar. const yeniden atamayı engeller ama nesnenin içini dondurmaz. Bu son ayrıntıyı söylemek, adayı ezberden ayıran noktadır.

const kullanici = { ad: "Ayşe" };
kullanici.ad = "Zeynep"; // çalışır
kullanici = {}; // TypeError

== ile === farkı nedir?

== karşılaştırmadan önce tür dönüşümü yapar, === ise hem türü hem değeri kontrol eder. Bu nedenle ekiplerin çoğu kod standardında === kullanımını zorunlu tutar. İyi bir yanıt, null == undefined ifadesinin true döndüğünü de örnek olarak verir.

Primitive ve referans türleri nasıl ayırırsınız?

Sayı, metin, boolean, null, undefined, symbol ve bigint değerin kendisini kopyalar. Nesne, dizi ve fonksiyon ise yalnızca referansı paylaşır. React'te state güncellemesinin neden yeni bir nesne istediğini anlamanın anahtarı tam olarak bu ayrımdır.

Closure ve scope sorularını nasıl yanıtlamalısınız?

Closure, bir fonksiyonun tanımlandığı ortamdaki değişkenlere, o ortam sona erdikten sonra da erişebilmesidir. Mülakatçı bu soruyu sevmez değil, bayılır; çünkü hook'ların çalışma biçimi doğrudan closure mantığına dayanır.

function sayacOlustur() {
  let sayi = 0;
  return () => ++sayi;
}
const say = sayacOlustur();
say(); say(); // 2

Klasik tuzak sorusu döngü içindeki setTimeout örneğidir. var ile yazdığınız döngüde bütün zamanlayıcılar aynı değişkeni paylaşır ve son değeri basar. let kullandığınızda her tur için yeni bir bağlama oluşur, böylece beklenen değerleri görürsünüz.

React tarafındaki karşılığı "stale closure" sorunudur. Örneğin useEffect içinde bir state değerini okuyup bağımlılık dizisine eklemezseniz, efekt ilk render'daki eski değeri görmeye devam eder. Bu bağlantıyı kendiliğinden kurmanız, mülakatçıya iki konuyu birlikte düşünebildiğinizi gösterir.

this, call, apply ve bind farkı nedir?

this, fonksiyonun nasıl çağrıldığına göre değer alır; nerede yazıldığına göre değil. Nesne metodu olarak çağırırsanız this o nesneyi gösterir, düz çağrıda strict mode altında undefined olur. Ok fonksiyonları ise kendi this değerini oluşturmaz ve dış kapsamdakini kullanır.

• call: fonksiyonu hemen çalıştırır, argümanları tek tek alır.
• apply: fonksiyonu hemen çalıştırır, argümanları dizi olarak alır.
• bind: fonksiyonu çalıştırmaz, this değeri sabitlenmiş yeni bir fonksiyon döndürür.

Sınıf bileşenlerinin yaygın olduğu dönemde bu soru olay yöneticilerini bağlamak yüzünden çok gelirdi. Bugün fonksiyon bileşenleri standart olsa da eski kod tabanlarında çalışacaksanız yine karşınıza çıkar. Kısacası bu konuyu kesinlikle atlamayın.

Event loop, Promise ve async/await soruları neyi ölçer?

Bu grup, tarayıcının tek iş parçacığında nasıl eş zamansız iş yürüttüğünü anlayıp anlamadığınızı ölçer. Mülakatçı genellikle bir kod parçası verip çıktının sırasını sorar.

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
// A, D, C, B

Yanıtın gerekçesi şudur: senkron kod önce biter, ardından microtask kuyruğundaki Promise geri çağrıları çalışır, en son macrotask kuyruğundaki setTimeout gelir. MDN'nin event loop sayfası bu modeli ayrıntılı anlatıyor.

async/await sorusunda ise hata yönetimini konuşmaya hazır olun. await ifadesini try/catch ile sarmazsanız reddedilen Promise sessizce kaybolabilir. Bu ayrıntıyı atlayan aday, gerçek projede sessiz hatalarla uğraşır. Ayrıca birbirinden bağımsız istekleri sırayla beklemek yerine Promise.all ile paralel başlatmanın sayfa hızını nasıl etkilediğini anlatabilirsiniz.

ES6 ve sonrası özellikler için mülakatçı hangi soruları sorar?

Modern React kodu bu özelliklerle dolu olduğu için mülakatçı hepsini kısa kısa yoklar. Yanıtlarınızı kısa tutun ama her birine tek satırlık bir örnek ekleyin.

• Destructuring: props'u fonksiyon imzasında açmak için kullanırsınız.
• Spread ve rest: state'i kopyalayıp tek alanı güncellemenin standart yoludur.
• Optional chaining (?.): API'den eksik gelen alanlarda uygulamanın çökmesini önler.
• Nullish coalescing (??): 0 ve boş metni geçerli değer sayar, || gibi davranmaz.
• Modüller: import ve export ile kodu dosyalara bölersiniz, tree shaking bunu kullanır.

Buradaki klasik ayrıntı ?? ile || farkıdır. Örneğin sepetteki ürün adedi 0 ise adet || 1 ifadesi 1 döndürür ve hata üretir. adet ?? 1 ise 0 değerini korur. Böyle küçük bir örnek, konuyu gerçekten kullandığınızı gösterir.

Dizi metotları ve immutability soruları neden önemlidir?

React state'i doğrudan değiştirmenize izin vermez; yeni bir değer vermenizi ister. Bu yüzden mülakatçı map, filter, reduce ve spread ile veri dönüştürme becerinizi mutlaka yoklar. Örneğin "sepetteki bir ürünün adedini güncelleyin" görevi çok sık gelir.

setSepet(s => s.map(u =>
  u.id === id ? { ...u, adet: u.adet + 1 } : u
));

Burada push, splice veya sort gibi diziyi yerinde değiştiren metotları kullanırsanız React referansın aynı kaldığını görür ve ekranı güncellemeyebilir. Dolayısıyla toSorted ve toSpliced gibi kopya döndüren yeni metotları bilmek de artı puandır.

Takip sorusu genelde iç içe nesnelerle gelir. Derin bir alanı güncellemek için her seviyeyi ayrı ayrı kopyalamanız gerekir; bu kod uzarsa Immer gibi bir kütüphane okunabilirliği artırır. Kısacası mülakatçı burada sizin referans mantığını gerçekten kavrayıp kavramadığınıza bakar.

Custom hook yazma sorusu nasıl gelir?

Orta ve kıdemli seviyede sık karşılaştığım görev, tekrar eden mantığı bir custom hook'a taşımaktır. Custom hook, adı use ile başlayan ve içinde başka hook'lar çağıran sıradan bir fonksiyondur. Böylece aynı mantığı birden fazla bileşende kopyalamadan kullanırsınız.

function useVeri(url) {
  const [veri, setVeri] = useState(null);
  const [hata, setHata] = useState(null);
  useEffect(() => {
    let iptal = false;
    fetch(url).then(r => r.json())
      .then(v => { if (!iptal) setVeri(v); })
      .catch(setHata);
    return () => { iptal = true; };
  }, [url]);
  return { veri, hata };
}

Bu örnekte mülakatçının dikkat ettiği ayrıntı iptal bayrağıdır. Kullanıcı hızlıca başka bir sayfaya geçerse eski istek geç dönebilir ve yanlış veriyi ekrana yazar. Temizleme fonksiyonu bu yarış durumunu engeller; daha modern bir çözüm olarak AbortController'dan da bahsedebilirsiniz.

Ayrıca hook kurallarını anlatmanızı isterler: hook'ları yalnızca bileşenin veya başka bir hook'un en üst seviyesinde çağırırsınız, koşul ya da döngü içinde çağırmazsınız. Çünkü React hook'ları çağrı sırasına göre eşleştirir.

React'in temel kavramlarıyla ilgili hangi sorular gelir?

React çekirdeğiyle ilgili sorular genellikle tanım ister ama iyi aday tanımın arkasındaki nedeni de söyler.

Virtual DOM nedir?

Virtual DOM, arayüzün bellekte tutulan hafif bir kopyasıdır. State değiştiğinde React yeni ağacı eskisiyle karşılaştırır ve gerçek DOM'a yalnızca gereken değişiklikleri uygular. Bu karşılaştırma sürecinin adı reconciliation'dır.

JSX nedir, tarayıcı onu doğrudan anlar mı?

Hayır. JSX, JavaScript içinde HTML'e benzeyen bir söz dizimidir ve derleme adımında fonksiyon çağrılarına dönüşür. Bu nedenle JSX içinde class yerine className, for yerine htmlFor yazarsınız.

Bileşen ile element arasındaki fark nedir?

Bileşen, props alıp arayüz döndüren fonksiyondur. Element ise o fonksiyonun döndürdüğü, ekranda ne olması gerektiğini anlatan sade nesnedir. Bu ayrımı net anlatmak, React'in iç işleyişini bildiğinizi gösterir.

Props ve state farkını nasıl anlatmalısınız?

Props, bileşene dışarıdan gelen ve bileşenin değiştirmediği veridir. State ise bileşenin kendi içinde tuttuğu ve zamanla değişen veridir. İkisi de değiştiğinde yeniden render başlar, ancak sahiplik farklıdır.

Takip sorusu genelde "iki kardeş bileşen aynı veriyi nasıl paylaşır?" olur. Yanıt state'i ortak üst bileşene taşımaktır; React dokümantasyonu buna "lifting state up" adını verir. Ardından veri çok derine inerse Context konusuna geçebilirsiniz.

useState ve useEffect soruları hangi tuzakları içerir?

Hook soruları mülakatın kalbidir. Özellikle useEffect, en çok yanlış anlaşılan API olduğu için mülakatçıların favorisidir.

State güncellemesi neden hemen yansımaz?

setState çağrısı bir sonraki render'ı planlar; mevcut render içindeki değişken değişmez. Aynı olay içinde üç kez setSayi(sayi + 1) yazarsanız sonuç bir artar. Önceki değere göre güncellemek için fonksiyon biçimini kullanırsınız:

setSayi(onceki => onceki + 1);

useEffect bağımlılık dizisi nasıl çalışır?

Dizi yoksa efekt her render'dan sonra çalışır. Boş diziyle yalnızca ilk yüklemede çalışır. Değer verirseniz o değerler değiştiğinde yeniden çalışır. Temizleme fonksiyonu ise bir sonraki çalıştırmadan veya bileşen kaldırılmadan önce devreye girer.

Güçlü bir yanıt, React ekibinin "You Might Not Need an Effect" rehberine atıf yapar. Yani hesaplayabileceğiniz veriyi efektle state'e kopyalamak yerine render sırasında hesaplamak gerekir. Geliştirme modunda Strict Mode'un efektleri iki kez çalıştırdığını bilmek de artı puandır.

useMemo, useCallback ve React.memo ne zaman kullanmalısınız?

Üçü de gereksiz hesaplama veya render'ı önlemek içindir, fakat her yere eklemek yanlış yanıttır. Mülakatçı burada ölçmeden optimizasyon yapıp yapmadığınızı yoklar.

• useMemo: pahalı bir hesaplamanın sonucunu bağımlılıklar değişene kadar saklar.
• useCallback: fonksiyon referansını sabit tutar, memo ile sarmaladığınız alt bileşene prop olarak geçerken işe yarar.
• React.memo: props sığ karşılaştırmada değişmediyse bileşenin yeniden render'ını atlar.

Güncel bir ayrıntı da ekleyebilirsiniz. React ekibi React Compiler adlı derleyiciyi yayımladı; bu araç memoization işini derleme sırasında kendiliğinden yapmayı hedefliyor. Dolayısıyla yeni projelerde elle useMemo yazma ihtiyacı azalıyor, ama eski kod tabanlarında bu hook'ları okumayı bilmeniz gerekiyor.

Benim sorduğum takip sorusu şu: "Bir bileşenin gereksiz render olduğunu nasıl anlarsınız?" Beklediğim yanıt React DevTools Profiler ile ölçmek, sonra karar vermektir.

useRef ve useReducer hakkında neler bilmelisiniz?

Bu iki hook, useState kadar sık olmasa da orta seviye mülakatlarda düzenli olarak karşıma çıkıyor. useRef, render'lar arasında korunan ama değiştiğinde yeniden render başlatmayan bir kutu verir. Tipik kullanım alanları DOM elemanına erişmek, zamanlayıcı kimliğini saklamak veya önceki değeri tutmaktır.

const inputRef = useRef(null);
const odakla = () => inputRef.current.focus();

Mülakatçı genelde şu farkı sorar: "Bir değeri neden state yerine ref içinde tutarsınız?" Doğru yanıt, ekranda görünmesi gerekmeyen ve değiştiğinde arayüzü etkilemeyen veriler için ref kullandığınızdır. Ancak ref değerini render sırasında okuyup ekrana basmak hatalı sonuç verir.

useReducer ise birbirine bağlı birden çok state alanını tek bir fonksiyonla yönetmenizi sağlar. Örneğin bir ödeme formunda adım, hata ve yüklenme durumlarını ayrı ayrı useState ile tutmak yerine tek reducer içinde toplarsınız. Böylece durum geçişlerini tek yerden okursunuz ve test yazmak da kolaylaşır. Kısacası karmaşık form akışlarında useReducer daha okunabilir bir yapı sunar.

Liste render'ında key prop neden önemlidir?

key, React'in liste elemanlarını render'lar arasında eşleştirmesini sağlar. Kararlı ve benzersiz bir key vermezseniz React yanlış elemanı günceller; bu da input değerlerinin karışması gibi bulması zor hatalara yol açar.

{urunler.map(u => <UrunKart key={u.id} urun={u} />)}

Hemen ardından dizi indeksini key olarak kullanmanın riskini sorarlar. Listeyi sıralar, filtreler veya başa eleman eklerseniz indeksler kayar ve state yanlış elemana geçer. Liste hiç değişmiyorsa indeks kabul edilebilir, ancak veritabanı kimliği her zaman daha güvenlidir.

İleri bir ayrıntı olarak key'i bilinçli değiştirerek bir bileşeni sıfırlayabileceğinizi söyleyebilirsiniz. Örneğin profil formunda kullanıcı değiştiğinde key={kullaniciId} vermek, formun state'ini temiz başlatır.

Controlled ve uncontrolled bileşen farkı nedir?

Controlled bileşende input değerini React state'inde tutarsınız ve her tuş vuruşunu onChange ile state'e yazarsınız. Uncontrolled bileşende değer DOM'un kendisinde kalır ve ihtiyaç anında onu ref ile okursunuz.

const [email, setEmail] = useState("");
<input value={email} onChange={e => setEmail(e.target.value)} />

Hangisini seçeceğiniz sorusuna tek doğru yanıt yoktur. Anlık doğrulama, koşullu alan veya biçimlendirme gerekiyorsa controlled yapı daha kolaydır. Çok alanlı ve performans hassas formlarda ise uncontrolled yaklaşım ya da React Hook Form gibi kütüphaneler render sayısını azaltır.

Formlar kullanıcı deneyiminin en hassas noktasıdır. Web projelerinde gördüğüm en pahalı hatalar hata mesajı eksik formlardan çıkıyor; bu konuyu arayüz tasarımındaki UX hataları yazısında ayrıca anlattım.

State yönetimi sorularında Context, Redux ve Zustand nasıl karşılaştırılır?

Mülakatçı burada bir kütüphaneyi ezberleyip ezberlemediğinize değil, doğru aracı seçme gerekçenize bakar. Önce state'in türünü ayırmanız gerekir: yerel arayüz state'i, paylaşılan istemci state'i ve sunucudan gelen veri.

• Context: tema, dil, oturum bilgisi gibi seyrek değişen veriler için yeterlidir. Sık değişen veride tüm tüketicileri yeniden render eder.
• Redux Toolkit: büyük ekiplerde öngörülebilir akış, DevTools ve middleware desteği sağlar.
• Zustand: az kodla global store kurar ve seçici abonelikle gereksiz render'ı azaltır.
• TanStack Query ve benzerleri: sunucu verisini önbellek, yeniden deneme ve senkronizasyonla yönetir.

Güçlü yanıt şu cümleyi içerir: "Sunucu verisini global store'a kopyalamam, onu bir veri çekme kütüphanesine bırakırım." Bu ayrım, çoğu projede Redux ihtiyacını ciddi biçimde azaltır ve mülakatçıya pratik deneyim sinyali verir.

React 19 ve Server Components hakkında mülakatçılar neler soruyor?

Güncel sürümleri takip ettiğinizi göstermek için bu başlık önemlidir. React 19 duyurusu Actions kavramını, useActionState, useOptimistic ve use gibi yeni API'leri ve Server Components desteğini kararlı hâle getirdi.

Server Components sorusunda temel ayrımı anlatmanız yeterlidir. Sunucu bileşenleri sunucuda çalışır, tarayıcıya JavaScript göndermez ve veritabanına doğrudan erişebilir. İstemci bileşenleri ise "use client" yönergesiyle başlar; state, efekt ve tarayıcı API'si gerektiren her şey orada kalır.

Next.js App Router ile çalıştıysanız bu deneyimi somut örnekle anlatın. Örneğin ürün listesini sunucu bileşeninde çekip yalnızca "sepete ekle" butonunu istemci bileşeni yapmak, gönderilen JavaScript miktarını düşürür. Mülakatçı teoriden çok bu tür karar örneklerini dinlemek ister.

Performans ve render optimizasyonu sorularını nasıl yanıtlamalısınız?

Performans sorusu genellikle açık uçludur: "Yavaş açılan bir React sayfasını nasıl hızlandırırsınız?" Burada sıralı bir yöntem anlatmanız gerekir; rastgele teknik saymanız değil.

1. Önce ölçün: Lighthouse, Chrome DevTools Performance ve React Profiler ile darboğazı bulun.
2. Paket boyutunu küçültün: React.lazy ve dinamik import ile kod bölme yapın.
3. Uzun listeleri sanallaştırın: ekranda görünmeyen satırları render etmeyin.
4. Görselleri optimize edin: doğru boyut, modern format ve lazy loading kullanın.
5. Gereksiz render'ı kesin: state'i ihtiyaç duyan en alt bileşene indirin.

Ölçüm tarafını anlatırken Core Web Vitals metriklerini, özellikle INP ve LCP'yi anmanız iyi bir sinyaldir. Test sürecini adım adım görmek isterseniz Google Lighthouse ile site performans testi yazısına bakabilirsiniz. Hızın arama görünürlüğüne etkisini ise site hızı ve SEO yazısında anlattım.

Test ve erişilebilirlik konusunda hangi sorular gelir?

Test sorularında mülakatçı araç adından çok test felsefesine bakar. React Testing Library'nin ilkesi, bileşeni kullanıcının gördüğü şekilde test etmektir. Yani iç state'e değil, ekrandaki metne, role ve etkileşime odaklanırsınız.

render(<Sayac />);
await userEvent.click(screen.getByRole("button", { name: "Artır" }));
expect(screen.getByText("1")).toBeInTheDocument();

Erişilebilirlik tarafında ise şu sorular sık gelir: div yerine neden button kullanmalısınız, modal açtığınızda odak nereye gitmeli, görsellerde alt metni nasıl yazarsınız? Ayrıca klavyeyle gezinme ve ekran okuyucu uyumu, ciddi ekiplerin ön yüz standardının parçasıdır.

Mobil tarafı da unutmayın. Arayüzü küçük ekrandan başlayarak kurmanın mantığını mobil öncelikli tasarım yazısında bulabilirsiniz; tasarım ekibiyle çalışan geliştirici mülakatlarında bu konu sıkça gündeme geliyor.

Canlı kodlama görevinde nasıl davranmalısınız?

Canlı kodlamada sonuç kadar süreç de puan getirir. Mülakatçı sizin nasıl düşündüğünüzü görmek ister; bu yüzden sessizce yazmak yerine düşüncenizi sesli aktarın.

Sık gelen görevler şunlardır: arama kutusu ve debounce, API'den veri çekip yüklenme ve hata durumlarını göstermek, sayfalama, sekme bileşeni, basit bir yapılacaklar listesi. Örneğin debounce sorusunda şu iskeleti bilmek işinizi kolaylaştırır:

useEffect(() => {
  const t = setTimeout(() => ara(sorgu), 300);
  return () => clearTimeout(t);
}, [sorgu]);

Önce gereksinimi netleştirin, sonra en basit çalışan sürümü yazın, ardından kenar durumları ekleyin. Boş liste, ağ hatası ve çok hızlı ardışık istek gibi durumları sizin açmanız, mülakatçının sormasını beklemekten çok daha güçlü bir izlenim bırakır.

Dört haftada React mülakat sorularına nasıl hazırlanırsınız?

Aşağıdaki plan, çalışan bir geliştiricinin günde bir ila iki saat ayırabileceği varsayımıyla kurdum. Süreler saha tecrübesine dayalı başlangıç önerisidir, garanti değildir.

1. 1. hafta: JavaScript temelleri; closure, this, event loop, Promise ve dizi metotları.
2. 2. hafta: React çekirdeği ve hook'lar; her hook için küçük bir demo bileşen yazın.
3. 3. hafta: State yönetimi, veri çekme, test ve erişilebilirlik.
4. 4. hafta: Zamanlı canlı kodlama provaları ve kendi projenizi anlatma çalışması.

Her hafta sonunda bir arkadaşınızla sahte mülakat yapın. Kendi sesinizi kaydedip dinlemek de işe yarar; çünkü "şey", "yani aslında" gibi dolgu kelimeleri ancak böyle fark edersiniz. Portföyünüzde gösterdiğiniz projenin tasarım sürecini de anlatabilmelisiniz; Figma ile arayüz tasarımı yazısı tasarımcıyla ortak dil kurmanıza yardımcı olabilir.

React mülakat sorularında en sık yapılan hatalar nelerdir?

Masanın öbür tarafında oturduğumda aynı hataları tekrar tekrar görüyorum. Bunlar teknik bilgiden çok hazırlık ve iletişimle ilgili.

• Tanımı ezberden okuyup "neden" sorusunda susmak.
• Her optimizasyon sorusuna "useMemo kullanırım" demek.
• Canlı kodlamada gereksinimi sormadan yazmaya başlamak.
• Bilmediği soruda uydurmak yerine "bilmiyorum ama şöyle araştırırım" dememek.
• Kendi projesindeki kararların gerekçesini anlatamamak.

Son madde özellikle önemli. Özgeçmişte yazan her teknoloji için "bunu neden seçtiniz, alternatifi neydi?" sorusuna hazır olun. Dürüst bir "ekipte karar önceden verilmişti, ama bugün olsa şunu denerdim" yanıtı, abartılı bir hikâyeden çok daha inandırıcıdır.

Sonuç: React mülakat sorularına hazırlığı nereden başlatmalısınız?

Özetle hazırlığı JavaScript temelleriyle başlatın, hook'ları küçük demolarla pekiştirin, state yönetimi ve performans sorularında gerekçeli karar verin. Her yanıtınızda "ne" sorusunun yanına "neden" sorusunu koyun.

Bu yazıdaki soruları bir kontrol listesi gibi kullanabilirsiniz. Her birini sesli yanıtlayıp kısa bir kod yazdığınızda, mülakat günü karşınıza çıkacak varyasyonların çoğuna hazır olursunuz. Son olarak kendi projenizi anlatma provasını ihmal etmeyin; teknik bilgiyi inandırıcı kılan şey, onu gerçek bir işte nasıl kullandığınızı gösterebilmenizdir.

Mülakatçı olarak ben neye dikkat ediyorum?

Kendi projelerim için ön yüz geliştirici ararken üç sinyale bakıyorum. İlki, adayın kodu okunabilir yazması; değişken adları ve bileşen bölümlemesi burada çok şey anlatıyor. İkincisi, kullanıcıyı düşünmesi; yüklenme durumu, hata mesajı ve mobil görünüm aklına kendiliğinden geliyor mu?

Üçüncüsü ise işin ticari tarafını anlaması. Bir web sitesi sonuçta satış, randevu veya başvuru toplamak için var. Bu yüzden sayfa hızının, form akışının ve arama motoru görünürlüğünün iş sonucuna etkisini bilen aday bir adım öne çıkıyor. Web tasarım projelerimde geliştiriciyle en verimli çalıştığım anlar, bu ortak bakışın olduğu anlar oldu.