<StrictMode> geliştirmeleriniz sırasında bileşenlerinizdeki genel hataları erkenden bulmanızı sağlar.

<StrictMode>
  <App />
</StrictMode>

Referans

<StrictMode>

StrictMode’unu bileşen ağaçları içinde ek geliştirme davranışları ve uyarılar için kullanınız:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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

Daha fazla örnek için aşağıya bakınız.

Strict Modu aşağıdaki geliştirici davranışlarını etkinleştirir:

Prop’lar

StrictMode herhangi bir prop kabul etmez.

Uyarılar

  • <StrictMode> ile sarılmış ağaçta Strict Modundan çıkmanın bir yolu yoktur. Bu size <StrictMode>’un altındaki tüm bileşenlerinizin kontrol edildiğinin güvencesini verir. Bir ürün üzerinde çalışan iki takım kontrolleri değerli bulup bulmadığı konusunda anlaşamazsa, uzlaşmak zorundalar ya da <StrictMode> etiketini ağaçta aşağı doğru taşımaları gerekir.

Kullanım

Strict Modunu tüm uygulamada etkinleştirme

Strict Modu, <StrictMode> bileşeni altındaki tüm bileşenler için yalnızca geliştirme amaçlı ekstra kontroller sağlar. Bu kontroller, bileşenlerinizdeki hataları erkenden bulmanıza yardımcı olur.

Tüm projenizde Strict Modu etkilenştirmek için, render sırasında kök bileşeninizi <StrictMode> bileşeni ile sarın.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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

Özellikle yeni yaratılmış uygulamalarınızda, tüm uygulamayı Strict Modu ile sarmanızı öneririz. Sizin yerinize createRoot’u çağıran bir çatı ile çalışıyorsanız, Strict Modun nasıl etkileştirileceğine çatının dokümantasyonundan bakabilirsiniz.

Strict Mod kontrolleri yalnızca geliştirme aşamasında çalıştırılsa da size kodunuzda zaten var olan ancak üretim ortamında güvenilir bir şekilde tekrarlanması zor olabilen hataları bulmada yardımcı olurlar. Strict Modu, kullanıcılar farketmeden önce hataları bulmanızı sağlar.

Not

Strict Modu geliştirme sırasında aşağıdaki kontrolleri etkinleştirir:

Tüm bu kontroller yalnızca geliştirme sırasında çalıştırılar ve canlıda herhangi bir etkisi yoktur.

Strict Modu uygulamanın bir parçası için etkinleştirme

Strict Modu uygulamanızın herhangi bir parçası için de etkinleştirebilirsiniz:

import { StrictMode } from 'react';

function App() {
  return (
    <>
      <Header />
      <StrictMode>
        <main>
          <Sidebar />
          <Content />
        </main>
      </StrictMode>
      <Footer />
    </>
  );
}

Örnekte gösterildiği üzere, Strict Modu Header ve Footer bileşenlerinde çalışmayacaktır. Ancak Sidebar ve Content bileşenleri ve bu bileşenler içindeki alt bileşenlerde, ne kadar derin olduğu farketmeksizin, çalışacaktır.

Geliştirme sırasında çift renderda bulunan hataları düzeltme

React yazdığınız her bileşeni saf fonksiyon olarak kabul eder. Bu, yazdığınız bileşenlerin aynı girdiler (proplar, durum ve bağlam) verildiğinde her zaman aynı JSX’i döndürmesi gerektiği anlamına gelir.

Bu kuralı çiğneyen bileşenler öngörülemeyecek şekilde davranırlar ve hatalara sebep olur. Saf olmayan kodları bulmanıza yardımcı olmak için, Strict Modu bazı fonksiyonlarınınızı (sadece saf olması gerekenleri) geliştirme sırasında iki kez çağırır. Bu durum aşağıdakileri içerir:

Eğer saf bir fonksiyonsa, iki kez çalıştırmak hiçbir şeyi değiştirmez çünkü saf fonksiyonlar her zaman aynı sonucu üretir. Ancak, saf olmayan bir fonksiyonsa (örneğin, aldığı veriyi değiştiriyorsa), iki kez çalıştırmak farkedilir olma eğilimindedir (zaten bu sebepten saf değil) Bu durum hatayı erkenden farketmenize ve çözmenize yardımcı olur.

Strict Modunda iki kez render etmenin hataları erkenden nasıl bulduğuna dair bir örnek:

Aşağıdaki StoryTray bileşeni bir stories dizisini alır ve sonuna “Create Story” elemanını ekler:

export default function StoryTray({ stories }) {
  const items = stories;
  items.push({ id: 'create', label: 'Hikaye Oluştur' });
  return (
    <ul>
      {items.map(story => (
        <li key={story.id}>
          {story.label}
        </li>
      ))}
    </ul>
  );
}

Yukardaki kodda ilk çıktı doğru olduğu için gözden kaçırmanın çok kolay olduğu bir hata bulunmaktadır.

Bu hata StoryTray bileşeni birden fazla kez render edilirse daha çok göze çarpar. Örneğin, StoryTray’i imleç ile üzerine geldiğinizde arka plan rengi değişecek şekilde yeniden render edelim:

import { useState } from 'react';

export default function StoryTray({ stories }) {
  const [isHover, setIsHover] = useState(false);
  const items = stories;
  items.push({ id: 'create', label: 'Hikaye Oluştur' });
  return (
    <ul
      onPointerEnter={() => setIsHover(true)}
      onPointerLeave={() => setIsHover(false)}
      style={{
        backgroundColor: isHover ? '#ddd' : '#fff'
      }}
    >
      {items.map(story => (
        <li key={story.id}>
          {story.label}
        </li>
      ))}
    </ul>
  );
}

StoryTray bileşeninin üzerine her gelişinizde listeye “Create Story” eklediğini göreceksiniz. Kodun asıl amacı listenin sonuna bir kez eklemesiydi. Ancak StoryTray, stories dizisini proplar aracılığıyla değiştiriyor. StoryTray her render edildiğinde, aynı diziye “Create Story“‘i ekliyor. Yani başka bir deyişle, StoryTray birden fazla kez çalıştırıldığında farklı sonuçlar ürettiği için saf bir fonksiyon değil.

Bu sorunu çözmek için, dizinin bir kopyasını oluşturabilirsiniz ve asıl dizi yerine bu kopyayı güncelleyebilirsiniz:

export default function StoryTray({ stories }) {
  const items = stories.slice(); // diziyi kopyalayın
  // ✅ İyi: yeni dizinin içine atın
  items.push({ id: 'create', label: 'Hikaye Oluştur' });

Bu değişiklik StoryTray fonksiyonunu saflaştıracaktır. Fonksiyon her çağırıldığında, sadece kopyalanmış diziyi değiştirecek ve diğer nesne ve değişkenleri etkilemeyecektir. Bu, sorunu çözer, ancak bileşenin davranışında bir sorun olduğunu farketmeden önce bileşeni daha çok yeniden render etmeniz gerekti.

Asıl örnekte, hata göze batmıyordu. Şimdi orijinal (hatalı) kodu <StrictMode> ile saralım:

export default function StoryTray({ stories }) {
  const items = stories;
  items.push({ id: 'create', label: 'Hikaye Oluştur' });
  return (
    <ul>
      {items.map(story => (
        <li key={story.id}>
          {story.label}
        </li>
      ))}
    </ul>
  );
}

Strict Modu her zaman render fonksiyonlarınızı iki kez çağırır, bu sayede hatayı direkt olarak görebilirsiniz (“Create Story” iki kez eklendi). Bu, hatayı daha erken farketmenizi sağladı. Bileşeninizdeki hataları düzeltirken, Strict Modunda render ederseniz, imleç ile bileşen üzerine gelme işlevselliğinde olduğu gibi oluşabilecek diğer hataları düzeltirsiniz:

import { useState } from 'react';

export default function StoryTray({ stories }) {
  const [isHover, setIsHover] = useState(false);
  const items = stories.slice(); // Diziyi kopyala
  items.push({ id: 'create', label: 'Hikaye Oluştur' });
  return (
    <ul
      onPointerEnter={() => setIsHover(true)}
      onPointerLeave={() => setIsHover(false)}
      style={{
        backgroundColor: isHover ? '#ddd' : '#fff'
      }}
    >
      {items.map(story => (
        <li key={story.id}>
          {story.label}
        </li>
      ))}
    </ul>
  );
}

StrictModu olmadan, yeniden render sayısını arttırana kadar hataları gözden kaçırmanız çok kolaydır. Strict Modu aynı hatayı hemen gösterir. Strict Modu kodlarınızı takımınıza ya da kullanıcılarınza göndermenden önce hataları bulmanıza yardımcı olur.

Bileşenleri saflaştırmak için daha fazlasına göz atın.

Not

React DevTools yüklüyse, herhangi bir console.log çağrısı ikinci renderdan sonra yavaşça soluklaşmaya başlayacaktır. Ayrıca React Devtools tamamını göz ardı edecek ayara (varsayılan olarak kapalı) sahiptir.

Efektlerin yeniden çalıştırılması sırasında tespit edilen hataları giderme

Strict Modu, Efektler’de oluşan hataları da bulmanıza yardımcı olur.

Her Efekt, kurulum kodları ve bazı temizleme kodlarına sahiptir. Normalde, React bileşen DOM’a eklenirken kurulum kodlarını çağırır ve bileşen DOM’dan silinirken (ekrandan kaldırılır) temizleme kodlarını çağırır. Daha sonra React, bağımlılıklar son renderdan itibaren değiştiyse temizleme ve kurulum kodlarını yeniden çağırır.

Ayrıca React, Strict Modun aktifken her Efekt için geliştirme sırasında ekstra bir kurulum+temizleme döngüsüne girecektir. Şaşırtıcı olabilir ancak bu durum göze çarpmayan yakalaması zor hataları ortaya çıkarır.

Strict Modunda Efektlerin yeniden çalışmasıyla hataların erkenden tespit edilmesiyle ilgili bir örnek

Bir bileşeni sohbete bağlayan bu örneği ele alalım:

import { createRoot } from 'react-dom/client';
import './styles.css';

import App from './App';

const root = createRoot(document.getElementById("root"));
root.render(<App />);

Hemen göze çarpmasa da yukarıdaki kodda bir hata var.

Hatayı daha bariz yapmak için bazı özellikler ekleyelim. Aşağıdaki örnekte, roomId sabit olarak ayarlanmış. Bunun yerine, kullanıcı açılır listeler ile bağlanmak istedikleri roomId’yi kendileri seçebilmeleri gerekiyor. “Sohbeti aç“‘a tıklayın ve farklı sohbet odalarını tek tek seçin. Konsoldaki aktif bağlantı sayısını takip edin:

import { createRoot } from 'react-dom/client';
import './styles.css';

import App from './App';

const root = createRoot(document.getElementById("root"));
root.render(<App />);

Açık olan bağlantı sayısının sürekli arttığını göreceksiniz. Bu durum gerçek bir uygulamada, performans ve internet sorunlarına yol açacaktır. Buradaki sorun Efektinizde temizleme fonksiyonu eksik:

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);

Efektiniz artık kendi kendini “temizlediği” ve süresi dolan bağlantıları kestiği için, sızıntı çözüldü. Ancak bu sorun birden fazla özellik (seçim kutusu) ekleyene kadar göze çarpmamıştı

Asıl örnekte, hata göze batmıyordu. Şimdi orijinal (hatalı) kodu <StrictMode> ile saralım:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';

import App from './App';

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Strict Modu ile sorun olduğunu hemen farkedersiniz (aktif bağlantı sayısı 2ye çıktı). Strict Modu, her Efekt için fazladan kurulum+temizleme döngüsü başlatır. Bu Efektin temizlik mantığı yok o yüzden de fazladan bağlantı oluşturabiliyor ancak bağlantıyı kesmiyor. Bu, temizleme fonksiyonunu unuttuğunuza dair bir ipucu.

Strict Modu bunun gibi hataları daha erken farketmenizi sağlar. Efektinizi, Strict Modunda temizleme fonksiyonu ekleyerek düzelttiğinizde, seçim kutusunda olduğu gibi oluşabilecek diğer hataları düzeltirsiniz:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';

import App from './App';

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Konsoldaki aktif bağlantı sayısının artık artmadığını farkettiniz mi?

Strict Modu olmadan, Efektinizde temizleme işlevinin eksik olduğunu gözden kaçırmanız çok kolay. Strict Modu, geliştirme aşamasındaki Efektiniz için kurulum yerine kurulum → temizleme → kurulum adımlarını çalıştırarak, eksik olan temizleme adımının eksik olduğunu gösterdi.

Efekt temizleme işlevini uygulama hakkında daha fazla bilgi edinin.

Strict Modunda kullanımdan kaldırılan özelliklerle ilgili hataların düzeltilmesi

React, <StrictMode> içindeki herhangi bir bileşende aşağıdaki kullanımdan kaldırılan API’lardan biri kullanılıyorsa sizi uyarır:

Bu API’lar özellikle eski sınıf bileşenlerinde kullanılırdı o yüzden güncel uygulamalarda nadiren karşınıza çıkar.

Previous<Profiler>
Next<Suspense>

How do you like these docs?