Question 1

let ile var arasındaki temel fark nedir?

Accepted Answer

let, blok kapsamlı bir değişken tanımlar; yani yalnızca tanımlandığı blok içinde (süslü parantezler arasında) var olur. var ise fonksiyon kapsamına sahiptir ve değişkenin tüm fonksiyon boyunca erişilebilir olması beklenmeyen hatalara yol açabilir. Varsayılan olarak let kullanmak, hoisting sorunlarını ve döngü ya da koşullardaki değişken sızıntılarını önler.

Question 2

React'te JSX nedir?

Accepted Answer

JSX, HTML'e benzeyen markup'ı doğrudan JavaScript kodu içinde yazmaya olanak tanıyan bir JavaScript sözdizimi uzantısıdır. Derleme sırasında Babel tarafından React.createElement fonksiyon çağrılarına dönüştürülür. JSX kullanmak kodu daha okunabilir kılar ve tipleme aracılığıyla derleme zamanında hata tespitini mümkün kılarken, JavaScript'in gücünü tanıdık bir sözdizimi ile birleştirir.

Question 3

React'ta useState hook'u nedir?

Accepted Answer

useState, fonksiyonel bir bileşende yerel state'i yöneten bir React hook'udur. Her renderlamada sıfırlanan normal JavaScript değişkenlerinin aksine, useState art arda gelen renderlamalar arasında state değerini korur. Bu hook, mevcut state değerini ve onu güncelleyen bir fonksiyonu içeren bir dizi döndürür ve state değiştiğinde bileşenin yeniden renderlandırılmasını otomatik olarak tetikler.

Question 4

React bileşeninde mounting nedir?

Accepted Answer

Mounting, bir bileşenin oluşturulduğu ve ilk kez DOM'a eklendiği aşamadır. Bu aşamada React, state'i başlatır, yapılandırma kodunu çalıştırır ve ilk render'ı gerçekleştirir. useEffect aracılığıyla API çağrıları başlatmak veya subscription'ları başlatmak için ideal andır.

Question 5

React'te CSS Module nedir?

Accepted Answer

CSS Modules, sınıf adına hash ekleyerek otomatik olarak benzersiz sınıf adları oluşturur; bu da bileşenler arasındaki stil çakışmalarını önler. Her CSS Module dosyasının, geleneksel global stil sayfalarından farklı olarak kendi yerel scope'u vardır. Bu yaklaşım, diğer bileşenlerde yanlışlıkla üzerine yazma riski olmadan modüler stiller yazmaya olanak tanır.

Question 6

Next.js'te App Router nedir?

Accepted Answer

App Router, app/ dizinine dayalı Next.js 13+'ın yeni routing sistemidir. Pages Router'ın yerini alır ve varsayılan olarak Server Components, paylaşılan layoutlar ve page.tsx, layout.tsx, loading.tsx gibi dosya konvansiyonlarıyla daha esnek bir routing modeli sunar.

Question 7

React bileşen props'larını tiplemenin doğru sözdizimi nedir?

Accepted Answer

Props interface'i ardından Props parametresiyle fonksiyonun tiplemesi önerilen standart sözdizimdir. Bu yaklaşım mükemmel tip çıkarımı sunar ve Props tipinin kodun başka yerlerinde kolayca yeniden kullanılmasını sağlar. React.FC'den daha açık olup children tiplemesi üzerinde daha iyi kontrol sağlar.

Question 8

React.memo'nun temel rolü nedir?

Accepted Answer

React.memo, bir bileşenin render çıktısını memoize eden bir Higher-Order Component'tir. Props'ların sığ karşılaştırmasını yapar ve props'lar değişmemişse yeniden render'ı atlar. Sık sık aynı props'ları alan maliyetli alt bileşenleri optimize etmek için özellikle kullanışlıdır.

Question 9

React'te Error Boundary nedir?

Accepted Answer

Error Boundary, alt bileşen ağacında meydana gelen JavaScript hatalarını yakalayan, bir fallback UI görüntüleyen ve tüm uygulamanın çökmesini önleyen bir React sınıf bileşenidir. Render hatalarını yakalamak ve yönetmek için componentDidCatch() ve getDerivedStateFromError() metotlarını kullanır.

Question 10

Compound Components pattern nedir?

Accepted Answer

Compound Components pattern, React Context aracılığıyla örtük state paylaşan bileşenler oluşturmayı sağlar; props'ları açıkça geçirmeye gerek yoktur. Bu pattern, esnek ve birleştirilebilir bir API sunmak için Radix UI ve Headless UI gibi kütüphanelerde kullanılmaktadır. Alt bileşenler paylaşılan state'e otomatik olarak erişebilir; bu da ortak mantığı kaybetmeden yapı özelleştirmesine olanak tanır.

React / Next.js mülakat soruları

React / Next.js mülakatına hazır mısın?

Tüm React / Next.js konularını keşfet

JavaScript Temelleri

React Temelleri

React Hooks

Bileşen yaşam döngüsü

React Router

Context ile state yönetimi

Formlar ve Controlled Components

Veri Çekme ve API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js Temelleri

React ile TypeScript

Next.js Veri Çekme

Next.js Server Actions

Next.js Routing ve Navigasyon

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware ve Auth

React Testing

Zustand State Management

React Performans Optimizasyonu

Error Boundaries & Error Handling

Advanced React Patterns

Next.js Gelişmiş Özellikler

Next.js Dağıtım & Üretim

Architecture & Design Patterns

React Server Components

Next.js Uluslararasılaştırma

React Güvenlik & En İyi Uygulamalar

Bir sonraki mülakatın için React / Next.js'de uzmanlaş