Frontend Developer Mülakat Soruları 2023

Herkese merhaba, iş arayışımdan ötürü bu aralar mülakatlara giriyorum ve sorulan soruları elimden geldiğince not almaya çalışıyorum. İlerleyen zamanlarda yeni sorular gelirse onları da sizlerle paylaşırım inşallah. Herkese kolay gelsin.

1. React Portal nedir?

React Portals, bir bileşenin DOM ağacındaki herhangi bir yere render edilmesine olanak tanır. Normalde React, bileşenleri ebeveyn bileşenin altındaki bir yerde render eder. Ancak bazen, ebeveyn bileşeni DOM ağacının dışındaki bir yere yerleştirmeniz gerekebilir. Bu, özellikle modallar veya gezinme menüleri gibi öğeler için kullanışlıdır. react-dom paketinde createPortal fonksiyonu kullanılarak bir portal oluşturulabilir ve içerik belirtilen başka bir DOM düğümüne taşınabilir.

2. React Suspend nedir?

React Suspend, React 18'den itibaren yerleşik olarak sunulan bir özelliktir. React Suspend, asenkron verileri yüklerken veya beklenmedik gecikmelerle başa çıkarken yardımcı olan bir yapıdır. Özellikle, React Suspend ile bir bileşen, gerekli veriler yüklenene kadar yedek bir içerik (fallback) gösterebilir ve veriler yüklendikten sonra gerçek içeriği gösterebilir.

3. Js Scope nedir?

JavaScript’te “scope”, bir değişkenin veya fonksiyonun erişebileceği alanı ifade eder. İki tür scope vardır: global (genel) ve local (yerel). Global scope, tüm kodun erişebildiği en üst düzey kapsamdır. Local scope ise sadece belirli bir fonksiyon veya blok içinde erişilebilir alanı ifade eder.

4. Bir React projesinde performansı arttırmak için neler yapılabilir?

React uygulamalarının performansını artırmak için şunları yapabilirsiniz:

• Gereksiz yeniden render işlemlerini engellemek için PureComponent veya React.memo kullanmak.
• İşlevsel bileşenler ve hooks kullanarak kodu daha basit ve okunabilir hale getirmek.
• React DevTools gibi araçları kullanarak performans sorunlarını tespit etmek.
• Veri akışını optimize etmek için React.lazy ve Suspense gibi yeni özellikleri kullanmak.

5. useMemo ne zaman kullanılır?

useMemo, bir değeri sadece belirli bir bağımlılık değiştiğinde yeniden hesaplamak istediğinizde kullanılır. Özellikle hesaplama maliyeti yüksek veya verilerin değişmesi nadir olduğunda kullanışlıdır. Örneğin, bir bileşen içindeki hesaplamaları veya verileri önbellekte tutmak için kullanılabilir. Bağımlılık dizisi olarak verilen bir dizi, bu değerin yeniden hesaplanmasını tetikler.

6. Js forEach ve map fonksiyonlarının farkı nedir?

forEach ve map her ikisi de bir diziyi döngüsel olarak işlemek için kullanılan diziyi dönme yöntemleridir. Ancak farkları vardır. forEach, dizi üzerinde işlem yaparken yeni bir dizi oluşturmaz ve işlev sonuçları döndürmez. map ise her eleman için bir işlevi çağırır ve bu işlevin sonuçlarını yeni bir dizi olarak döndürür. Bu nedenle, map kullanarak dizi üzerinde işlem yaparsanız, orijinal diziyi değiştirmezsiniz, ancak yeni bir dizi elde edersiniz.

7. React Server Components nedir?

React Server Components, React ekosisteminin sunucu tarafında çalışan, performansı artırmayı amaçlayan bir teknolojisidir. Sunucu tarafında işlenen bileşenler, performansı artırır, veri yönetimini kolaylaştırır ve SEO’yu iyileştirir. Şu an için deneysel bir özelliktir.

8. React Prod Drilling nedir?

Prop drilling, React uygulamalarında verileri ve işlevleri bileşenler arasında iletmek için kullanılan bir yöntemdir. Bileşenler arasındaki hiyerarşide yer alan bir bileşen, alt bileşenlerine veri veya işlevleri iletmek için bu verileri ve işlevleri bir dizi props olarak iletebilir. Ancak bu yöntem, verilerin ve işlevlerin çok sayıda ara bileşenden geçmesine ve kodun karmaşıklaşmasına yol açabilir. Prop drilling'i azaltmak veya engellemek için Redux gibi yönetim araçları veya React Context API gibi teknikler kullanılabilir.

9. Semantic HTML Etiketleri nelerdir?

Semantik HTML etiketleri, belgenin yapısını ve içeriğini daha anlamlı ve anlaşılır hale getiren HTML etiketleridir. Örnek semantik etiketler arasında <header>, <nav>, <article>, <section>, <aside>, <footer>, <main> vb. bulunur. Bu etiketler, belgenin içeriğini daha iyi anlamak, tarayıcılar ve erişilebilirlik araçları için daha iyi bir anlayış sağlamak ve SEO için daha iyi indeksleme sağlamak amacıyla kullanılır.