React Eş Zamanlı Renderlama: Fiber Mimarisi ve İş Döngüsü Analizi ile Performansı Artırma

Ön uç geliştirmede baskın bir güç olan React, giderek daha karmaşık ve etkileşimli kullanıcı arayüzlerinin taleplerini karşılamak için sürekli olarak gelişmiştir. Bu evrimdeki en önemli gelişmelerden biri, React 16 ile tanıtılan Eş Zamanlı Renderlama'dır. Bu paradigma kayması, React'ın güncellemeleri nasıl yönettiğini ve bileşenleri nasıl renderladığını temelden değiştirerek önemli performans iyileştirmelerinin kilidini açtı ve daha duyarlı kullanıcı deneyimleri sağladı. Bu makale, Eş Zamanlı Renderlama'nın temel kavramlarını derinlemesine inceleyerek Fiber mimarisini ve iş döngüsünü keşfediyor ve bu mekanizmaların daha sorunsuz, daha verimli React uygulamalarına nasıl katkıda bulunduğuna dair bilgiler sunuyor.

Eş Zamanlı Renderlama İhtiyacını Anlamak

Eş Zamanlı Renderlama'dan önce, React eş zamanlı bir şekilde çalışıyordu. Bir güncelleme meydana geldiğinde (örneğin, durum değişikliği, özellik güncellemesi), React tüm bileşen ağacını tek, kesintisiz bir işlemde renderlamaya başlardı. Bu eş zamanlı renderlama, özellikle büyük bileşen ağaçları veya hesaplama açısından maliyetli işlemlerle uğraşırken performans darboğazlarına yol açabilirdi. Bu renderlama dönemlerinde, tarayıcı yanıt vermez hale gelir ve bu da aksak ve sinir bozucu bir kullanıcı deneyimine yol açardı. Bu genellikle "ana iş parçacığını engellemek" olarak adlandırılır.

Bir kullanıcının bir metin alanına yazdığı bir senaryo hayal edin. Yazılan metni görüntülemekten sorumlu bileşen, büyük, karmaşık bir bileşen ağacının parçasıysa, her tuş vuruşu ana iş parçacığını engelleyen bir yeniden renderlamayı tetikleyebilir. Bu, farkedilir gecikmeye ve kötü bir kullanıcı deneyimine neden olur.

Eş Zamanlı Renderlama, React'ın renderlama görevlerini daha küçük, yönetilebilir iş birimlerine ayırmasına izin vererek bu sorunu çözer. Bu birimler önceliklendirilebilir, duraklatılabilir ve gerektiğinde devam ettirilebilir, bu da React'ın renderlama görevlerini kullanıcı girişi veya ağ istekleri gibi diğer tarayıcı işlemleriyle değiştirmesine olanak tanır. Bu yaklaşım, ana iş parçacığının uzun süreler boyunca engellenmesini önler ve daha duyarlı ve akıcı bir kullanıcı deneyimi sağlar. Bunu React'ın renderlama süreci için çoklu görev olarak düşünün.

Fiber Mimarisine Giriş

Eş Zamanlı Renderlama'nın kalbinde Fiber mimarisi yer alır. Fiber, React'ın dahili uzlaştırma algoritmasının tamamen yeniden uygulanmasını temsil eder. Önceki eş zamanlı uzlaştırma sürecinden farklı olarak Fiber, güncellemeleri ve renderlama bileşenlerini yönetmek için daha karmaşık ve ayrıntılı bir yaklaşım sunar.

Fiber Nedir?

Bir Fiber, kavramsal olarak bir bileşen örneğinin sanal bir temsili olarak anlaşılabilir. React uygulamanızdaki her bileşen, karşılık gelen bir Fiber düğümüyle ilişkilendirilir. Bu Fiber düğümleri, bileşen ağacını yansıtan bir ağaç yapısı oluşturur. Her Fiber düğümü, bileşen, özellikleri, alt öğeleri ve mevcut durumu hakkında bilgi tutar. En önemlisi, bu bileşen için yapılması gereken iş hakkında da bilgi tutar.

Bir Fiber düğümünün temel özellikleri şunlardır:

• type: Bileşen türü (örneğin, div, MyComponent).
• key: Bileşene atanan benzersiz anahtar (verimli uzlaştırma için kullanılır).
• props: Bileşene geçirilen özellikler.
• child: Bileşenin ilk alt öğesini temsil eden Fiber düğümüne bir işaretçi.
• sibling: Bileşenin sonraki kardeşini temsil eden Fiber düğümüne bir işaretçi.
• return: Bileşenin üst öğesini temsil eden Fiber düğümüne bir işaretçi.
• stateNode: Gerçek bileşen örneğine bir referans (örneğin, ana bilgisayar bileşenleri için bir DOM düğümü, bir sınıf bileşeni örneği).
• alternate: Bileşenin önceki sürümünü temsil eden Fiber düğümüne bir işaretçi.
• effectTag: Bileşen için gereken güncelleme türünü gösteren bir bayrak (örneğin, yerleştirme, güncelleme, silme).

Fiber Ağacı

Fiber ağacı, uygulamanın UI'sinin mevcut durumunu temsil eden kalıcı bir veri yapısıdır. Bir güncelleme meydana geldiğinde, React arka planda, güncellemeden sonra UI'nin istenen durumunu temsil eden yeni bir Fiber ağacı oluşturur. Bu yeni ağaç, "devam eden iş" ağacı olarak adlandırılır. Devam eden iş ağacı tamamlandığında, React onu mevcut ağaçla değiştirerek değişiklikleri kullanıcıya görünür hale getirir.

Bu çift ağaç yaklaşımı, React'ın renderlama güncellemelerini engellemeyen bir şekilde gerçekleştirmesini sağlar. Devam eden iş ağacı arka planda oluşturulurken mevcut ağaç kullanıcıya görünür durumda kalır. Bu, UI'nin donmasını veya güncellemeler sırasında yanıt vermemesini önler.

Fiber Mimarisi'nin Faydaları

• Kesintiye Uğrayabilir Renderlama: Fiber, React'ın renderlama görevlerini duraklatmasına ve devam ettirmesine olanak tanıyarak kullanıcı etkileşimlerine öncelik vermesini ve ana iş parçacığının engellenmesini önlemesini sağlar.
• Artımlı Renderlama: Fiber, React'ın renderlama güncellemelerini zaman içinde artımlı olarak işlenebilen daha küçük iş birimlerine ayırmasına olanak tanır.
• Önceliklendirme: Fiber, React'ın farklı güncelleme türlerine öncelik vermesine olanak tanıyarak kritik güncellemelerin (örneğin, kullanıcı girişi) daha az önemli güncellemelerden (örneğin, arka plan veri getirme) önce işlenmesini sağlar.
• Geliştirilmiş Hata İşleme: Fiber, renderlama sırasında hataları işlemeyi kolaylaştırır, çünkü bir hata oluşursa React'ın önceki kararlı duruma geri dönmesine izin verir.

İş Döngüsü: Fiber Eş Zamanlılığı Nasıl Sağlar?

İş döngüsü, Eş Zamanlı Renderlama'yı yönlendiren motordur. Fiber ağacında dolaşan, her Fiber düğümünde iş yapan ve UI'yi artımlı olarak güncelleyen özyinelemeli bir fonksiyondur. İş döngüsü aşağıdaki görevlerden sorumludur:

• İşlenecek sonraki Fiber'i seçme.
• Fiber üzerinde çalışma (örneğin, yeni durumu hesaplama, özellikleri karşılaştırma, bileşeni renderlama).
• Fiber ağacını çalışmanın sonuçlarıyla güncelleme.
• Yapılacak daha fazla iş planlama.

İş Döngüsünün Aşamaları

İş döngüsü iki ana aşamadan oluşur:

1. Renderlama Aşaması (Uzlaştırma Aşaması olarak da bilinir): Bu aşama, devam eden iş Fiber ağacını oluşturmaktan sorumludur. Bu aşamada, React Fiber ağacında dolaşır, mevcut ağacı istenen durumla karşılaştırır ve hangi değişikliklerin yapılması gerektiğini belirler. Bu aşama asenkron ve kesintiye uğrayabilir. DOM'da neyin *değiştirilmesi* gerektiğini belirler.
2. Commit Aşaması: Bu aşama, değişiklikleri gerçek DOM'a uygulamaktan sorumludur. Bu aşamada, React DOM düğümlerini günceller, yeni düğümler ekler ve eski düğümleri kaldırır. Bu aşama eş zamanlı ve kesintiye uğrayamaz. DOM'u *gerçekten* değiştirir.

İş Döngüsü Eş Zamanlılığı Nasıl Sağlar?

Eş Zamanlı Renderlama'nın anahtarı, Renderlama Aşaması'nın asenkron ve kesintiye uğrayabilir olmasıdır. Bu, React'ın tarayıcının kullanıcı girişi veya ağ istekleri gibi diğer görevleri işlemesine izin vermek için herhangi bir zamanda Renderlama Aşaması'nı duraklatabileceği anlamına gelir. Tarayıcı boşta olduğunda, React Renderlama Aşaması'na kaldığı yerden devam edebilir.

Renderlama Aşaması'nı duraklatma ve devam ettirme yeteneği, React'ın renderlama görevlerini diğer tarayıcı işlemleriyle değiştirmesine, ana iş parçacığının engellenmesini önlemesine ve daha duyarlı bir kullanıcı deneyimi sağlamasına olanak tanır. Öte yandan, Commit Aşaması, UI'de tutarlılığı sağlamak için eş zamanlı olmalıdır. Ancak, Commit Aşaması genellikle Renderlama Aşaması'ndan çok daha hızlıdır, bu nedenle genellikle performans darboğazlarına neden olmaz.

İş Döngüsünde Önceliklendirme

React, hangi Fiber düğümlerinin önce işleneceğini belirlemek için öncelik tabanlı bir zamanlama algoritması kullanır. Bu algoritma, önemine göre her güncellemeye bir öncelik düzeyi atar. Örneğin, kullanıcı girişi tarafından tetiklenen güncellemeler genellikle arka plan veri getirme tarafından tetiklenen güncellemelerden daha yüksek bir önceliğe atanır.

İş döngüsü her zaman en yüksek önceliğe sahip Fiber düğümlerini önce işler. Bu, kritik güncellemelerin hızlı bir şekilde işlenmesini ve duyarlı bir kullanıcı deneyimi sağlanmasını sağlar. Daha az önemli güncellemeler, tarayıcı boşta olduğunda arka planda işlenir.

Bu önceliklendirme sistemi, özellikle çok sayıda eş zamanlı güncellemeye sahip karmaşık uygulamalarda sorunsuz bir kullanıcı deneyimi sağlamak için çok önemlidir. Bir kullanıcının bir arama çubuğuna yazdığı ve aynı anda uygulamanın önerilen arama terimlerinin bir listesini getirdiği ve görüntülediği bir senaryo düşünün. Metin alanının duyarlı kalmasını sağlamak için kullanıcının yazmasıyla ilgili güncellemeler önceliklendirilmelidir, önerilen arama terimleriyle ilgili güncellemeler ise arka planda işlenebilir.

Eş Zamanlı Renderlama'nın Uygulamadaki Pratik Örnekleri

Eş Zamanlı Renderlama'nın React uygulamalarının performansını ve kullanıcı deneyimini nasıl iyileştirebileceğine dair birkaç pratik örneği inceleyelim.

1. Kullanıcı Girişini Geciktirme (Debouncing)

Kullanıcı yazdıkça arama sonuçlarını görüntüleyen bir arama çubuğu düşünün. Eş Zamanlı Renderlama olmadan, her tuş vuruşu tüm arama sonuçları listesinin yeniden renderlanmasını tetikleyebilir, bu da performans sorunlarına ve aksak bir kullanıcı deneyimine yol açar.

Eş Zamanlı Renderlama ile, kullanıcının kısa bir süre yazmayı bırakana kadar arama sonuçlarının renderlanmasını geciktirmek için geciktirmeyi (debouncing) kullanabiliriz. Bu, React'ın kullanıcının girişine öncelik vermesini ve UI'nin yanıt vermemesini önlemesini sağlar.

İşte basitleştirilmiş bir örnek:

import React, { useState, useCallback } from 'react';

function SearchBar() {
 const [searchTerm, setSearchTerm] = useState('');

 const debouncedSearch = useCallback(
 debounce((value) => {
 // Arama mantığını burada gerçekleştirin
 console.log('Aranıyor:', value);
 }, 300),
 []
 );

 const handleChange = (event) => {
 const value = event.target.value;
 setSearchTerm(value);
 debouncedSearch(value);
 };

 return (
 
 );
}

// Geciktirme işlevi
function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}

export default SearchBar;

Bu örnekte, debounce işlevi, arama mantığının yürütülmesini, kullanıcının 300 milisaniye boyunca yazmayı bırakana kadar geciktirir. Bu, arama sonuçlarının yalnızca gerektiğinde renderlanmasını sağlayarak uygulamanın performansını artırır.

2. Görüntüleri Tembel Yükleme (Lazy Loading)

Büyük görüntüleri yüklemek, bir web sayfasının ilk yükleme süresini önemli ölçüde etkileyebilir. Eş Zamanlı Renderlama ile, görüntüleri, görüntü alanında görünene kadar yüklemeyi ertelemek için tembel yüklemeyi kullanabiliriz.

Bu teknik, kullanıcının sayfayla etkileşime girmeye başlamadan önce tüm görüntülerin yüklenmesini beklemesi gerekmediğinden, uygulamanın algılanan performansını önemli ölçüde artırabilir.

İşte react-lazyload kitaplığını kullanan basitleştirilmiş bir örnek:

import React from 'react';
import LazyLoad from 'react-lazyload';

function ImageComponent({ src, alt }) {
 return (
 Yükleniyor...
}>
 
 
 );
}

export default ImageComponent;

Bu örnekte, LazyLoad bileşeni, görüntü alanında görünene kadar görüntünün yüklenmesini geciktirir. placeholder özelliği, görüntü yüklenirken bir yükleme göstergesi görüntülememizi sağlar.

3. Veri Getirme için Suspense

React Suspense, veri yüklenmesini beklerken bir bileşenin renderlanmasını "askıya" almanızı sağlar. Bu, özellikle bir API'den veri beklerken bir yükleme göstergesi görüntülemek istediğiniz veri getirme senaryoları için kullanışlıdır.

Suspense, React'ın veri yüklemesine öncelik vermesine ve UI'nin yanıt vermemesini önlemesine olanak tanıyan Eş Zamanlı Renderlama ile sorunsuz bir şekilde entegre olur.

İşte basitleştirilmiş bir örnek:

import React, { Suspense } from 'react';

// Bir Promise döndüren sahte bir veri getirme işlevi
const fetchData = () => {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve({ data: 'Veri yüklendi!' });
 }, 2000);
 });
};

// Suspense kullanan bir React bileşeni
function MyComponent() {
 const resource = fetchData();
 return (
 Yükleniyor...