React Scheduler & Fiber Mimarisinin Sırrı: Zaman Dilimlenmesi, Eş Zamanlı Oluşturma ve İşlem Sırası Yönetimi
React uygulamalarınız yavaş mı çalışıyor? Karmaşık UI güncellemeleri performans sorunlarına mı neden oluyor? O halde React Scheduler ve Fiber mimarisini anlamak, uygulamalarınızın performansını optimize etmenin anahtarıdır. Bu makalede, React’in performansını nasıl bu kadar yüksek tuttuğunu, zaman dilimlenmesi, eş zamanlı oluşturma ve işlem sırası yönetimini adım adım açıklayacağız. React’in kalbindeki bu mekanizmaları anlamak, daha hızlı ve daha verimli uygulamalar geliştirmenize olanak sağlayacak.
React’te Performans Sorunlarına Genel Bakış: Neden Fiber Mimarisine İhtiyaç Duyuldu?
Eski React sürümlerinde, sanal DOM’daki değişiklikleri tespit etmek ve güncellemek için tek bir büyük işlem (reconciliation) yapılırdı. Bu işlem, özellikle büyük ve karmaşık uygulamalarda, uzun sürebilir ve kullanıcı arayüzünde donmalara (jitter) neden olabilir. Kullanıcı deneyimini olumsuz etkileyen bu durum, React ekibinin yeni bir yaklaşım geliştirmelerine sebep oldu: Fiber mimarisi.
Fiber mimarisi, React’in büyük ve karmaşık uygulamaları daha verimli bir şekilde güncellemesine olanak sağlayan, yenilikçi bir mimari değişikliğidir. Bu sayede, daha önce tek seferde yapılan uzun işlemler, küçük parçalara bölünüp zaman içinde işlenebiliyor. Bu bölünmüş işleme yöntemi, zaman dilimlenmesi (time slicing) olarak adlandırılıyor ve React’in performansını önemli ölçüde iyileştiriyor. Ayrıca, Fiber mimarisi, eş zamanlı oluşturma (concurrent rendering) sayesinde, birden fazla güncellemeyi aynı anda işleme yeteneğine sahip.
React Fiber: Temel Kavramlar ve İşleyiş Mekanizması
React Fiber, React’in sanal DOM’u nasıl işlediğini kökten değiştiren bir mimari değişikliğidir. Önceki yaklaşımın aksine, Fiber, uygulama güncellemelerini küçük, bağımsız birimlere (fiber) böler. Bu fiberler, bir ağaç yapısı oluşturur ve her fiber, bir React bileşenini veya bir DOM düğümünü temsil eder. Fiber mimarisinin kalbinde, her fiber’ın bir öncelik seviyesi ve bir tamamlanma durum bilgisi bulunur. Bu bilgiler, React Scheduler’ın hangi fiber’ı ne zaman işleyeceğine karar vermesini sağlar.
Örneğin, bir liste elemanı eklemek için, Fiber mimarisi tüm listeyi yeniden oluşturmak yerine sadece eklenen elemanı ve onun çevresindeki birkaç elemanı günceller. Bu, performansı önemli ölçüde iyileştirir. Ayrıca, Fiber mimarisi, her fiber için ayrı ayrı işlemler planlamayı ve bunları önceliklendirmeyi sağlar. Yüksek öncelikli güncellemeler, düşük öncelikli güncellemelerden önce işlenir. Bu esneklik, kullanıcı arayüzünün daha hızlı ve daha duyarlı olmasını sağlar.
Daha teknik olarak, her Fiber nesnesi, state, props, çocuk fiberler gibi bilgiyi tutar ve beginWork, completeWork gibi yaşam döngüsü fonksiyonlarını çağırır. Bu fonksiyonlar, Fiber ağacının oluşturulmasını ve güncellenmesini sağlar. İşte bu noktada React Scheduler devreye girer.
React Scheduler: Zaman Dilimlenmesi ve Önceliklendirme
React Scheduler, Fiber mimarisinin kalbindeki önemli bir bileşendir. Görevi, hangi Fiber’ın ne zaman işleneceğini belirlemek ve işlem sırasını yönetmektir. Scheduler, zaman dilimlenmesi (time slicing) tekniğini kullanarak, her karede (frame) az miktarda iş yapar. Bu, tarayıcının diğer görevleri de yerine getirmesine ve kullanıcı arayüzünün donmasını önlemesine olanak tanır. Scheduler ayrıca, bazı güncellemelerin diğerlerinden daha önemli olabileceğini de anlar ve bu nedenle güncellemeleri önceliklendirir. Örneğin, kullanıcı etkileşimlerini işleyen güncellemeler, arka planda çalışan güncellemelere göre daha yüksek önceliğe sahiptir.
Scheduler, zaman dilimlenmesini requestIdleCallback API’sini kullanarak gerçekleştirir. Bu API, tarayıcının boş zamanlarında fonksiyonları çalıştırır. React, tarayıcının boş zaman dilimlerini kullanarak Fiber ağacını yavaş yavaş işler. Bu sayede, tarayıcı diğer görevlerini yapmaya devam eder ve uygulama donmaz. Scheduler’ın yaptığı iş, karmaşık bir önceliklendirme algoritması ile birlikte performansın optimize edilmesini sağlar.
Örneğin, bir form doldururken, formun güncellenmesi, bir haber sayfasında arka planda yüklenen haberlerin güncellenmesinden daha yüksek önceliğe sahiptir. Bu, kullanıcı deneyimini önemli ölçüde iyileştirir.
Eş Zamanlı Oluşturma (Concurrent Rendering): Birden Fazla Güncellemeyi Yönetmek
Eş zamanlı oluşturma, React’in birden fazla güncellemeyi aynı anda işlemesine olanak tanıyan güçlü bir özelliktir. Bu, kullanıcı arayüzünün daha hızlı ve daha duyarlı olmasını sağlar. Önceki React sürümlerinde, bir güncelleme tamamlanmadan diğerine başlanamazdı. Eş zamanlı oluşturma ile ise, React, bir güncellemeyi işlerken, diğer güncellemelerin planlamasına ve işlenmesine başlayabilir. Bu, güncellemelerin daha hızlı bir şekilde tamamlanmasını sağlar ve kullanıcı arayüzünün donmasını önler.
Eş zamanlı oluşturma, React’in “iş başında bırakma” (aborting) mekanizması ile birlikte çalışır. Eğer React, bir güncellemenin gereksiz hale geldiğini (örneğin, kullanıcı başka bir güncelleme başlattıysa) tespit ederse, o güncellemeyi iptal eder ve daha yeni güncellemelere odaklanır. Bu mekanizma, kaynakların verimli kullanılmasını ve performansın optimize edilmesini sağlar.
Eş zamanlı oluşturma, özellikle büyük ve karmaşık uygulamalarda performans artışı sağlar. Bu sayede, kullanıcı etkileşimleri daha hızlı yanıtlanır ve kullanıcı arayüzü daha akıcı olur. Örneğin, bir sayfada birden çok AJAX isteği yapıldığında, eş zamanlı oluşturma bu isteklerin eş zamanlı olarak işlenmesini sağlar. Bu durum, kullanıcıların sayfayı beklemesini azaltır ve daha iyi bir kullanıcı deneyimi sağlar.
İşlem Sırası Yönetimi (WIP – Work In Progress): Fiber Ağacının Yönetimi
React’in Fiber mimarisinde “İşlem Sırası Yönetimi” (Work In Progress – WIP) önemli bir rol oynar. WIP, React’in herhangi bir zamanda işlenmiş olmayan, güncellenen bir fiber ağacının kopyasını temsil eder. Bu kopya, gerçek DOM ağacına yazılmadan önce işlemlerin güvenli bir şekilde test edilmesine ve geri alınmasına olanak tanır. WIP, React’in eş zamanlı oluşturmayı ve zaman dilimlenmesini nasıl başardığının merkezinde yer alır.
Yeni güncellemeler geldiğinde, React bu güncellemeleri WIP ağacına uygular. Bu uygulama, eski güncellemeler tamamlanmadan önce yeni güncellemelerin işlenmesine olanak tanır. WIP tamamlandığında, React güncellenmiş ağacı gerçek DOM ağacına yansıtır. Eğer arada yeni bir güncelleme gelirse, React önceki WIP ağacı atılır ve yeni WIP ağacına odaklanır. Bu mekanizma, performans sorunlarını önlemek ve en son güncellemeyi kullanıcıya göstermek için önemlidir.
Uygulamalı Örnek: Bir Liste Bileşeninin Performans Optimizasyonu
1000 öğeli bir liste bileşenini düşünelim. Eski React sürümlerinde, listedeki her öğenin güncellenmesi gerekiyordu. Bu işlem çok uzun sürebilirdi. Ancak, Fiber mimarisi ve Scheduler ile, listedeki değişiklikler yalnızca güncellenen öğeler için yapılır. Diğer öğeler dokunulmaz. Bu performans artışı gözle görülür derecede fark edilir.
// Önceki yöntem (performansı düşük)
const MyList = ({ items }) => {
return (
{items.map((item) => (
- {item.name}
))}
);
};
// Fiber mimarisi ile optimize edilmiş yöntem (performansı yüksek)
const MyList = React.memo(({ items }) => {
return (
{items.map((item) => (
- {item.name}
))}
);
});React.memo fonksiyonu, bileşenin props'larının değişmediği sürece yeniden oluşturulmasını önler. Bu sayede, performans önemli ölçüde artar. Ayrıca, liste öğelerine key prop'u eklemek, React'in değişiklikleri daha verimli bir şekilde tespit etmesini sağlar.
İleri Düzey Konular: Suspense, Concurrent Mode ve Gelecek
React'in eş zamanlı oluşturma yeteneklerini daha da geliştirmek için Suspense ve Concurrent Mode gibi ileri düzey özellikler sunulmuştur. Suspense, veri yükleme gibi uzun süren işlemleri işlemek için kullanılır ve kullanıcı arayüzünün donmasını önler. Concurrent Mode ise, uygulamaların daha akıcı ve duyarlı olmasını sağlamak için eş zamanlı oluşturmayı ve zaman dilimlenmesini kullanır. Bu ileri düzey konular, daha karmaşık uygulamalar geliştirmek için kritik öneme sahiptir ve React'in gelecekteki sürümlerinde daha da geliştirilmeye devam edecektir. Daha detaylı bilgi için https://fatihsoysal.com adresini ziyaret edebilirsiniz.
Sonuç ve Sıkça Sorulan Sorular
React Scheduler ve Fiber mimarisi, React'in performansını önemli ölçüde artıran ve büyük ve karmaşık uygulamaların geliştirilmesini mümkün kılan güçlü bir teknolojidir. Zaman dilimlenmesi, eş zamanlı oluşturma ve işlem sırası yönetimi, kullanıcı arayüzünün daha hızlı, daha duyarlı ve daha akıcı olmasını sağlar. Bu makalede ele alınan konuları anlamak, daha verimli ve performanslı React uygulamaları geliştirmenize yardımcı olacaktır.
Sıkça Sorulan Sorular:
- Fiber mimarisi React'in performansını nasıl artırır? Fiber mimarisi, uygulama güncellemelerini küçük parçalara böler ve bunları zaman içinde işler. Bu sayede, tarayıcının diğer görevleri de yerine getirmesine ve kullanıcı arayüzünün donmasını önlemesine olanak tanır.
- Zaman dilimlenmesi (time slicing) nedir? Zaman dilimlenmesi, uzun süren işlemleri küçük parçalara bölerek ve bunları zaman içinde işleyerek, kullanıcı arayüzünün donmasını önleyen bir tekniktir.
- Eş zamanlı oluşturma (concurrent rendering) nedir? Eş zamanlı oluşturma, React'in birden fazla güncellemeyi aynı anda işlemesine olanak tanıyan bir özelliktir.
- WIP (Work In Progress) nedir? WIP, React'in herhangi bir zamanda işlenmiş olmayan, güncellenen bir fiber ağacının kopyasını temsil eder.
- React Scheduler'ın rolü nedir? React Scheduler, hangi Fiber'ın ne zaman işleneceğini belirlemek ve işlem sırasını yönetmekten sorumludur.
Öğrenme Yol Haritası:
- Yeni Başlayanlar: Temel React kavramlarını öğrenin ve sanal DOM'un nasıl çalıştığını anlayın.
- Orta Seviye: Fiber mimarisinin temel bileşenlerini (Fiber, Scheduler, WIP) öğrenin ve zaman dilimlenmesini anlayın.
- İleri Seviye: Eş zamanlı oluşturmayı, Suspense ve Concurrent Mode'u öğrenin ve gerçek dünya senaryolarında performans optimizasyonu yapın.
Yazar: Fatih Soysal