- React
Bir Butona Bastığında React'te Gerçekte Ne Oluyor?
Bir kullanıcı etkileşiminin event'ten state değişimine, render sürecinden browser'ın ekrana çizmesine kadar React içerisinde nasıl ilerlediğini anlamak.
Zeynep Baş4 dk okuma
Her Şey Kullanıcı Etkileşimiyle Başlar
Butona tıkladığımız ilk anda ne olur?
Kullanıcı bir butona tıkladığında browser bu etkileşimi bir click event olarak oluşturur. React ise bu event'i ilgili event handler üzerinden uygulamaya aktarır.
User Interaction
Click Event
Event Handler
Application Logic
Örneğin bir butona onClick eklediğimizde React, kullanıcı tıklamasını dinler ve tanımladığımız fonksiyonu çalıştırır.
button
onClick
handleClick()
Event Handler Neden Önemlidir?
Kullanıcı davranışını uygulama davranışına dönüştürmek
Event handler, kullanıcının yaptığı bir işlemin uygulamadaki karşılığını belirleyen fonksiyondur. Ancak handler'ın içinde yapılan her işlem doğrudan DOM'u değiştirmek anlamına gelmez.
Click
Submit
Change
Focus
Keyboard Event
React uygulamalarında event handler genellikle state değiştirmek, bir fonksiyon çağırmak veya başka bir kullanıcı akışını başlatmak için kullanılır.
State Update
API Request
Navigation
Form Action
State Değiştiğinde Ne Olur?
React neden component'i tekrar çalıştırır?
Eğer click event içerisinde bir state güncellenirse React bu değişikliği takip eder ve ilgili component için yeni bir render süreci başlatır.
setState
State Update
Render
Buradaki önemli nokta, state değiştiğinde React'in doğrudan tüm DOM'u baştan oluşturması değildir. React yeni UI çıktısını hesaplar ve mevcut çıktı ile karşılaştırır.
Yeni UI
Mevcut UI
Karşılaştırma
Gerekli Güncelleme
Render Ne Demektir?
Component fonksiyonunun yeniden çalışması
React'te render, component fonksiyonunun mevcut state ve props değerlerine göre yeni UI tanımını oluşturması anlamına gelir.
Props
State
Component Function
New UI Output
Render işlemini browser'ın ekrana çizim yapmasıyla aynı şey olarak düşünmemek gerekir. React önce hangi UI'ın oluşması gerektiğini hesaplar, daha sonra gerekli DOM değişikliklerini uygular.
Render ≠ Browser Paint
UI Calculation
DOM Update
Browser Paint
React Her Şeyi Yeniden mi Oluşturur?
Virtual DOM ve gerekli güncellemeler
Bir component yeniden render olduğunda bunun tüm gerçek DOM'un baştan oluşturulduğu anlamına gelmediğini bilmek önemlidir.
Re-render
Virtual DOM
Diffing
DOM Update
React yeni UI çıktısını önceki çıktı ile karşılaştırarak değişen bölümleri belirlemeye çalışır ve gerekli DOM güncellemelerini gerçekleştirir.
Previous UI
New UI
Difference
Minimal DOM Changes
Parent Render Olursa Child Ne Olur?
Component ağacında render davranışı
React uygulamalarında componentler genellikle bir ağaç yapısı oluşturur. Bir parent component yeniden render olduğunda child componentlerin render süreci de etkilenebilir.
Parent
Child
Component Tree
Re-render
Bu nedenle gereksiz render'ların nereden kaynaklandığını anlamak özellikle büyük uygulamalarda performans açısından önemlidir.
Props Changes
State Changes
Context Changes
Component Boundaries
Her State Değişikliği Kötü Bir Şey Değildir
Performans optimizasyonunu doğru anlamak
React'te yeniden render gerçekleşmesi tek başına bir performans problemi değildir. Asıl önemli olan gereksiz render'ların uygulama üzerinde ölçülebilir bir maliyet oluşturup oluşturmadığıdır.
Re-render ≠ Problem
Measure First
Actual Bottleneck
User Experience
useMemo, useCallback veya React.memo gibi optimizasyon araçlarını her componentte kullanmak yerine gerçek bir performans ihtiyacı olduğunda değerlendirmek daha sağlıklı bir yaklaşımdır.
useMemo
useCallback
React.memo
Performance Profiling
API İsteği Bu Sürecin Neresinde?
Click ile server arasındaki bağlantı
Bir buton API isteği başlatıyorsa süreç yalnızca React render döngüsünden oluşmaz. Kullanıcı etkileşimi bir network request başlatabilir ve gelen response sonrasında uygulama state'i değişebilir.
Click
Event Handler
API Request
Response
State Update
Örneğin bir silme butonunda kullanıcı tıklaması mutation işlemini başlatabilir. İstek tamamlandıktan sonra liste yeniden güncellenebilir veya cache güncellenebilir.
Delete Action
Mutation
Cache Update
UI Update
Kullanıcı Aslında Ne Görüyor?
React'ten browser'a uzanan son aşama
React'in UI değişikliğini hesaplaması ile kullanıcının değişikliği ekranda görmesi arasında browser'ın kendi rendering süreci de bulunur.
React Update
DOM Mutation
Style Calculation
Layout
Paint
Bu nedenle frontend performansını yalnızca React üzerinden değerlendirmek yeterli değildir. JavaScript çalışması, DOM değişiklikleri ve browser'ın rendering süreci birlikte düşünülmelidir.
JavaScript
DOM
Layout
Paint
Browser Rendering
Tüm Süreci Birlikte Düşünmek
Bir butona tıkladığımızda gerçekleşen akış
Basit bir click işleminin arkasında aslında birden fazla aşama bulunur. Bu akışı anlamak React uygulamalarındaki davranışları daha doğru analiz etmemizi sağlar.
User Click
Click Event
Event Handler
State Update
Render
UI Comparison
DOM Update
Browser Paint
Örneğin sayaç uygulamasındaki basit bir buton bile bu sürecin temelini gösterir.
Button Click
setCount()
Component Re-render
Updated UI
DOM Update
Bu Süreci Bilmek Neden Önemli?
React kullanmak ile React'i anlamak arasındaki fark
React'te yalnızca component yazabilmek yeterli değildir. Bir state değişikliğinin uygulamayı nasıl etkilediğini, componentlerin neden yeniden render olduğunu ve DOM'un ne zaman güncellendiğini anlayabilmek daha doğru teknik kararlar vermeyi sağlar.
State Management
Component Design
Performance
Debugging
Özellikle büyük uygulamalarda performans problemlerini çözmek için semptomu değil, render ve state akışının nedenini anlamak gerekir.
Profiling
Render Analysis
Performance Optimization
Root Cause Analysis
Sonuç
Bir click, aslında küçük bir UI güncellemesinden fazlasıdır
React'te bir butona bastığımızda event handler çalışır, gerekiyorsa state güncellenir, React yeni UI çıktısını hesaplar ve gerekli DOM değişikliklerini gerçekleştirir. Ardından browser güncellenen arayüzü kullanıcıya gösterir.
Event
State
Render
DOM
Browser
Bu akışı anlamak, React'te performans optimizasyonu yaparken veya karmaşık state problemlerini çözerken yalnızca ezberlenmiş pattern'lere bağlı kalmak yerine sistemin nasıl çalıştığını düşünmeyi sağlar.
Understand Before Optimizing
Measure Before Changing
Follow the Data Flow
Understand the Rendering Process