React 18 Features (Concurrent React, Automatic Batching, Transitions)

React 18, React'ın aynı anda birden fazla UI sürümünü hazırlamasını sağlayan yeni bir eşzamanlılık temelini tanıttı. Bu, açılıp kapanan bir "mod" değil, daha ziyade yeni özelliklere ve API'lere güç veren yeni bir dahili mekanizma setidir. Temel amaç, yoğun işleme görevleri sırasında bile UI'ı duyarlı tutarak kullanıcı deneyimini iyileştirmektir.

* Eşzamanlı React (Concurrent React): Temelinde, Eşzamanlı React, React'ın render işini kesintiye uğratmasına, duraklatmasına, devam ettirmesine ve hatta iptal etmesine olanak tanır. Daha önce, render işlemi tek, kesintisiz, senkron bir görevdi. Büyük bir güncelleme başladığında, tamamlanana kadar ana iş parçacığını bloke eder ve "donmuş" bir UI'ya yol açardı. Eşzamanlılık ile React, acil güncellemeleri (örneğin, yazma girişi) acil olmayanlardan (örneğin, arama sonuçlarını getirme) daha öncelikli hale getirebilir, bu da uygulamanın daha hızlı ve akıcı hissetmesini sağlar.

* Yeni Kök API'si (`createRoot`): React 18'in yeni eşzamanlı özelliklerini kullanabilmek için uygulamaların `ReactDOM.render` yerine `ReactDOM.createRoot` kullanmaya geçmesi gerekir. Bu yeni API, uygulamanızı yeni eşzamanlı renderleyiciyi kullanacak şekilde yapılandırır.
```javascript
// React 18 öncesi
// import ReactDOM from 'react-dom';
// ReactDOM.render(<App />, document.getElementById('root'));

// React 18
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
```

* Otomatik Gruplama (Automatic Batching): React 18, React olay işleyicilerinin dışında bile (örneğin, promise'larda, `setTimeout`'ta veya yerel olay işleyicilerinde) birden fazla durum güncellemesini otomatik olarak tek bir yeniden render işleminde gruplar. Bu, gereksiz yeniden render işlemlerini önemli ölçüde azaltır ve performansı kutudan çıktığı gibi artırır.
```javascript
// React 18 öncesi, sadece onClick gruplandırırdı.
// fetchSomething().then(() => {
// setCount(c => c + 1); // Yeniden Render
// setIsLoading(false); // Yeniden Render
// });

// React 18 ile her iki güncelleme de tek bir yeniden render işleminde gruplandırılır.
// fetchSomething().then(() => {
// setCount(c => c + 1);
// setIsLoading(false);
// });
```

* Geçişler (`useTransition` ve `startTransition`):
* Konsept: Geçişler, belirli durum güncellemelerini "acil olmayan" olarak işaretlemenize olanak tanır. React daha sonra acil güncellemeleri (örneğin, kullanıcı girişi) bu acil olmayan geçişlerden daha öncelikli hale getirir. Bir geçiş beklerken acil bir güncelleme gelirse, React geçişi keser, acil güncellemeyi render eder ve ardından arka planda geçiş işini yeniden başlatır.
* `useTransition` Hook'u: Bu hook şunları içeren bir dizi döndürür:
1. `isPending`: Bir geçişin şu anda beklemede olup olmadığını gösteren bir boolean değeri.
2. `startTransition`: Durum güncellemelerini sarmalamanıza ve bunları geçiş olarak işaretlemenize olanak tanıyan bir fonksiyon.
* `startTransition` (Zorunlu API): Durum güncellemelerini sarmalamak için bir bileşen bağlamına (örneğin, bir kütüphanede veya framework'te) sahip olmadığınızda kullanılır.
* Fayda: UI'yı duyarlı tutar. Örneğin, bir kullanıcı bir arama kutusuna yazdığında, giriş anında güncellenirken, potansiyel olarak yavaş olan sonuç filtrelemesi bir geçişte gerçekleşebilir ve giriş alanının yavaş hissetmesini önler.

* `useDeferredValue` Hook'u: Bu hook, UI'ın acil olmayan bir bölümünün yeniden render edilmesini ertelemenizi sağlar. Bir değer alır ve o değerin "ertelenmiş" bir sürümünü döndürür. Orijinal değer değiştiğinde, `useDeferredValue` kendi değerini güncellemeden önce kısa bir süre bekler ve React'a daha acil güncellemeleri önce render etme şansı verir. Bu, debouncing'e benzer ancak React'ın zamanlayıcısına entegre edilmiştir.
```javascript
const deferredSearchTerm = useDeferredValue(searchTerm);
// Pahalı filtreleme/render için deferredSearchTerm kullanın
```

* Strict Mode Geliştirmeleri: React 18'de Strict Mode, bileşenleri bağlar ve çıkarır, ardından önceki durumla yeniden bağlar. Bu, eşzamanlı render ile ortaya çıkabilecek (örneğin, etkilerin idempotent olmasını ve düzgün bir şekilde temizlenmesini sağlamak gibi) dayanıklı durum ve etkilerle ilgili hataları ortaya çıkarmaya yardımcı olur.

* Sunucu Bileşenleri (Deneysel/Gelecek): Doğrudan bir React 18 kararlı özelliği olmasa da, React ekibinin vizyonunun önemli bir parçasıdır. Sunucu Bileşenleri, geliştiricilerin yalnızca sunucuda render edilen bileşenler oluşturmasına olanak tanır, potansiyel olarak istemci tarafı paket boyutunu azaltır, ilk sayfa yükleme performansını iyileştirir ve SEO'yu geliştirir.

```react
import React, { useState, useTransition } from 'react';
import ReactDOM from 'react-dom/client';

const generateItems = (query) => {
  const items = [];
  for (let i = 0; i < 10000; i++) {
    items.push(`Item ${i + 1} for "${query}"`);
  }
  return items;
};

function SearchResults({ query }) {
  const items = React.useMemo(() => generateItems(query), [query]);

  if (!query) {
    return <p>Start typing to see results.</p>;
  }

  // Büyük bir liste için yavaş bir render'ı simüle edin
  let startTime = performance.now();
  while (performance.now() - startTime < 5) {
    // Render işini simüle etmek için 5ms boyunca hiçbir şey yapmayın
  }

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

function App() {
  const [inputValue, setInputValue] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setInputValue(e.target.value); // Giriş alanı için acil güncelleme

    // Arama sorgusu güncellemesini bir geçişe sarın
    // Bu, girişin anında güncellenmesini sağlarken, arama sonuçları
    // UI'ı engellemeden arka planda güncellenir.
    startTransition(() => {
      setSearchQuery(e.target.value);
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>React 18 Geçişler Örneği</h1>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder="Öğeleri arayın..."
        style={{ width: '300px', padding: '8px' }}
      />
      {isPending && <p style={{ color: 'gray' }}>Sonuçlar yükleniyor...</p>}
      <div style={{ marginTop: '20px', maxHeight: '400px', overflowY: 'auto', border: '1px solid #eee' }}>
        <SearchResults query={searchQuery} />
      </div>
    </div>
  );
}

// React 18'in Yeni Kök API'si
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// Bu kodu çalıştırmak için:
// 1. React 18'in kurulu olduğundan emin olun: npm install react react-dom
// 2. <div id="root"></div> içeren bir HTML dosyası olarak kaydedin veya bir React proje kurulumu kullanın (örn. Create React App, Vite).
```