yoklateknik mülakat
GelişimGeçmiş

Frontend React Forms Suspense Mülakat Soruları

75 doğrulanmış Frontend React Forms Suspense 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 Forms SuspenseZorluk 2
function EmailField() {
  return <input type="email" value="[email protected]" />;
}

Kullanıcı bu alanı tarayıcıda düzenlemeye çalışırsa ne olur?
  • aHer tuş vuruşunda normal güncellenir, ama üst component bu yüzden asla yeniden render olmaz.
  • bReact senkron bir render hatası fırlatır ve tüm component ağacı hemen unmount olur.
  • cAlan salt-okunur davranır ve React, eksik onChange handler'ı için dev uyarısı loglar.✓
  • dReact, ilk tuşa basıldığında alanı sessizce uncontrolled input'a çevirir.
Açıklama:value prop'u input'u React tarafından controlled yapar ve yeni bir değeri geri besleyecek bir onChange yoktur, bu yüzden React ne yazılırsa yazılsın gösterilen metni "[email protected]" olarak sabitler — alan fiilen salt-okunurdur. React ayrıca şunu loglar: "You provided a value prop to a form field without an onChange handler. This will render a read-only field." Çözüm: onChange ekle, açıkça readOnly kullan, ya da uncontrolled bir alan için defaultValue'a geç.
React Forms SuspenseZorluk 2
<input value={query} onChange={handleChange} />
// sonraki bir render'da query undefined oluyor

Controlled bir input'un value prop'u tanımlı bir string'ten undefined'a geçince React ne yapar?
  • aInput'u controlled tutmaya devam eder ve undefined'ı sessizce boş string sayar, hiç uyarı vermez.
  • bInput'u uncontrolled'a çevirir ve controlled'dan uncontrolled'a geçişle ilgili dev uyarısı loglar.✓
  • cHemen hata fırlatır ve tüm uygulama ağacının render'ını hiçbir kurtarma yolu olmadan durdurur.
  • dYeni undefined değerini tamamen yok sayar ve öncesinde ne gösteriliyorsa, değişmeden onu göstermeye devam eder.
Açıklama:React şunu loglar: "A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen." Bu noktadan sonra alanın değerini DOM'un kendisi yönetir, React artık onu sürmez — bir component yaşam döngüsü boyunca ya controlled ya uncontrolled kalmalı, ortada geçiş yapmamalı.
React Forms SuspenseZorluk 1
Düz HTML'de bir metin input'unun native change event'i genelde yalnızca değer değiştikten sonra alan focus'unu kaybettiğinde ateşlenir. React'in <input> üzerindeki onChange prop'u hakkında hangi ifade doğrudur?
  • aHer tuş vuruşunda ateşlenir, çünkü React'in onChange'i tarayıcının native input event'ine karşılık gelir.✓
  • bYalnızca blur'da bir kez ateşlenir, tıpkı düz HTML'deki native change event'inin zamanlaması ve davranışıyla aynıdır.
  • cYazma işleminden bağımsız olarak, component mount olduktan hemen sonra tam olarak bir kez ateşlenir.
  • dYalnızca kullanıcı alan focus'luyken Enter tuşuna bastığında ateşlenir.
Açıklama:React'in onChange'i isim olarak HTML attribute'unu taklit eder ama arka planda native input event'ine bağlanır, bu yüzden native bir change dinleyicisi gibi blur'u beklemek yerine her tuş vuruşunda (ve paste, cut gibi durumlarda) ateşlenir. Controlled input state'ini kullanıcı yazarken senkron tutmanın standart yolu bu yüzden onChange'dir.
React Forms SuspenseZorluk 2
function ProfileForm() {
  const [form, setForm] = useState({ name: '', email: '' });

  function handleChange(e) {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  }

  return (
    <>
      <input name="name" value={form.name} onChange={handleChange} />
      <input name="email" value={form.email} onChange={handleChange} />
    </>
  );
}

Bu örüntü, tek bir handleChange fonksiyonunun her iki input'u da doğru şekilde sürmesini neden sağlar?
  • aReact, aynı handler'ı paylaşan herhangi iki kardeş input'u otomatik olarak tek bir state alanında birleştirir.
  • bname attribute'u yalnızca erişilebilirlik etiketleri için kullanılır; asıl yönlendirme input sırasından gelir.
  • ce.target.value, her iki input'un değerlerini içeren bir dizi döner ve setForm bunu konuma göre böler.
  • de.target.name, hangi input'un event'i tetiklediğini belirtir; bu yüzden [name]: value yalnızca o anahtarı günceller.✓
Açıklama:e.target, değişikliği tetikleyen DOM input'udur, bu yüzden e.target.name o alanın name attribute'unu okur. Bunu spread içinde hesaplanmış bir property key olarak ([name]: value) kullanmak, tek bir handler'ın form nesnesindeki tam olarak eşleşen anahtarı güncellemesini, geri kalan state'e dokunmadan sağlar.
React Forms SuspenseZorluk 1
function SearchForm({ onSearch }) {
  function handleSubmit(e) {
    onSearch();
  }
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Search</button>
    </form>
  );
}

Butona tıklamak, onSearch etkisini gösterir gibi görünmeden önce tam bir sayfa yeniden yüklemesine yol açıyor. handleSubmit'te eksik olan nedir?
  • aFormun hiç submit olmaması için buton type="submit" yerine type="button" almalı.
  • be.preventDefault() eksik, bu yüzden tarayıcı varsayılan form submit'ini yapıp sayfayı değiştiriyor.✓
  • cReact'in formun submit event'ini yakalayabilmesi için handleSubmit async olarak tanımlanmalı.
  • dAynı sayfada kalmak için <form> elementinin açıkça bir action="#" attribute'una ihtiyacı var.
Açıklama:Native bir <form>, bir submit butonuna tıklandığında, bir şey bu davranışı iptal etmediği sürece varsayılan olarak submit olur ve sayfayı yeniden yükler. onSubmit handler'ı içinde e.preventDefault() çağırmak tarayıcının varsayılan navigasyonunu durdurur, tek görünür etki olarak onSearch()'ün çalışmasını sağlar.
React Forms SuspenseZorluk 2
function TermsCheckbox() {
  const [accepted, setAccepted] = useState(false);
  return (
    <input
      type="checkbox"
      checked={accepted}
      onChange={e => setAccepted(e.target.value)}
    />
  );
}

İlk tıklamadan sonra kutu işaretli kalıyor ve bir daha asla kaldırılamıyor. Hata nedir?
  • auseState(false) bir checkbox için geçersizdir; bunun yerine boş string ile başlatılmalıdır.
  • bCheckbox'lar React'te controlled component olamaz ve her zaman uncontrolled bırakılmalıdır.
  • cBir checkbox'ın controlled state'i value/e.target.value yerine checked/e.target.checked ile bağlanır.✓
  • dCheckbox ve radio input tiplerinin ikisi için de onChange handler'ının adı her zaman onClick olarak değiştirilmelidir.
Açıklama:Checkbox, boolean checked prop'u ile kontrol edilir ve handler'da e.target.checked okunur. Buradaki handler e.target.value okuyor; checkbox'ta bu, form gönderiminde kullanılan sabit metindir (varsayılan "on") — dolayısıyla ilk tıklamadan sonra accepted truthy "on" metnine dönüşür ve checked={accepted} sonsuza dek true kalır (çalıştırılarak doğrulandı). e.target.checked okumak React'in beklediği boolean'ı verir.

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