En İyi 40 React JS Mülakat Sorusu ve Cevapları (2026)
James Hartman
React JS mülakatına mı hazırlanıyorsunuz? Sizi neler beklediğini keşfetmenin zamanı geldi. React JS mülakat soruları hem kavramsal netliğinizi hem de gerçek dünyadaki uygulama gücünüzü ortaya çıkarmanıza yardımcı olur.
React JS, teknik deneyime ve alan uzmanlığına sahip profesyoneller için muazzam kariyer fırsatları sunar. İster yeni mezun olun, ister 5 veya 10 yıllık profesyonel deneyime sahip kıdemli olun, becerileri ve teknik uzmanlığı analiz etmek önemlidir. Bu soru ve cevaplar, ekip liderlerinin, yöneticilerin ve geliştiricilerin beceri setlerini geliştirmelerine ve en iyi mülakatlara girmelerine yardımcı olur.
İşe alım yöneticileri ve teknik liderler de dahil olmak üzere 85'ten fazla profesyonelin görüşlerine dayanan bu derleme, farklı sektör beklentilerini ve çeşitli alanlardaki çalışma ekiplerinden toplanan gerçek mülakat modellerini yansıtmaktadır.
En İyi React JS Mülakat Soruları ve Cevapları
1) Sanal DOM'u ve React'ta uzlaştırmanın nasıl çalıştığını açıklayın.
Cevap:
Sanal DOM, React'in kullanıcı arayüzü değişikliklerini verimli bir şekilde hesaplamak için kullandığı kullanıcı arayüzünün bellek içi bir temsilidir. Durum veya özellikler değiştiğinde, React yeni bir Sanal DOM ağacı oluşturur ve ardından bir farklı Gerçek DOM işlemlerinin minimum kümesini keşfetmek için önceki ağaca karşı algoritma. Bu işleme, uzlaşma, düzen bozulmasını ve maliyetli tarayıcı yeniden akışlarını en aza indirir. React atar anahtarlar Listelerdeki öğelere göre düğümleri eşleştirir ve düğümleri güncellemeye, yeniden sıralamaya veya kaldırmaya karar vermek için sezgisel yöntemler (türleri ve anahtarları karşılaştırmak gibi) kullanır. Avantajları arasında öngörülebilir güncellemeler, hatalar için daha küçük bir yüzey alanı ve karmaşık kullanıcı arayüzlerinde daha iyi performans bulunur.
Örnek:
Sohbet mesajlarının dinamik bir listesini oluşturma: kararlı bir şekilde key değerler (ileti kimlikleri), yalnızca yeni iletiler DOM'a eklenirken mevcut düğümler dokunulmadan kalır ve böylece gereksiz yeniden işlemeler önlenir.
👉 Ücretsiz PDF İndirme: React JS Mülakat Soruları ve Cevapları
2) React'ta bileşen yaşam döngülerinin farklı türleri nelerdir ve Hooks bunlara nasıl eşlenir?
Cevap:
React bileşenleri, bağlama, güncelleme ve kaldırma aşamalarından geçer. Sınıf bileşenlerinde, aşağıdaki gibi yaşam döngüsü yöntemleri: componentDidMount, shouldComponentUpdate, componentDidUpdate, ve componentWillUnmount yan etkileri, işleme kararlarını ve temizliği yönetin. Fonksiyon bileşenlerinde, Çengeller eşdeğer yetenekler sağlamak: useEffect render sonrası efektleri işler; temizleme işlevleri içeride useEffect unmount'ta veya bir sonraki efektten önce çalıştır; useMemo hem de useCallback kontrol hafızası; ve useRef Oluşturma işlemleri arasında değiştirilebilir referansları korur. Kancaların avantajları arasında bileşenleştirilebilirlik, daha az "bu" bağlama sorunu ve özel kancalar aracılığıyla mantığın daha kolay yeniden kullanımı bulunurken, ana dezavantajı Kanca Kuralları ve bağımlılık yönetimini öğrenme gereksinimidir.
Örneklerle cevaplayınız:
- Montaj etkisi:
useEffect(() => fetchData(), []). - Çıkarıldığında temizlik:
useEffect(() => { start(); return stop; }, []).
3) Bir React uygulaması için istemci tarafı oluşturma (CSR), sunucu tarafı oluşturma (SSR), statik site oluşturma (SSG) ve artımlı statik yeniden oluşturma (ISR) arasında nasıl karar verirsiniz?
Cevap:
Oluşturma stratejisi, kullanıcı deneyimi gereksinimleri, veri güncelliği, SEO ihtiyaçları, altyapı kısıtlamaları ve geliştirme hızı tarafından yönlendirilmelidir. KSS SEO'nun ikincil olduğu kimlik doğrulamanın arkasındaki yüksek etkileşimli uygulamalara uygundur. SSR halka açık sayfalar için gerçek verilerle ilk boyayı sağlar, İlk Bayta Geçiş Süresini ve SEO'yu iyileştirir ancak daha yüksek sunucu maliyetlerine neden olur. SSG Veriler nadiren değiştiğinde mükemmel hız ve önbelleğe alma için sayfaları derleme zamanında önceden hesaplar. ISR Statik sayfaları talep üzerine kademeli olarak güncelleyerek, güncellik ve performans arasında bir denge sunar. Bu faktörler arasında önbelleğe alınabilirlik, kişiselleştirme, küresel kitlelere yönelik gecikme süresi ve operasyonel karmaşıklık yer alır.
Tablo: Avantajlar ve Dezavantajlar
| Yaklaşım | Avantajlar | Dezavantajlar |
|---|---|---|
| KSS | Basit barındırma, zengin etkileşim | İlk boyama daha yavaş, SEO daha zayıf |
| SSR | Harika SEO, ilk yüklemede yeni veriler | Daha yüksek sunucu yükü, karmaşıklık |
| SSG | Hızlı, ucuz, CDN dostu | Yeniden oluşturulana kadar bayat içerik |
| ISR | Kontrollü tazelikle hızlı | Yönetilmesi gereken daha fazla hareketli parça |
4) Hangi durum yönetim stratejisi kullanılmalıdır: yerel durum, Context, Redux veya sorgu kütüphaneleri?
Cevap:
Seçin en basit araç Sorunun özelliklerini ele alan bileşen yerel durumu useState or useReducer izole kullanıcı arayüzü sorunları için idealdir. bağlam çoğunlukla okunan, uygulama genelindeki değerler (tema, yerel, geçerli kullanıcı) için çalışır ancak büyük ağaçlardaki yüksek frekanslı güncellemeler için optimize edilmemiştir. Redux veya benzer olay kaynaklı depolar, öngörülebilirliğe, zaman yolculuğu hata ayıklamasına, ara yazılıma ve katı tek yönlü veri akışlarına ihtiyaç duyduğunuzda mükemmeldir. Veri alma kütüphaneleri (Örneğin, React Query tarzı kalıplar) sunucu durum yaşam döngülerini yönetir—önbellekleme, çıkarımlamapingYeniden veri alma stratejileri ve senkronizasyon—gereksiz kodları azaltır. Pragmatik bir mimari sıklıkla şunları kullanır: yerel durum + Yapılandırma için bağlam + bir sunucu durumu kitaplığı, Redux'u karmaşık iş akışları için ayırıyor.
Örnek:
Bir pano, API önbelleğe alma için React Query'yi, tema için Context'i ve useReducer yerel olay yönetimi için karmaşık bileşenlerin içinde.
5) useEffect ile useLayoutEffect arasındaki fark nedir ve her ikisi de ne zaman geçerlidir?
Cevap:
useEffect tarayıcı boyandıktan sonra çalışır ve bu sayede veri alma, abonelikler ve günlük kaydı gibi engelleyici olmayan görevler için uygun hale gelir. useLayoutEffect infaz DOM mutasyonlarından sonra ancak boyadan önce eş zamanlı olarak, titreşim olmadan gerçekleşmesi gereken ölçüm ve düzen ayarlamalarına izin verir (örneğin, eleman boyutlarını okuma ve stilleri eş zamanlı olarak yeniden uygulama). useLayoutEffect Aşırı kullanıldığında boyama işlemini engelleyebilir ve tepkiselliğe zarar verebilir. İyi bir kural, useEffect yan etkiler ve erişim için useLayoutEffect yalnızca görsel doğruluğu sağlamak için düzeni ölçmeniz veya eş zamanlı olarak değiştirmeniz gerektiğinde.
Örneklerle cevaplayınız:
useEffect: render sonrası kullanıcı profilini getir.useLayoutEffect: Bir araç ipucunun boyutunu ölçerek onu boyama öncesinde konumlandırın.
Hızlı karşılaştırma
| Karakteristik | kullanım Etkisi | useLayoutEffect |
|---|---|---|
| Zamanlama | Boya sonrası | Boya öncesi |
| Kullanım örneği | Veriler, abonelikler | Ölçümler, eşzamanlı düzen düzeltmeleri |
| Risk | Ağır ise küçük bir aksaklık | Ağır ise blok boya |
6) Listelerde anahtarların nasıl çalıştığını ve dizi indekslerini kullanmanın tuzaklarını açıklayın.
Cevap:
Anahtarlar, React'in uzlaştırma özelliğinin, işlemeler arasında liste öğelerini doğru bir şekilde tanımlamasını sağlar. Kararlı ve benzersiz anahtarlar, React'in öğeleri minimum DOM kaybıyla yeniden sıralamasına, eklemesine veya kaldırmasına olanak tanır. dizi dizinleri Anahtarlar, öğeler yeniden sıralanabildiğinde, eklenebildiğinde veya silinebildiğinde sorunludur çünkü React, önceki durumu yanlış öğeyle ilişkilendirebilir ve bu da küçük hatalara (örneğin, yanlış giriş değerleri veya animasyonlar) neden olabilir. En iyi uygulama, veritabanı kimliği gibi değişmez, etki alanına özgü bir tanımlayıcı kullanmaktır. Liste gerçekten statikse ve asla yeniden sıralanmıyorsa, dizinler kabul edilebilir, ancak bu kuraldan ziyade istisnadır.
Örnek:
Sürüklenebilir bir Kanban panosu, sürükle-bırak sırasında bileşen kimliğini korumak için endeksler değil kart kimliklerini kullanmalıdır.
7) React'ta ezberleme teknikleri nerelerde uygulanır, avantajları ve dezavantajları nelerdir?
Cevap:
Bellekleme, girdiler değişmediğinde önceki sonuçları yeniden kullanarak gereksiz hesaplamaları ve yeniden işlemeleri azaltır. React'ta, React.memo önbellek bileşeni çıktısı, useMemo pahalı hesaplamaları önbelleğe alır ve useCallback Alt bileşenlere aktarılan işlev kimliklerini hafızaya alır. Başlıca avantajları, performans kararlılığı ve yoğun etkileşim altında CPU kullanımının azalmasıdır. Dezavantajları arasında karmaşıklık, bağımlılıklar yanlışsa olası eski önbellek hataları ve bellek yükü bulunur.
Tablo: Ezberlemenin farklı yolları
| Menşei | Amaç | Dikkate Alınması Gereken Tipik Faktörler |
|---|---|---|
React.memo(Component) |
Destekler sığ-eşit ise yeniden oluşturmayı atla | Destek oynaklığı, çocuk maliyeti |
useMemo(fn, deps) |
Hesaplanan değerleri önbelleğe al | Hesaplama maliyeti ve bellek maliyeti |
useCallback(fn, deps) |
Kararlı fonksiyon kimliği | Bağımlılık doğruluğu |
Örneklerle cevaplayınız:
Filtrelenmiş, sıralanmış bir veri kümesini bir ızgara için kullanarak ezberleyin useMemove hücre oluşturucu bileşenlerini sarın React.memo yeniden oluşturma fırtınalarından kaçınmak için.
8) Formlar için kontrollü mü yoksa kontrolsüz bileşenleri mi tercih edersiniz? Form durumunun faydalarını, dezavantajlarını ve türlerini tartışın.
Cevap:
Kontrollü bileşenler girdileri React durumuna bağlayın value hem de onChange, tek bir doğruluk kaynağından türetilen doğrulama, maskeleme ve koşullu kullanıcı arayüzüne olanak tanır. Avantajları öngörülebilirlik ve diğer durumlarla kolay entegrasyondur; dezavantajları ise optimizasyon yapılmadan her tuş vuruşunda yeniden oluşturma maliyetidir. Kontrolsüz bileşenler Referansları kullanarak doğruluk kaynağı olarak DOM'a güvenin, bu da temel formlar için daha düşük ek yük ve daha basit bağlantı, ancak daha az merkezi doğrulama sağlar. Karmaşık iş akışları için, kritik alanlar için kontrollü girdiler ve büyük, metin ağırlıklı alanlar için kontrolsüz girdiler kullanan hibrit bir model yaygındır.
Örnek:
Kayıt formu, e-posta ve parola doğrulaması için kontrollü alanlar kullanırken, notlar metin alanı yeniden oluşturma yükünü azaltmak için kontrolsüzdür.
9) Context'i ne zaman özel bir kancaya karşı kullanırsınız ve kavramsal olarak aralarındaki fark nedir?
Cevap:
bağlam bir taşıma mekanizması Birçok bileşenin ihtiyaç duyduğu değerler için, destek delme işleminden kaçınarak. Durumu kendi başına yönetmez; yalnızca alt bileşenlere açar. özel kanca Yeniden kullanılabilir mantığı kapsüller; durum, efektler ve harici hizmetleri birleştirerek değerler ve işlevler döndürür. Paylaşımlı, çoğunlukla okunabilen bir yapılandırma sağlamak veya bir depolama alanını kullanıma sunmak için Context'i kullanın ve depolama alanının davranışını uygulamak veya kimlik doğrulama, özellik işaretleri veya veri alma politikaları gibi konuları düzenlemek için özel kancalar kullanın. İkisi birbirini tamamlar: ortak bir kalıp useAuth() destekli özel bir kanca olarak AuthContext.
Örneklerle cevaplayınız:
AuthProvider Context aracılığıyla kullanıcı ve token sağlar; useAuth oturum açma, yenileme ve oturum kapatma yan etkilerini yönetir.
10) Yavaş renderların ve yaşam döngüsü kritik noktalarının özellikleri de dahil olmak üzere büyük React uygulamaları için performans ayarlama stratejilerini ana hatlarıyla açıklayabilir misiniz?
Cevap:
Performans ayarlaması ölçümle başlar. React DevTools Profiler ve tarayıcı performans panellerini kullanarak yavaş yolları belirleyin ve uzlaştırma noktalarını ve maliyetli commit'leri tespit edin. Taktikler şunları içerir: eyalet yerelliği (devleti tüketicilerinin yanında tutmak), hafızaya alma (React.memo, useMemo, useCallback), liste sanallaştırma uzun listeler için kod bölme ilk paketi azaltmak için tembel yükleme ile ve geri sıçrama veya boğulma yüksek frekanslı olaylar. Sunucu destekli veriler için, bir sorgu kitaplığıyla önbelleğe almayı benimseyin ve gerilim dostu Daha sorunsuz yükleme için desenler. Geniş bağımlılık dizileri nedeniyle çok sık çalışan efektler veya sık değişen Bağlam değerleri nedeniyle yeniden işlenen bileşenler gibi yaşam döngüsü etkin noktalarına dikkat edin.
Örneklerle cevaplayınız:
Pencereleme kütüphanesi kullanarak 10,000 satırlık bir tabloyu sanallaştırın; başlangıç çizimini iyileştirmek için rota tabanlı kod bölmenin arkasında ağır grafikleri tembel yükleyin.
11) React'ta props ve state arasındaki fark nedir?
Cevap:
Her ikisi de props hem de state bileşenlerin nasıl oluşturulduğunu etkiler, ancak amaçları ve yaşam döngüleri temelde farklıdır. destekler (özelliklerin kısaltması) bir üst bileşenden bir alt bileşene aktarılan, yapılandırmayı veya işleme için verileri tanımlayan değişmez girdilerdir. aşağıya doğru React'ın tek yönlü veri akışında yer alır ve alıcı bileşen tarafından asla değiştirilmemelidir. EyaletÖte yandan, değişkendir ve bileşen tarafından dahili olarak korunur. Form giriş değerleri veya açılıp kapatılan görünürlük gibi zaman içinde değişen dinamik davranışları belirler.
Temel Farklılıklar Tablosu:
| faktör | destekler | Eyalet |
|---|---|---|
| mutability | değişmez | Değişken |
| Mülkiyet | Ebeveyn tarafından geçti | Bileşene ait |
| Güncelleme Yöntemi | Üst öğe yeniden oluşturulur | useState or setState |
| Kullanım çantası | yapılandırma | Dinamik kullanıcı arayüzü değişiklikleri |
| Ömrü | Render sırasında mevcut | Kalıcı olur, yeniden oluşturmaları tetikler |
Örnek:
A <Button color="blue" /> renk belirlemek için aksesuarlar kullanılırken, clicked Boolean durumunda görsel geri bildirimi değiştirir.
12) React'ta bileşen mimarisi modelini ve bileşenlerin sınıflandırılmasının farklı yollarını açıklayın.
Cevap:
React uygulamaları bir bileşen tabanlı mimariKullanıcı arayüzünü küçük, yeniden kullanılabilir yapı taşlarına bölerek. Bileşenler, amaç hem de sorumluluk:
- Sunumsal (Aptal) Bileşenler – Kullanıcı arayüzüne odaklanın, verileri destekler aracılığıyla alın ve nadiren durumu yönetin.
- Konteyner (Akıllı) Bileşenleri – Mantığı yönetir, veri getirir ve durumu yönetir; sunum bileşenlerini oluştururlar.
- Yüksek Dereceli Bileşenler (HOC'ler) – Bir bileşeni alıp ek davranışa sahip geliştirilmiş bir sürümünü döndüren fonksiyonlar.
- Saf Bileşenler – Destekleri ve durumu yüzeysel olarak karşılaştırarak performansı optimize edin.
- İşlevsel ve Sınıf Bileşenleri – Okunabilirlik ve performans açısından artık fonksiyonel bileşenler (kancalı) tercih ediliyor.
Örnek:
A <UserProfile /> bileşen sunum amaçlı olabilir, kullanıcı bilgilerini alabilirken <UserProfileContainer /> verileri alır ve yaşam döngüsünü yönetir.
13) React hata sınırlarını nasıl ele alır ve bunlar neden önemlidir?
Cevap:
Hata sınırları yakalayan özel React bileşenleridir Javaİşleme, yaşam döngüsü yöntemleri veya oluşturucular sırasında alt bileşen ağacının herhangi bir yerinde oluşan betik hataları. Hataları belirli alt ağaçlara izole ederek tüm uygulamanın çökmesini önlerler. Bunu kullanarak uygulayabilirsiniz: componentDidCatch(error, info) hem de static getDerivedStateFromError() bir sınıf bileşeninde.
Avantajları:
- Yedek kullanıcı arayüzlerini göstererek kullanıcı arayüzünün kararlılığını koruyun.
- Analiz için hataları yakalayın ve kaydedin.
- Art arda gelen sökmeleri önleyin.
Örnek:
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
render() { return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children; }
}
14) React Parçaları nedir ve sarmalayıcı parçalardan nasıl farklıdırlar? unsurlar?
Cevap:
React Fragments (<></>) DOM'a ek düğümler eklemeden birden fazla öğeyi gruplamanıza olanak tanır. Bu, özellikle ek sarmalayıcıların düzen veya erişilebilirlik sorunlarına neden olabileceği listelerde, tablolarda ve anlamsal HTML'de daha temiz bir yapı için önemlidir. Sarmalayıcının aksine <div>s, Parçalar DOM'a işlenmez ve bu nedenle performans ve anlamsal avantajlara sahiptir.
Örnek:
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
Fark Tablosu:
| faktör | fragman | <div> Wrapper |
|---|---|---|
| DOM Çıktısı | Hayır | Ekstra düğüm ekler |
| Kullanım çantası | Yapısal grupping | Stil veya düzen |
| Performans | Daha iyi | Hafif tepede |
15) Performans optimizasyonu için hangi React Hook'u kullanırsınız ve neden?
Cevap:
Performansa duyarlı React bileşenleri genellikle hafıza kancaları hem de yavaş yüklenme Gereksiz işleri en aza indirmek için. Yaygın kancalar şunlardır:
useMemo→ Hesaplama açısından maliyetli sonuçları önbelleğe alır.useCallback→ Fonksiyon kimliği değişikliklerinden kaynaklanan gereksiz çocuk render'larını engeller.useTransition→ Daha akıcı bir kullanıcı arayüzü için acil olmayan güncellemeleri erteler.useDeferredValue→ Ağır hesaplamaları anında gerçekleşen etkileşimlerden sonraya erteler.
Örnek:
Büyük bir veri ızgarası kullanarak useMemo Filtrelenmiş sonuçlar CPU tüketimini %50 veya daha fazla azaltabilir.
Avantajları:
- İsraf edilen renderları azaltır.
- Kullanıcı arayüzünün yük altında bile duyarlı kalmasını sağlar.
Dezavantajı:
- Bağımlılık hassasiyeti gerektirir; yanlış yönetilirse eski önbellek hataları oluşabilir.
16) React Portalları nedir ve avantajları nelerdir?
Cevap:
Portallar React bileşenlerinin, genellikle görsel olarak taşma veya yığınlama bağlamlarından "kaçması" gereken modallar, araç ipuçları veya açılır menüler için, alt öğeleri ana hiyerarşilerinin dışındaki bir DOM düğümüne dönüştürmesine izin verin. ReactDOM.createPortal(child, container), olay kabarcıklanma tutarlılığını korurlar, böylece olay işleyicileri öğe orijinal hiyerarşisinin içinde kalmış gibi çalışır.
Avantajlar Tablosu:
| Avantajları | Açıklama |
|---|---|
| Yapısal Bağımsızlık | Üst ağacın dışında oluştur |
| CSS/Yığınlama Kontrolü | Önlemek overflow: hidden veya z-indeks sorunları |
| Olay Yayılımı | React'in sentetik olayları hala doğru şekilde kabarcıklanıyor |
| Reus yeteneği | Küresel katmanlar için idealdir |
Örnek:
createPortal(<ModalContent />, document.getElementById('modal-root'));
17) React Router'ın sayfalar arası gezinmeyi ve durumu nasıl yönettiğini açıklayın.
Cevap:
React Router, kullanıcı arayüzünü tarayıcının yönlendirme kurallarıyla senkronize eden, bildirimsel bir yönlendirme kütüphanesidir. URL. Kullanır geçmiş API'si oturum geçmişini tam sayfa yeniden yüklemeleri olmadan değiştirmek için. Temel kavramlar şunlardır: rotalar, Bağlantılar, ve Outlet iç içe yönlendirme için. Kütüphane şunları destekler: dinamik rotalar, URL parametreler, ve navigasyon kancaları (useNavigate, useParams, useLocation). React Router v6, basitleştirilmiş bir sözdizimi ve veri API'leri sundu yükleyici hem de aksiyon fonksiyonları, SSR entegrasyonunu ve durum yönetimini iyileştiriyor.
Örnek:
<Route path="/user/:id" element={<UserProfile />} />
Faydaları:
- Tek sayfalık gezinmeyi etkinleştirir.
- Kaydırma konumunu ve geçmişini korur.
- Daha iyi performans için tembel yüklemeyle temiz bir şekilde entegre olur.
18) React uygulamalarında yan etkileri ele almanın farklı yolları nelerdir?
Cevap:
Yan etkiler, bir bileşenin kapsamı dışındaki bir şeyi (API çağrıları, DOM manipülasyonu, abonelikler) etkileyen eylemleri ifade eder. Başlıca araçlar şunlardır:
useEffectrender sonrası istemci tarafı efektleri için.- Etkinlik sahipleri kullanıcı odaklı etkiler için.
- Özel kancalar etki mantığını yeniden kullanmak için (örneğin,
useFetch). - Middleware (Redux Saga veya Thunk gibi) karmaşık asenkron orkestrasyon için.
- React Sorgusu veya SWR Sunucu durumunu ve yeniden getirme yaşam döngülerini otomatik olarak yönetmek için.
Örnek:
A useEffect bağlama sırasında bir kez veriyi alır:
useEffect(() => { fetchData(); }, []);
Avantajları:
Basitleştirilmiş asenkron yönetim, daha iyi kapsülleme ve daha net yaşam döngüsü kontrolü.
19) React bir framework mü yoksa bir kütüphane mi? Aradaki farkı belirleyen faktörleri tartışın.
Cevap:
React resmi olarak bir kütüphane, tam teşekküllü bir çerçeve değil. Sadece şuna odaklanıyor: görünüm katmanı, oluşturma, durum ve bileşen mutlak değerlerini sağlartracYönlendirme, veri alma veya yapı oluşturma işlemlerini zorlamadan tions.
Karşılaştırma Tablosu:
| faktör | Kütüphane (React) | Çerçeve (Açısal, Vue) |
|---|---|---|
| kapsam | Görünüm oluşturma | Tam MVC mimarisi |
| inatçı | Düşük | Yüksek |
| Control | Geliştirici odaklı | Çerçeve odaklı |
| Esneklik | Yüksek | Sözleşmelerle sınırlı |
| Öğrenme eğrisi | ılımlı | Karmaşıklık nedeniyle daha yüksek |
React'ın ekosistemi (Redux, Router, Query, Next.js) geliştiricilerin kendi mimarilerini oluşturmalarına olanak tanıyan modüler bir bileşen yapısı sunan bir "meta çerçeve" oluşturur.
20) React.lazy ve Suspense'i ne zaman kullanmalısınız ve avantajları nelerdir?
Cevap:
React.lazy sağlar kod bölme bileşenleri yalnızca ihtiyaç duyulduğunda dinamik olarak yükleyerek Suspense Bileşen hazır olana kadar yedek bir kullanıcı arayüzü sağlar. Bu kombinasyon, ilk yükleme performansını ve kullanıcı tarafından algılanan duyarlılığı iyileştirir.
Örnek:
const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
<Chart />
</Suspense>
Avantajlar Tablosu:
| Avantajları | açıklama |
|---|---|
| Performans | İsteğe bağlı olarak kodu yükler |
| Kullanıcı Deneyimi | Zarif yükleme geri dönüşü |
| Paket Boyutu | Daha küçük başlangıç paketi |
| Basitlik | Yerel React API, minimum kurulum |
En İyi Uygulamalar:
- Birden fazla tembel bileşeni tek bir Suspense sınırına sarın.
- Erişilebilirlik için anlamlı geri dönüş göstergeleri kullanın.
21) React Server Components (RSC) nedir ve avantajlarını açıklayınız.
Cevap:
React Sunucu Bileşenleri (RSC'ler), bileşenlerin performans ve geliştirici deneyimini iyileştirmek için sunulan önemli bir yeniliktir. göndermeden sunucuda işlenir Javaİstemciye komut dosyası. Tamamen sunucuda çalışırlar, verileri alırlar, veritabanlarından okurlar veya serileştirilmiş çıktıyı istemciye aktarmadan önce G/Ç işlemlerini güvenli bir şekilde gerçekleştirirler.
Avantajları:
- Daha küçük paket boyutu — Yalnızca sunucu mantığı için istemci JS'si yok.
- geliştirilmiş performans — Sunucu taraflı veri alma şelaleleri azaltır.
- Güvenlik — Hassas kodlar asla tarayıcıya ulaşmaz.
- Daha iyi önbelleğe alma — Sunucu bileşenleri uçta önbelleğe alınabilir.
Örnek:
A <ProductList /> Sunucu bileşeni, doğrudan bir veritabanından veri alabilir ve sonuçları bir sunucuya iletebilir. <ProductCard /> istemci bileşeni.
22) React hidrasyon ve uzlaştırma arasındaki fark nedir?
Cevap:
Her iki terim de React'ın kullanıcı arayüzünü güncellemesini içerse de amaçları farklıdır:
- Mutabakat sanal DOM ağacını önceki sürümüyle karşılaştırarak DOM güncellemelerinin minimum kümesini belirleme sürecidir.
- HidrasyonÖte yandan, React'ın olay dinleyicilerini ve dahili yapılarını bağlama sürecidir sunucu tarafından oluşturulan HTML istemci tarafında statik işaretlemeyi tamamen etkileşimli bir uygulamaya dönüştürüyoruz.
Karşılaştırma Tablosu:
| faktör | Mutabakat | Hidrasyon |
|---|---|---|
| Tetik | İstemci yeniden oluşturma | İlk sayfa yüklemesi (SSR) |
| Amaç | DOM'u verimli bir şekilde güncelleyin | SSR HTML'yi etkileşimli hale getirin |
| kapsam | Sanal DOM farklılaştırması | Olay bağlama + durum yeniden ekleme |
| Sıklık | Bir kaç sefer | SSR renderından sonra |
Örnek:
Next.js uygulaması önceden işlenmiş HTML'yi gönderdikten sonra, React hidratlar Böylece bileşenler her şeyi yeniden oluşturmadan olaylara yanıt verir.
23) Eşzamanlı İşleme, React 18+'da kullanıcı deneyimini nasıl iyileştirir?
Cevap:
Eşzamanlı İşleme, React'in kullanıcı önceliğine göre işleme işini kesmesine, duraklatmasına veya devam ettirmesine olanak tanır. Bu, yoğun hesaplamalar veya yeniden işlemeler sırasında kullanıcı arayüzünün donmasını önler. Aşağıdaki özellikler gibi: useTransition hem de useDeferredValue bu yeteneği ayırmak için kullanın acil güncellemeler (tıpkı ty gibi)ping) Adlı acil olmayan (filtreleme gibi) olanlar.
Faydaları:
- Akıcı, duyarlı etkileşimler.
- Ana iş parçacığının bloke edilmesini önlemek için zaman dilimleme.
- Daha iyi UX için öngörülebilir önceliklendirme.
Örnek:
const [isPending, startTransition] = useTransition(); startTransition(() => setFilteredList(filter(items, term)));
İşte, teşekkürlerping React, acil olmayan güncellemeleri eş zamanlı olarak planladığı için, büyük veri kümelerini filtrelerken bile süreç akıcı kalır.
24) React uygulamalarında test yapmanın farklı yolları nelerdir?
Cevap:
React testi şu şekilde sınıflandırılabilir: birim, bütünleşme, ve son uca seviyeleri.
Test Yöntemleri Tablosu:
| Menşei | araç | Amaç |
|---|---|---|
| birim | var | İzole edilmiş fonksiyonları/bileşenleri test edin |
| Entegrasyon | Reaksiyon Test Kütüphanesi | Kullanıcı arayüzü etkileşimlerini ve durum değişikliklerini test edin |
| E2E | Cypress / Oyun yazarı | Gerçek tarayıcılarda kullanıcı akışlarını test edin |
En İyi Uygulamalar:
- tercih ederim Reaksiyon Test Kütüphanesi Enzim üzerinde (modern, DOM odaklı).
- Sahte API'leri kullanarak
msw(Sahte Hizmet Görevlisi). - Uygulama ayrıntılarını test etmekten kaçının; davranışa odaklanın.
Örnek:
test('renders user name', () => {
render(<User name="Alice" />);
expect(screen.getByText(/Alice/)).toBeInTheDocument();
});
25) React ile en sık kullanılan derleme araçları ve paketleyiciler hangileridir ve aralarındaki farklar nelerdir?
Cevap:
React, her biri farklı kullanım durumları için optimize edilmiş çeşitli paketleyiciler ve derleyicilerle entegre olabilir.
Karşılaştırma Tablosu:
| araç | özellikleri | Avantajlar | Dezavantajlar |
|---|---|---|---|
| webpack | Son derece yapılandırılabilir | Olgun, eklenti açısından zengin | Karmaşık kurulum |
| Hayatları | ESM tabanlı, yıldırım hızında geliştirme sunucusu | Anlık HMR, modern sözdizimi | Sınırlı eski eklenti desteği |
| Parsel | Sıfır yapılandırma | Otomatik optimizasyon | Less esnek |
| inşa etmek | Go tabanlı derleyici | Son derece hızlı | Daha az ekosistem eklentisi |
Örnek:
Modern projeler genellikle benimser Hayatları geliştirme hızı ve inşa etmek Verimli üretim yapıları için CI/CD boru hatlarında.
26) Next.js, React'ın yeteneklerini nasıl genişletir?
Cevap:
Next.js bir Tepki çerçevesi Yönlendirme, SSR ve statik üretim için fikir odaklı mimari sunar. Hibrit işleme modelleri, API rotaları ve uç noktaya hazır dağıtım özellikleri sunar.
Avantajları:
- Gömme SSR/SSG/ISR destekler.
- Uygulama Yönlendiricisi React Server Bileşenleri ile.
- Görüntü optimizasyonu hem de ara katman performans ve güvenlik için.
- Sunucusuz işlevler için kolay API rotaları.
Örnek:
app/page.js SSR ile oluşturulan sayfalar için; app/api/route.js sunucu uç noktaları için.
ÖzetleNext.js, minimum yapılandırmayla üretim düzeyinde React uygulamalarına olanak tanır.
27) React'ta yaygın performans hataları nelerdir ve bunlardan nasıl kaçınabilirsiniz?
Cevap:
Yaygın React performans hataları şunlardır:
- Gereksiz yeniden oluşturmalar — Kullanarak düzeltin
React.memoveya bileşenlerin bölünmesi. - Satır içi nesne/dizi oluşturma - Kullanmak
useMemoistikrarlı referanslar için. - Büyük listeler — Pencerelemeyi uygula (
react-window,react-virtualized). - Ağır hesaplamalar — Ezberleyin veya web çalışanlarına aktarın.
- Bağlamın Aşırı Kullanımı — Sık güncellemeler derinlemesine yayılır; türetilmiş durumu tercih edin.
Örnek:
eğer geçersen { a: 1 } hafızaya alınmış bir bileşene satır içi olarak, her üst işlemede yeniden işlenir. Nesneyi hafızaya alarak düzeltin.
Performans İpucu Tablosu:
| Konu | Optimizasyon Tekniği |
|---|---|
| Yeniden renderlar | React.memo, useCallback |
| Pahalı hesaplamalar | useMemo, Web Çalışanları |
| Büyük veri kümeleri | sanallaştırma |
| Sık bağlam güncellemeleri | Durumu yerelleştir |
28) useReducer ile useState arasındaki farkı açıklayınız.
Cevap:
Her iki kanca da durumu yönetir, ancak karmaşıklık ve kontrol açısından farklılık gösterirler.
useStatebasit, izole durum geçişleri için idealdir.useReducerkarmaşık durum mantığını merkezileştirir redüktör fonksiyonuKullanılarakdispatchöngörülebilir güncellemeler için eylemler.
Karşılaştırma Tablosu:
| faktör | Kullanım Durumu | Redüktörü kullan |
|---|---|---|
| Sözdizimi | [value, setValue] |
[state, dispatch] |
| karmaşa | Basit | Orta ila karmaşık |
| Kullanım çantası | Bağımsız devletler | İlgili veya iç içe geçmiş durumlar |
| Hata ayıklama | Less gereksiz sözlerle dolu | Kaydedilen eylemler aracılığıyla daha kolay |
| Örnek E-posta | Form geçişleri | Form doğrulama veya çok adımlı formlar |
Örnek:
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });
29) React uygulamalarında erişilebilirliği (a11y) nasıl artırabilirsiniz?
Cevap:
Erişilebilirlik, engelli kullanıcılar da dahil olmak üzere tüm kullanıcıların uygulamanızı etkili bir şekilde kullanabilmesini sağlar. React, anlamsal işaretleme ve ARIA nitelikleri aracılığıyla erişilebilirliği kolaylaştırır.
En İyi Uygulamalar:
- Kullanım anlamsal HTML (
<button>vs<div onClick>). - Odaklanmayı kullanarak yönetin
refhem detabIndex. - Dinamik bileşenler için ARIA rollerini kullanın.
- Görsellerde renk kontrastı ve metin alternatiflerine dikkat edin.
- Gibi araçlardan yararlanın eslint-eklentisi-jsx-a11y hem de balta çekirdeği denetimler için.
Örnek:
<button aria-label="Close dialog" onClick={closeModal}>×</button>
Avantajları:
- Daha geniş kitlelere ulaşma.
- SEO iyileştirmesi.
- WCAG standartlarına uygunluk.
30) Kod bölme ve tembel yükleme arasındaki farkları ve hangi durumlarda kullanılması gerektiğini açıklayabilir misiniz?
Cevap:
Her iki teknik de paket boyutunu ve yük performansını optimize eder ancak şu noktalarda farklılık gösterir: yürütme zamanlaması.
- Code bölme büyük demetleri bağımsız olarak yüklenebilecek daha küçük parçalara böler.
- Yavaş yüklenme Bu parçaların ihtiyaç duyulana kadar yüklenmesini geciktirir.
Karşılaştırma Tablosu:
| faktör | Code Bölme | tembel Yükleme |
|---|---|---|
| Tanım | Kodu parçalara böler | İsteğe bağlı olarak parçaları yükler |
| araç | Webpack, Vite | React.lazy, dinamik import() |
| Amaç | Paket boyutunu optimize edin | Çalışma zamanı performansını iyileştirin |
| infaz | Yapım zamanı | Süre |
Örnek:
const Settings = React.lazy(() => import('./Settings'));
Bu teknikler birlikte kullanıldığında Etkileşim Süresini azaltır ve büyük uygulamaların algılanan hızını artırır.
31) Render Props kavramını açıklayın ve bunun Yüksek Düzeyli Bileşenlerden (HOC) nasıl farklı olduğunu belirtin.
Cevap:
Render Sahne React'ta bir bileşenin bir bir destek işlevi görmek Bu, bileşen mantığının birden fazla bileşen arasında çoğaltılmadan paylaşılmasını sağlar.
Öte yandan HOC'ler, sarın Bir bileşeni dönüştürün ve enjekte edilmiş özellikler veya davranışlarla geliştirilmiş bir sürümünü döndürün.
Karşılaştırma Tablosu:
| faktör | Render Sahne | HOC |
|---|---|---|
| Uygulama | Çocuk işlevi gör | Fonksiyon sarmalamaping bileşen |
| Bileşim | satır içi kontrol | Bildirimsel sarmalamaping |
| okunabilirlik | Genellikle daha net | Sarmalayıcı cehennemine neden olabilir |
| Kullanım çantası | Dinamik işleme mantığı | Kesişen endişeler |
Örnek:
<DataProvider render={data => <UserList users={data} />} />
Render Props daha iyi esneklik sunar ve HOC'larda yaygın olan isim çakışmalarını önler.
32) Özel kancaların farklı türleri ve avantajları nelerdir?
Cevap:
Özel kancalar, durum, yan etkiler ve yardımcı programları birleştirerek yeniden kullanılabilir mantığı kapsüller. Kodun yeniden kullanılabilirliğini, endişelerin ayrılmasını ve test edilebilirliği artırırlar.
Türler ve Örnekler:
- Devlet yönetimi kancaları -
useToggle,useForm. - Veri alma kancaları -
useFetch,useQuery. - UI/UX kancaları -
useWindowSize,useDarkMode. - Entegrasyon kancaları -
useLocalStorage,useMediaQuery. - Performans kancaları -
useDebounce,useThrottle.
Avantajları:
- Merkezi mantık yeniden kullanımı.
- Daha temiz bileşenler.
- Bağımsız test.
Örnek:
function useLocalStorage(key, initial) {
const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) || initial);
useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [value]);
return [value, setValue];
}
33) React uygulamalarında bellek sızıntılarını nasıl yönetiyorsunuz?
Cevap:
Bellek sızıntıları, bağlanmamış bileşenlerin kaynaklara veya aboneliklere referanslar tutmaya devam etmesi durumunda ortaya çıkar. Performansı düşürür ve öngörülemeyen davranışlara neden olur.
Önleme Teknikleri:
- Temizleme efektleri in
useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []); - Eşzamansız çağrıları iptal et kullanma
AbortController. - Bayat kapakları saklamaktan kaçının eski props/state'lere atıfta bulunuluyor.
- Etkinliklerden veya soketlerden aboneliği iptal edin sökerken.
- React Profiler'ı kullanın yavaş bellek büyümesini tespit etmek için.
Örnek:
Bir sohbet uygulamasında, bir kullanıcı sohbet odasından ayrıldığında soket dinleyicilerini her zaman ayırın.
34) Büyük React uygulamalarında formları yönetmek için en iyi uygulamalar nelerdir?
Cevap:
Kurumsal ölçekli React uygulamalarında formları yönetmek, kontrol, performans ve sürdürülebilirlik arasında bir denge gerektirir.
En İyi Uygulamalar:
- Şu kütüphaneleri kullanın: formik, React Kanca Formuya da Son şekil doğrulama ve saha kaydı için.
- İç içe geçmiş bileşenleri veya bağlamları kullanarak ilgili alanları gruplandırın.
- Uygula şema doğrulaması (Evet, Zod) tutarlılık için.
- Ağır doğrulamaları veya API kontrollerini geri çağırın.
- Küresel olarak ihtiyaç duyulmadığı sürece form durumunu yerel tutun.
Örnek:
React Hook Form, giriş durumunu izole ederek yeniden işlemeleri en aza indirir.
const { register, handleSubmit } = useForm();
<input {...register('email', { required: true })} />
35) React geliştirmede en kullanışlı tasarım kalıpları hangileridir ve özellikleri nelerdir?
Cevap:
React, sürdürülebilir ve ölçeklenebilir kullanıcı arayüzü mimarisi için çeşitli yazılım tasarım kalıplarına doğal olarak uygundur.
| model | Açıklama | Örnek E-posta |
|---|---|---|
| Konteyner Sunucusu | Mantığı (kapsayıcı) kullanıcı arayüzünden (sunumlayıcı) ayırın | VeriKonteyneri → UIComponent |
| Kontrollü-Kontrolsüz | Form verilerini durum ve DOM aracılığıyla yönetme | Formik ve ham girdiler |
| Bileşik Bileşenler | Ebeveyn, çocuk kompozisyonunu kontrol eder | <Tabs><Tab /></Tabs> |
| Sağlayıcı Modeli | Bağlam yoluyla durumu paylaş | Tema Sağlayıcısı |
| Kanca Deseni | Durumsal mantığı yeniden kullan | useAuth, useFetch |
Örnek:
A Tabs bileşen bağlamı ortaya çıkarır <Tab> çocuklar kendilerini otomatik olarak kaydederler - temiz bir uygulama Bileşik Bileşen desen.
36) React 18 ile React 19 arasındaki temel farklar nelerdir?
Cevap:
React 19, React 18'in eş zamanlı temeline önemli yeni yeteneklerle inşa edilmiştir.
| Özellik | Tepki 18 | Tepki 19 |
|---|---|---|
| Eşzamanlı İşleme | tanıtıldı | Daha iyi gerilimle geliştirildi |
| Sunucu Bileşenleri | Deneysel | Stabilize edilmiş ve entegre edilmiş |
| Eylemler API'si | Müsait değil | Form eylemlerinin işlenmesine ilişkin yeni standart |
| Varlık Yükleme | Manuel | Otomatik kaynak yükleme |
| Geliştirilmiş Hata İşleme | Temel | Sınır kancalı granüler |
Anahtar Yararları:
React 19 şu konulara odaklanıyor: daha basit veri mutasyonları, yerleşik form eylemleri, ve gelişmiş asenkron kontrolSSR ve kademeli hidrasyonu daha kusursuz hale getirir.
37) Mikro Ön Uç nasıl çalışır? ArchiTecture React ile nasıl entegre olur ve avantajları nelerdir?
Cevap:
Mikro ön uçlar, büyük bir web uygulamasını bağımsız, dağıtılabilir ön uç modüllerine böler. Bir React ekosisteminde, her mikro ön uç, entegre edilebilen bağımsız bir uygulamadır. Modül Federasyonu, iframe'lerya da özel çalışma zamanı yükleyicileri.
Avantajları:
- Bağımsız dağıtım ve ölçekleme.
- Teknoloji yığınları arasında ekip özerkliği.
- Daha hızlı boru hatları oluşturun.
Örnek:
kullanma Web Paketi Modülü Federasyonu, ekipler React bileşenlerini uygulamalar genelinde dinamik olarak ortaya çıkarabilir:
exposes: { './NavBar': './src/NavBar' }
Dezavantajları:
- Paylaşılan durum yönetimi karmaşıklığı.
- İzole paketlerden kaynaklanan performans yükü.
38) Üretimde bir React uygulamasını ölçeklendirirken hangi faktörleri göz önünde bulunduruyorsunuz?
Cevap:
React uygulamalarının ölçeklendirilmesi teknik, mimari ve operasyonel hususları içerir.
Anahtar Faktörler:
- Code yapı — modüler kod paylaşımı için monorepoları (Nx/Turborepo) benimseyin.
- Durum Yönetimi — segment yerel vs küresel vs sunucu durumları.
- Performans — tembel yükleme, bellekleme, CDN önbelleğe alma.
- İzleme — Hatalar ve ölçümler için Sentry, Datadog veya LogRocket kullanın.
- Test ve CI/CD — otomatikleştirilmiş boru hatları ve görsel regresyon testleri.
Örnek:
Büyük bir e-ticaret platformu, SSR için Next.js, öngörülebilir durum için Redux Toolkit ve izole dikeyler için mikro ön uçlar kullanarak React uygulamalarını ölçeklendiriyor.
39) Asenkron davranış kullanan React bileşenlerini nasıl test edersiniz?
Cevap:
Asenkron React bileşenlerini test etmek, test çalıştırıcısı ile bileşenin durum güncellemeleri arasında senkronizasyon gerektirir.
En İyi Uygulamalar:
- Kullanım
waitFororfindBy*React Test Kütüphanesindeki sorgular. - Sahte getirme çağrıları veya API'leri kullanarak
msw. - tercih ederim sahte zamanlayıcılar (
jest.useFakeTimers()) zaman aşımına dayalı efektler için.
Örnek:
test('loads and displays data', async () => {
render(<UserList />);
expect(await screen.findByText('Alice')).toBeInTheDocument();
});
Bu, doğrulamalar yapılmadan önce testin React'ın asenkron güncellemelerini beklemesini sağlar.
40) Büyük ölçekli, sürdürülebilir bir React proje yapısının nasıl tasarlanacağını açıklayın.
Cevap:
Ölçeklenebilir bir React projesi modülerlik, açıklık ve ekip işbirliği arasında denge kurmalıdır.
Önerilen Klasör Yapısı:
src/ ├── components/ # Reusable UI elements ├── features/ # Feature-specific modules ├── hooks/ # Custom reusable hooks ├── context/ # Global providers ├── pages/ # Route-level views ├── services/ # API and utilities ├── assets/ # Static resources ├── tests/ # Unit & integration tests └── index.js
En İyi Uygulamalar:
- Yol takma adlarıyla mutlak içe aktarımları kullanın.
- Sıkı lintlemeyi koruyun (ESLint + Prettier).
- Kullanım TypeScript tür güvenliği için.
- Atomik tasarım veya özellik tabanlı dilimleme ile bileşen sınırlarını uygulayın.
Örnek:
Gerçek dünya kurulumunda, bir "Kullanıcı" özelliği şunları içerebilir: UserSlice.js, UserAPI.js, UserCard.jsx, ve User.test.js, hepsi içinde src/features/user/.
🔍 Gerçek Dünya Senaryoları ve Stratejik Yanıtlarla En İyi React.js Mülakat Soruları
1) React.js'deki fonksiyonel ve sınıf bileşenleri arasındaki temel farklar nelerdir?
Adaydan beklenenler: Görüşmeyi yapan kişi, React bileşen mimarisi ve modern en iyi uygulamalar hakkındaki anlayışınızı test etmek istiyor.
Örnek cevap:
"İşlevsel bileşenler daha basittir ve durum ve yaşam döngüsü yöntemlerini yönetmek için kancalara güvenirken, sınıf bileşenleri this ve yaşam döngüsü yöntemleri gibi componentDidMount. Günümüzde fonksiyonel bileşenler genellikle daha temiz kod yazmayı teşvik ettikleri, test edilmelerinin daha kolay olduğu ve React'ın render sürecindeki iyileştirmeler sayesinde daha iyi performans gösterdikleri için tercih ediliyor.”
2) React'ta Virtual DOM'un nasıl çalıştığını açıklayabilir misiniz?
Adaydan beklenenler: Görüşmeyi yapan kişi, React'ın temel performans mekanizmasına ilişkin anlayışınızı değerlendirmek istiyor.
Örnek cevap:
Sanal DOM, gerçek DOM'un bellek içi bir temsilidir. Bir bileşenin durumu değiştiğinde, React önce Sanal DOM'u günceller, 'fark' adı verilen bir işlem kullanarak önceki sürümle karşılaştırır ve ardından yalnızca gerçek DOM'un değişen kısımlarını günceller. Bu yaklaşım, doğrudan DOM manipülasyonunu en aza indirerek performansı artırır.
3) Büyük ölçekli bir React uygulamasında durumu nasıl yönetirsiniz?
Adaydan beklenenler: Görüşmeyi yapan kişi sizin devlet yönetimi teknikleri ve araçları konusundaki deneyiminizi öğrenmek istiyor.
Örnek cevap:
"Büyük uygulamalarda genellikle Redux veya Zustand gibi merkezi durum yönetimi kütüphanelerini kullanırım. Redux, öngörülebilir bir veri akışı sağlar ve zaman yolculuğu hata ayıklama araçlarıyla hata ayıklamayı kolaylaştırır. Daha basit uygulamalar için, gereksiz karmaşıklıktan kaçınmak adına Context API ve kancaları kullanmayı tercih ederim."
4) React performansını optimize ettiğiniz bir zamanı anlatın.
Adaydan beklenenler: Görüşmeyi yapan kişi performans optimizasyonu konusundaki pratik deneyiminizi anlamak istiyor.
Örnek cevap:
"Önceki görevimde, uygulamamız gereksiz durum değişiklikleri nedeniyle aşırı derecede yeniden oluşturuluyordu. React.memo ve useCallback Gereksiz yeniden işlemeleri önlemek için kancayı kullandım. Ayrıca React Profiler'ı kullanarak performansı analiz ettim ve belleğe alınması gereken bileşenleri belirledim; bu da işleme süresini yaklaşık %30 oranında azalttı."
5) React'ta yan etkilerle nasıl başa çıkıyorsunuz?
Adaydan beklenenler: Görüşmeyi yapan kişi kancalar ve yaşam döngüsü yönetimi konusundaki anlayışınızı değerlendirmek istiyor.
Örnek cevap:
API çağrıları veya DOM manipülasyonları gibi yan etkileri şu şekilde yönetiyorum: useEffect Kanca. Kanca, bağımlılıkları belirtmeme ve efektin yalnızca bu bağımlılıklar değiştiğinde çalışmasını sağlamama olanak tanır. Bu, öngörülebilir davranışın korunmasına ve sonsuz döngülerden kaçınılmasına yardımcı olur.
6) React projenizde karşılaştığınız zorlu bir hatayı ve bunu nasıl çözdüğünüzü anlatır mısınız?
Adaydan beklenenler: Görüşmeyi yapan kişi problem çözme ve hata ayıklama becerilerinizi değerlendirmek istiyor.
Örnek cevap:
"Önceki bir görevimde, durum güncellemelerinin kullanıcı arayüzüne yansımadığı bir hatayla karşılaştım. Araştırdıktan sonra, sorunun yeni bir kopya oluşturmak yerine durum nesnesini doğrudan değiştirmekten kaynaklandığını fark ettim. Kodu, değiştirilemez güncellemeler kullanacak şekilde yeniden düzenledim; bu da sorunu çözdü ve veri tutarlılığını artırdı."
7) React uygulamalarında form doğrulamasını nasıl yapıyorsunuz?
Adaydan beklenenler: Görüşmeyi yapan kişi, kullanıcı girişi doğrulamasının nasıl uygulanacağını anlayıp anlamadığınızı görmek istiyor.
Örnek cevap:
"Form girdilerini yönetmek için genellikle kontrollü bileşenler kullanıyorum ve bunları doğrulama için Formik veya React Hook Form gibi kütüphanelerle birleştiriyorum. Bu araçlar, hataların işlenmesini, form durumunun yönetilmesini ve Yup gibi üçüncü taraf doğrulama kütüphaneleriyle entegrasyonu kolaylaştırıyor."
8) React projesi üzerinde çalışırken arka uç geliştiricilerle işbirliği yapmak zorunda kaldığınız bir durumu anlatın.
Adaydan beklenenler: Görüşmeyi yapan kişi ekip çalışmanızı ve iletişim becerilerinizi değerlendirmek istiyor.
Örnek cevap:
"Son görevimde, bir pano uygulaması için REST API'leri tasarlamak üzere arka uç geliştiricilerle yakın iş birliği içinde çalıştım. Geliştirmenin ilk aşamalarında veri formatları ve uç noktalar üzerinde anlaştık. Ayrıca, arka uç oluşturulurken ön uç geliştirmeye devam etmek için sahte yanıtlar oluşturdum ve böylece daha sonra sorunsuz bir entegrasyon sağladım."
9) React bileşenlerinin yeniden kullanılabilir ve sürdürülebilir olmasını nasıl sağlıyorsunuz?
Adaydan beklenenler: Görüşmeyi yapan kişi bileşen tasarımı ve ölçeklenebilirliğe yönelik yaklaşımınızı öğrenmek istiyor.
Örnek cevap:
"Tek bir sorumluluğu üstlenen küçük, odaklanmış bileşenler oluşturma ilkesini izliyorum. Ayrıca esneklik için desteklerden yararlanıyor ve CSS-in-JS veya styled-components ile modüler stil oluşturmaya devam ediyorum. Bu, bileşenlerin proje genelinde kolayca yeniden kullanılabilmesini ve güncellenebilmesini sağlıyor."
10) React.js trendleri ve en iyi uygulamaları hakkında nasıl güncel kalıyorsunuz?
Adaydan beklenenler: Görüşmeyi yapan kişi sürekli öğrenmeye olan bağlılığınızı değerlendirmek ister.
Örnek cevap:
"React'in resmi dokümanlarını ve topluluk bloglarını takip ederek güncel kalıyorum. Ayrıca React Conf gibi React konferanslarındaki konuşmaları izliyor ve 'React Podcast' gibi podcast'leri dinliyorum. Bu kaynaklar, eş zamanlı işleme ve Sunucu Bileşenleri gibi yeni özellikler hakkında bilgi sahibi olmama yardımcı oluyor."
