yoklateknik mülakat
GelişimGeçmiş

Frontend React Rendering Performance Mülakat Soruları

75 doğrulanmış Frontend React Rendering Performance 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 Rendering PerformanceZorluk 1
React'in zihinsel modelinde, bir component'in "render olması" ile gerçek DOM'un güncellenmesi arasındaki ilişki nedir?
  • aRender olmak ile DOM'u güncellemek aynı adımdır; render fonksiyonunu çağırmak doğrudan sayfaya yazar
  • bRender olmak bellekte UI'ın yeni bir tarifini üretir; React bunu DOM'a dokunmadan önce bir öncekiyle karşılaştırır✓
  • cRender yalnızca bir component'in ömründe bir kez olur, sonraki tüm güncellemeler karşılaştırmasız doğrudan DOM'a gider
  • dÖnce DOM güncellenir, render fonksiyonu ise sonucu state'e geri okumak için sonradan çalışır
Açıklama:Bir component fonksiyonunu çağırmak ("render olmak") yalnızca UI'ın nasıl görünmesi gerektiğini tarif eden bir React element ağacı döndürür. React bu yeni ağacı bir öncekiyle uzlaştırır (reconcile eder) ve gerçek DOM'a yalnızca gerekli değişiklikleri uygular. Render olmak DOM yazımını garanti etmez; üretilen tarif önceki ile aynıysa sayfada hiçbir şey değişmez.
React Rendering PerformanceZorluk 2
Parent, state'inde bir sayaç tutuyor ve her saniye yeniden render oluyor. <Child label="static" /> render ediyor; label hiç değişmiyor ve Child sade bir fonksiyon component (React.memo YOK). Parent her yeniden render olduğunda Child'a ne olur?
  • aKendi prop değeri hiç değişmese bile, Parent her yeniden render olduğunda Child da yeniden render olur✓
  • bProp değeri değişmediği için Child ilk mount'tan sonra bir daha hiç render olmaz
  • cChild yalnızca her saniyelik tik'te, Parent'ın çıktısı aynı göründüğü tik'leri atlayarak render olur
  • dChild yalnızca kendi içinde de bir useState veya useEffect hook'u tanımlarsa render olur
Açıklama:React.memo olmadan bir child, kendisine geçilen prop'lar değişsin ya da değişmesin, parent'ı her yeniden render olduğunda tekrar render olur. React bir alt ağacı yalnızca memo ile sarılmışsa (ya da o component'in kendi state'inde Object.is kontrolüyle bir bailout uygulanıyorsa) atlar. Sade bir component'te böyle bir çıkış yolu yoktur, bu yüzden parent'ıyla birlikte her seferinde yeniden çalışır.
React Rendering PerformanceZorluk 2
const logClick = () => console.log('clicked');

const Row = React.memo(function Row({ onClick }) {
  console.log('Row rendered');
  return <button onClick={onClick}>git</button>;
});

function Parent() {
  const [tick, setTick] = React.useState(0);
  return (
    <div>
      {tick}
      <button onClick={() => setTick(t => t + 1)}>tik</button>
      <Row onClick={logClick} />
    </div>
  );
}

"tik" butonuna tekrar tekrar tıklamak Parent'ı yeniden render ediyor. İlk mount'tan sonra "Row rendered" kaç kez loglanır?
  • aHer tıklamada bir kez, çünkü Parent'ın kendi yeniden render olması Row'u da her seferinde çalıştırmaya zorlar
  • bİlk iki tıklamada loglanır, sonrasında React Row'u çağırmayı bırakır
  • cİlk mount'tan sonra bir daha hiç loglamaz✓
  • dBir tıklama loglanır bir tıklama loglanmaz, Row'u çalıştırmak ile atlamak sırayla değişir
Açıklama:logClick, Parent'ın dışında yalnızca bir kez tanımlanıyor, bu yüzden Row'a her render'da tam olarak aynı fonksiyon referansı geçiliyor. React.memo prop'ların sığ karşılaştırmasını yapar ve onClick render'lar arasında Object.is ile eşit olduğundan (başka prop da olmadığından) Row bailout yapar ve yeniden render olmaz — her tıklamada yalnızca Parent yeniden render olur.
React Rendering PerformanceZorluk 2
const Row = React.memo(function Row({ onClick }) {
  console.log('Row rendered');
  return <button onClick={onClick}>git</button>;
});

function Parent() {
  const [tick, setTick] = React.useState(0);
  return (
    <div>
      {tick}
      <button onClick={() => setTick(t => t + 1)}>tik</button>
      <Row onClick={() => console.log('clicked')} />
    </div>
  );
}

Bu, öncekiyle aynı; tek fark onClick={() => console.log('clicked')} ifadesinin Parent'ın JSX'i içinde inline yazılmış olması. Row'un memoization'ı için ne değişir?
  • aHiçbir şey değişmez; React.memo fonksiyonun davranışını karşılaştırır, referansını değil, bu yüzden Row yine render'ı atlar
  • bRow her tıklamada yeniden render olur, çünkü her render'da yeni bir arrow function oluşur ve onClick referansı hep farklıdır✓
  • cRow yalnızca ilk tıklamada yeniden render olur, sonra React inline fonksiyonu sonsuza dek önbelleğe alır
  • dInline fonksiyon prop'u aldığında React.memo uyarı fırlatır ve Row'u render etmeyi reddeder
Açıklama:Inline bir arrow function ifadesi, Parent'ın her render'ında yepyeni bir fonksiyon nesnesi oluşturur. React.memo'nun sığ prop karşılaştırması referans eşitliği kullanır ve kodu aynı olsa bile iki farklı fonksiyon nesnesi asla eşit sayılmaz. Bu yüzden onClick prop'u her render'da "değişmiş" kabul edilir ve Row her seferinde yeniden render olur — memo'nun sessizce etkisiz kaldığı klasik durum budur.
React Rendering PerformanceZorluk 2
Önceki örneğe devam edelim (inline onClick, Row'un memoization'ını etkisiz kılıyordu): hâlâ bir click handler'ı prop olarak geçerken, render atlama davranışını geri getiren Parent değişikliği hangisidir?
  • aRow'dan React.memo'yu tamamen kaldırıp tekrar eden log mesajını React'in kendisinin fark etmesine güvenmek
  • bconsole.log('clicked') çağrısını Row'un içine taşımak, böylece Parent'ın fonksiyon geçmesine gerek kalmasın
  • cArrow function'ı, JSX içinde her seferinde yeni oluşturulan bağlı (bound) bir metotla değiştirmek, örn. onClick={handleClick.bind(null)}
  • dHandler'ı useCallback(() => console.log('clicked'), []) ile sarmalayıp bu sabit referansı onClick olarak geçirmek✓
Açıklama:Boş bağımlılık dizisiyle useCallback, listelenen bir bağımlılık değişene kadar render'lar arasında tam olarak aynı fonksiyon referansını döndürür. Bu sabit referansı onClick olarak geçmek, prop'un her Parent render'ında Object.is ile eşit olması demektir; böylece React.memo'nun sığ karşılaştırması bir değişiklik görmez ve Row yeniden render'ı yine atlar.
React Rendering PerformanceZorluk 2
function Report({ rows, filterText }) {
  const filtered = React.useMemo(
    () => rows.filter(r => r.name.includes(filterText)),
    [rows, filterText]
  );
  const [theme, setTheme] = React.useState('light');
  return (
    <div>
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>{theme}</button>
      <ul>{filtered.map(r => <li key={r.id}>{r.name}</li>)}</ul>
    </div>
  );
}

Tema butonuna tıklamak Report'u yeniden render ediyor ama rows ve filterText değişmiyor. Bu yeniden render'da useMemo ne yapar?
  • aİki bağımlılık da değişmediği için rows.filter(...)'ı tekrar çalıştırmadan önbelleğe alınmış filtered dizisini döner✓
  • bBağımlılık dizisinden bağımsız olarak Report her yeniden render olduğunda rows.filter(...)'ı yeniden çalıştırır
  • ctheme hesaplamayla ilgisiz olsa bile bağımlılık dizisinde listelenmediği için hata fırlatır
  • drows veya filterText değişene kadar <ul>'un render edilmesini tamamen atlar
Açıklama:useMemo, fonksiyonunu yalnızca bağımlılık dizisindeki bir değer (bir önceki render'a göre Object.is ile karşılaştırılarak) değiştiğinde yeniden çalıştırır. Burada rows ve filterText değişmediği için React filtrelemeyi tekrar çalıştırmayı atlar ve bir önceki render'dan gelen önbelleğe alınmış diziyi doğrudan döner — ilgisiz bir theme state'i değişti diye yeniden filtreleme maliyetinden kaçınılır.

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