yoklateknik mülakat
GelişimGeçmiş

Frontend React Effects Lifecycle Mülakat Soruları

75 doğrulanmış Frontend React Effects Lifecycle mülakat sorusu — cevaplarıyla çöz, açıklamalarıyla öğren, gerçek simülasyonda kendini test et.

Gerçek simülasyonu dene →

Örnek sorular

React Effects LifecycleZorluk 1
React'te useEffect'e verdiğin fonksiyon, component'in render'ına göre gerçekte NE ZAMAN çalışır?
  • aRender sırasında senkron olarak, JSX return edilmeden önce
  • bReact render'ı ekrana commit ettikten sonra✓
  • cYalnızca parent component yeniden render olduğunda
  • dRender fonksiyonu çalışmadan önce
Açıklama:useEffect, callback'ini tarayıcı commit edilen render'ı boyadıktan SONRA çalışacak şekilde zamanlar — effect, bitmiş bir render'a tepki veren iş içindir (subscription, veri çekme, React dışındaki bir şeyle senkronize olma), render edilecek şeyi HESAPLAMAK için değil. (a) render-zamanlı bir mantığı tarif eder, effect değil. (c) yanlıştır çünkü component'in kendi render'ı da kendi effect'lerini zamanlar. (d) sırayı tamamen tersine çevirir.
React Effects LifecycleZorluk 1
useEffect(fn), useEffect(fn, []) ve useEffect(fn, [a, b]) aynı fn'i alır ama farklı davranır. Doğru özet hangisi?
  • aÜçü de yalnızca bir kez, mount'tan hemen sonra çalışır
  • bDizi yalnızca cleanup zamanlamasını etkiler, effect'in yeniden çalışıp çalışmayacağını değil
  • cDizi yok: her render; []: yalnızca mount sonrası; [a, b]: a veya b değişince✓
  • d[a, b], a veya b var olduğu her render'da yeniden çalışır
Açıklama:Bağımlılık dizisi, React'in render'lar arasında karşılaştırıp effect'i yeniden çalıştırıp çalıştırmayacağına karar verdiği şeydir: dizi yok → her zaman yeniden çalışır, [] → hiçbir şeyle karşılaştırır, yani yalnızca mount sonrası çalışır, [a, b] → listelenen değerlerden en az biri önceki render'dan farklıysa yeniden çalışır. Cleanup zamanlaması da effect'in kendisiyle aynı takvimi izler, bu yüzden (b) yanlıştır; (d) ise 'değerler var olması' ile 'değerlerin değişmesi'ni karıştırır.
React Effects LifecycleZorluk 1
function Ticker() {
  const [n, setN] = useState(0);

  useEffect(() => {
    console.log('effect calisti');
  });

  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

İlk mount'tan sonra butona 3 kez tıklanıyor. 'effect calisti' toplam kaç kez loglanır?
  • a1 — dizisiz effect'ler varsayılan olarak mount-only sayılır
  • b2 — biri mount için, biri de tüm tıklamalar için topluca
  • c3 — tıklama başına bir, mount sayılmaz
  • d4 — mount sonrası bir, 3 yeniden render'ın her birinden sonra bir✓
Açıklama:Hiç bağımlılık dizisi vermemek 'atlanacak bir karşılaştırma yok' demektir, bu yüzden effect her commit'ten sonra yeniden çalışır — ilk mount artı sonraki 3 yeniden render, toplamda 4 eder. (a) gerçek kuralı tersine çevirir (dizi olmaması en SEYREK değil en SIK çalışan durumdur). (c) mount'u yanlışlıkla dışarıda bırakır, oysa mount'un kendisi de bir commit'tir.
React Effects LifecycleZorluk 2
function Panel({ title }) {
  useEffect(() => {
    console.log('mount oldu, title:', title);
  }, []);

  return <h2>{title}</h2>;
}

Parent, Panel'i her seferinde farklı bir title prop'u vererek 3 kez daha yeniden render ediyor. Ne loglanır?
  • aYalnızca tek satır, ilk mount sonrası, ilk title değeriyle✓
  • bDört satır, mount ve üç prop değişikliğinin her biri için
  • cÜç satır, her prop değişikliği için; mount atlanır
  • dSıfır satır, [] effect'i tamamen devre dışı bırakır
Açıklama:Boş bağımlılık dizisi, React'in sonraki her render'da 'hiçbir şey değişmedi' diye karşılaştırma yapması demektir; bu yüzden effect gövdesi — o ilk render'ın closure'ında yakalanan title değeri dahil — yalnızca mount sonrasında bir kez çalışır. Sonraki prop değişiklikleri onu tekrar tetiklemez, dolayısıyla loglanan title başlangıç değerinde donmuş kalır. (d) 'bir kez çalışır' ile 'hiç çalışmaz'ı karıştırır.
React Effects LifecycleZorluk 2
function Profile({ userId }) {
  const [tab, setTab] = useState('posts');

  useEffect(() => {
    console.log('kullanici cekiliyor', userId);
  }, [userId]);

  return (
    <button onClick={() => setTab(tab === 'posts' ? 'about' : 'posts')}>
      {tab}
    </button>
  );
}

Kullanıcı butona 5 kez tıklıyor (yalnızca tab değişiyor, userId prop değeri boyunca aynı kalıyor). Bu 5 tıklama sırasında 'kullanici cekiliyor' kaç kez loglanır?
  • a5 kez, herhangi bir state/prop güncellemesi her effect'i yeniden çalıştırır
  • b0 kez, boş olmayan bağımlılıklı effect'ler mount sonrası asla ateşlenmez
  • c0 kez, userId bu tıklamalar boyunca hiç değişmez✓
  • d1 kez, 5 tıklama tek bir effect koşusuna batch'lenir
Açıklama:React bir effect'i yalnızca kendi bağımlılık dizisindeki bir değer önceki render'dan farklıysa yeniden çalıştırır; tab listede yok, bu yüzden tab'ın değişmesi -- yeniden render'a yol açsa da -- bu spesifik effect için önemsizdir. userId hiç değişmediğinden effect basitçe yeniden çalışmaz — devre dışı olduğu için değil (b yanlış) ve batching yüzünden de değil (d, state güncellemelerine uygulanan bir kavramı effect zamanlamasına yanlış uyguluyor).
React Effects LifecycleZorluk 2
function Room({ roomId }) {
  useEffect(() => {
    console.log('baglaniliyor', roomId);
    return () => console.log('baglanti kesiliyor', roomId);
  }, [roomId]);

  return null;
}

roomId 'a''dan 'b''ye geçiyor (bir yeniden render) ve sonra component unmount oluyor. Dört console satırı hangi sırayla görünür?
  • abaglaniliyor a, baglaniliyor b, kesiliyor a, kesiliyor b
  • bbaglaniliyor a, kesiliyor a, baglaniliyor b, kesiliyor b✓
  • cbaglaniliyor a, baglaniliyor b, kesiliyor b, kesiliyor a
  • dkesiliyor a, baglaniliyor a, kesiliyor b, baglaniliyor b
Açıklama:React, değişen bir bağımlılık için effect'i tekrar çalıştırmadan önce ÖNCE önceki koşunun döndürdüğü cleanup'ı çağırır — yani değişen bir bağımlılık için sıra her zaman eski-bağlan, eski-kes, yeni-bağlan ve nihayetinde unmount'ta yeni-kes şeklindedir. Bu da baglaniliyor a, kesiliyor a, baglaniliyor b, kesiliyor b sırasını verir, yani (b).

Uzmanlığa göre

Angular 450JavaScript 450React 450TypeScript 450Vue 450

Kıdeme göre

Frontend JuniorFrontend MidFrontend Senior

Diğer alanlar

BackendFullstackDevOps / CloudAI EngineerVeritabanıMobilGüvenlikQA / Test OtomasyonuData EngineerOyun GeliştirmeML Engineer

2925 soruluk Frontend bankasında kendini sına.

Mülakata başla