yoklateknik mülakat
GelişimGeçmiş

Frontend React Hooks State Mülakat Soruları

75 doğrulanmış Frontend React Hooks State 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 Hooks StateZorluk 2
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => {
      setCount(count + 1);
      setCount(count + 1);
    }}>{count}</button>
  );
}

count = 0 iken butona bir kez tıklanıyor. Tıklamadan sonra ekranda ne görünür?
  • a1✓
  • b2
  • cNaN
  • d0, değişmez
Açıklama:Her iki çağrı da count'u aynı render'ın snapshot'ından okur; bu değer tüm event boyunca 0'dır. Yani her iki çağrı da aslında setCount(0 + 1)'dir; React aralarında fonksiyon gövdesini yeniden çalıştırmaz, sadece aynı yerine-koyma değerini iki kez planlar. Sonuç 2 değil 1'dir. Her çağrının bir öncekinin üzerine inşa edilmesini sağlayan şey updater-fonksiyon formudur (c => c + 1).
React Hooks StateZorluk 2
function ScoreBoard() {
  const [score, setScore] = useState(0);
  const handleClick = () => {
    setTimeout(() => setScore(s => s + 1), 0);
    setTimeout(() => setScore(s => s + 1), 0);
  };
  return <button onClick={handleClick}>{score}</button>;
}

score = 0 iken butona bir kez tıklanıyor. Her iki setTimeout callback'i de çalıştıktan sonra ekranda ne görünür?
  • a1
  • b2✓
  • cNaN
  • d0, değişmez
Açıklama:Her setTimeout callback'i daha sonra, event loop'un kendi turunda çalışır — bu sırada handleClick'in score üzerindeki closure'ı çoktan bayatlamıştır. Her çağrı updater formunu (s => s + 1) kullandığından, React bunu handleClick tanımlanırken yakalanan score değişkenine değil, callback çalıştığı anda en güncel state ne ise ona uygular — bu yüzden ilk callback 0'ı 1'e çevirir, ikincisi de bu 1'i 2'ye çevirir. Bunlar yerine doğrudan dış score'u okusaydı (setScore(score + 1)), her iki callback de aynı bayat 0'ı yakalardı ve sonuç yanlış biçimde 1'de kalırdı. React 19'da (jsdom) doğrulandı: mount sonrası buton 0 gösteriyor; tıklanıp her iki timeout da çalıştıktan sonra 2 gösteriyor.
React Hooks StateZorluk 2
Bir butonun click handler'ı sayacı güvenilir biçimde 1 artırmalı, ancak bazen artırma mantığı aynı event içinde birden fazla kez çağrılabiliyor (ör. paylaşılan bir yardımcı fonksiyon iki kez tetikleniyor). Artırmalardan birinin kaybolmasını hangi pratik önler?
  • aHer seferinde dış kapsamdaki count değişkenine dayanarak setCount(count + 1)'i tekrar tekrar çağırmak
  • bcount state'ini tamamen kaldırıp yerine modül seviyesinde düz bir değişken kullanmak
  • cHer çağrı için updater-fonksiyon formunu, setCount(c => c + 1), kullanmak✓
  • dHer artırmadan sonra component'i yeniden mount edip state'i sıfırdan başlatmak
Açıklama:Updater formu her zaman en son sıraya konmuş değer üzerinden çalışır, bu yüzden aynı event içinde birden fazla çağrı üst üste doğru şekilde birikir. Dış kapsamdaki count değişkenini tekrar tekrar okumak aynı render'ın snapshot'ını yeniden kullanır ve güncellemelerden birini sessizce kaybeder — bu pratiğin önlediği bug tam olarak budur.
React Hooks StateZorluk 2
function Page() {
  const [data] = useState(computeExpensiveDefault());
  return <div>{data}</div>;
}

Page, parent'ı yeniden render olduğu için 3 kez yeniden render edilirse, computeExpensiveDefault() fiilen kaç kez çalışır?
  • aYalnızca bir kez, ilk render'da
  • bHiç çalışmaz, React argüman ifadesini otomatik olarak cache'ler
  • cYalnızca bir kez, son render'da
  • dHer render'da bir kez, toplam 3 kez✓
Açıklama:computeExpensiveDefault(), argüman konumunda duran sıradan bir JavaScript ifadesidir; JavaScript bunu, useState'in sonucu kullanıp kullanmayacağından bağımsız olarak, component fonksiyonu her çalıştığında değerlendirir. useState değeri yalnızca ilk render'da KULLANIR ve sonrakilerde sonucu atar — ama bu, ifadenin bizzat değerlendirilmesini durdurmaz. Lazy init'in, useState(() => computeExpensiveDefault())'un, var olma sebebi tam olarak budur.
React Hooks StateZorluk 1
Component'in ilk render'ında başlangıç state'ini üretmek için tam olarak bir kez çalışması gereken pahalı bir hesaplaman var. Doğru useState kullanımı hangisi?
  • auseState(() => computeExpensiveDefault())✓
  • buseState(computeExpensiveDefault())
  • cuseState(useMemo(computeExpensiveDefault))
  • duseState(null) yazıp bir useEffect içinde setState çağırmak
Açıklama:useState'e bir fonksiyon geçmek lazy-initializer formudur: React bu fonksiyonu yalnızca ilk render'da çağırıp başlangıç değerini hesaplar, sonraki render'larda bir daha çağırmaz. Zaten çağrılmış sonucu geçmek (b) ise, değer atılsa bile pahalı çağrının her render'da değerlendirilmesine yol açar.
React Hooks StateZorluk 1
const [value, setValue] = useState(initialValue); satırında, initialValue state'i ayarlamak için fiilen hangi render'da/render'larda kullanılır?
  • aHer render'da yeniden değerlendirilip state'e atanır
  • bYalnızca component'in ilk render'ında✓
  • cYalnızca component unmount olduğunda
  • dYalnızca initialValue bir prop'tan türetilmişse
Açıklama:React, useState'e geçilen argümanı yalnızca belirli bir component instance'ı için bu hook çağrısı ilk çalıştığında okur; sonraki her render'da useState saklanan state'i döndürür ve argüman konumunda o an ne ifade duruyorsa onu yok sayar.

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