0Pricing
React Academy · Ders

StrictMode Ne Yapar

Geliştirme sırasında çift çağrıyı ve kullanımdan kaldırılmış API uyarılarını anlayın.

StrictMode Ne Yapar, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste React.StrictMode'un geliştirme ortamında ne yaptığını, hangi uyarıları ortaya çıkardığını ve daha güvenli React kodu yazmanıza nasıl yardımcı olduğunu öğreneceksiniz.

StrictMode Nedir

StrictMode, ağacınızın bir bölümünü saran ve **yalnızca geliştirme ortamında** ek kontroller etkinleştiren özel bir React bileşenidir. Üretim derlemesi üzerinde hiçbir etkisi yoktur.
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Yaşam Döngüsünün İki Kez Çağrılması

Katı Modda React, geliştirme ortamında bileşen işlevinizi ve bazı yaşam döngüsü yöntemlerini kasıtlı olarak **iki kez** çağırır. Bu, düzgün şekilde temizlenmeyen yan etkileri ortaya çıkarmak için tasarlanmıştır.

Neden İki Kez Çağrılıyor

React 18+, gelecekte bileşenleri yeniden bağlayabilir (örneğin hızlı yenileme ve ekran dışı API için). Geliştirme ortamında iki kez çağırma, bunu taklit ederek birikerek çoğalan abonelikler veya iki kez çalışan DOM değişiklikleri gibi hataları fark etmenizi sağlar.

Effect Bağlama–Kaldırma–Yeniden Bağlama

React 18'de StrictMode kullanıldığında her useEffect ilk bağlamada çalışır, temizlenir ve tekrar çalışır. Temizleme işleviniz doğruysa bu iki kez çalışma zararsızdır. Uygulamanız bozuluyorsa temizleme eksik veya hatalıdır.
useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id); // cleanup required!
}, []);

Kullanımdan Kaldırılmış API'leri Algılama

Kodunuz `componentWillMount`, `componentWillReceiveProps` ve dize referansları gibi kullanımdan kaldırılmış React API'lerini kullandığında StrictMode uyarı verir. Bu uyarılar tarayıcı konsolunda sarı uyarılar olarak görünür.

Eski Bağlam API'si Uyarısı

Herhangi bir üçüncü taraf kitaplık eski bağlam API'sini (`childContextTypes` / `getChildContext`) kullanıyorsa StrictMode uyarı verir. Bu, kitaplığın modern `React.createContext` API'sini kullanacak şekilde güncellenmesi gerektiğini gösterir.

Mevcut Uygulamalarda Etkinleştirmek Güvenlidir

Mevcut bir uygulamada StrictMode'u kademeli olarak etkinleştirmek için bileşen ağacınızın yalnızca bir bölümünü sarabilirsiniz. Yeni bölümlerle başlayın ve uyarıları düzelttikçe kapsamı genişletin.
function App() {
  return (
    <>
      <LegacyPart />  {/* not wrapped */}
      <StrictMode>
        <NewFeature />
      </StrictMode>
    </>
  );
}

Görsel Fark Yok

StrictMode görünür bir kullanıcı arayüzü oluşturmaz. Bu, tamamen bir geliştirme aracıdır. DOM içinde ek öğeler görmezsiniz — yalnızca ek konsol uyarıları ve iki kez çağrılma davranışı görünür.

İlk Günden Etkinleştirin

En iyi uygulama, StrictMode'u bir projenin en başından etkinleştirmektir. İki kez çağrılma sorunlarını erkenden düzeltmek, kod tabanı büyüdüğünde bunları keşfetmekten çok daha az maliyetlidir.

Hızlı Kontrol

React StrictMode'un bileşen işlevlerini iki kez çağırmasının amacı nedir?

Özet

StrictMode, saf olmayan kodu yakalamak için render işlemlerini ve etkileri iki kez çağıran, kullanımı ek maliyet oluşturmayan bir geliştirme aracıdır. Ayrıca kullanımdan kaldırılmış API'ler hakkında uyarı verir ve uygulamanızı gelecekteki React özelliklerine hazırlar.

Sırada

Sonraki ders: **Saf Bileşenler ve Render Sırasında Yan Etkilerden Kaçınma** — değişikliklerden ve dış okumalarından arındırılmış render işlevleri yazmayı öğreneceksiniz.

Sıkça Sorulan Sorular

“StrictMode Ne Yapar” dersi ücretsiz mi?

Evet — “StrictMode Ne Yapar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“StrictMode Ne Yapar” dersinde ne öğreneceğim?

Geliştirme sırasında çift çağrıyı ve kullanımdan kaldırılmış API uyarılarını anlayın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“StrictMode Ne Yapar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. StrictMode Ne Yapar
  2. Saf Bileşenler ve Oluşturma Sırasında Yan Etkilerden Kaçınma
  3. Key ve Ref için En İyi Uygulamalar
  4. Klasör Yapısı ve Adlandırma Kuralları
← React Academy Sayfasına Dön