REACT
React Fiber Nedir ?
React’ın ConcurrentMode çalışabilmesini sağlayan React Fiber konusu üzerinde duracağım.
Öncelikle React’ın çıkış nedenlerini ve React’ın hangi best practice ’ler üzerine inşaa edildiğini anlatan “React Hangi En İyi Pratikler Üzerine İnşaa Edildi ?” bu kısımda React’ın ortaya çıkışı aslında veri akışı ve güncellemesinin UI yansıtılması. Bunu gerçekleştirirken geliştiricinin arkaplanda yapılan rendering işlemlerinden soyutlanması hedeflenmiş.
Tabi bunun için VDOM ve bu Sanal DOM ağacını → Gerçek DOM ile karşılaştıran ve Diff bulan ve buna göre sadece ilgili kısımların render edilmesini sağlayan Algoritmalar mevcut. “React’ın DOM kullanımı” konusunda bu yöntemlerden ve Reconciliation işlemlerinden bahsettim.
React Fiber, React’in core(çekirdek) algoritmasının devam eden bir yeniden uygulamasıdır. React ekibi tarafından iki yıldan fazla süren araştırmaların sonucudur.
React Fiber’in amacı animasyon, layout ve gestures gibi alanlar için uygunluğunu artırmaktır. Başlıca özelliği artımlı render: render işini parçalara ayırma ve birden fazla kareye yayma yeteneğidir.
Diğer önemli özellikler arasında yeni güncellemeler geldikçe işi duraklatma, iptal etme veya yeniden kullanma yeteneği; farklı güncelleme türlerine öncelik atama yeteneği ve yeni eşzamanlılık ilkelleri yer alıyor.
React Fiber ise React Core algoritmasının baştan yazılmasını anlamına geliyorsa neden bu tip bir ihtiyaç oluştu. Mevcut yapısı bunu sağlamıyor mu ? (Bu olaylar 2016 yılında gerçekleşiyor detay için aşağıdaki linkleri inceleyebilirsiniz.)
- https://github.com/acdlite/react-fiber-architecture
- https://en.m.wikipedia.org/wiki/Fiber_(computer_science)
- Andrew Clark: What’s Next for React — ReactNext 2016
Ama konu React’ın yapısı fine-grained güncellemeler, tüm kullanıcı arayüzünü bir kerede yeniden oluşturmak yerine kullanıcı arayüzünü küçük, hedeflenmiş parçalar halinde güncelleme uygulamasını ifade eder. Bu, özellikle çok sayıda bileşene sahip karmaşık uygulamalar için daha iyi performans ve daha verimli kaynak kullanımı sağlar.
Yani VDOM ile bileşenleri olabildiğince az güncellenmesini sağlamak ve bunların UI Rendering maliyetli işler olduğunda ekrandaki bir takım takılmaları görebilirsiniz.
Yani React’ın yapısı Bir DOM ağacının yapısını veya bir WebGL sahne yapısını işlemek için daha uygun bir yapıya sahipken, Animasyon ise sürekli tik gerektiren ve altyapısında requestAnimationFrame kullanması gereken durumların oluşmasını doğururki buda React’ın bileşen mantığına çok uyumlu değildir.
Özetle animasyon, layout değişimleri ve gestures kısımları React’ın zayıf karnı diyebiliriz. React’ın iç bileşen yapısı ve render mantığı useState, useEffect ve useReducer üzerine olan güncellemeler üzerine kuruluyken animasyon, layout gibi sürekli değişimler bileşenlerin fine-grained güncelleme mantığı ile çakışır ve o ana rendering pipeline bozulmasına neden olur.
Aslında bu sorunlar hala aşılmış durumda değil Örneğin aşağıdaki tweet Tanner Routing kütüphanesi için ConcurrentMode mu support etmeli, yoksa Fine-Grianed güncellemeyi mi şeklinde bir anket başlatmış çünkü bu 2 konseptin aynı ortamda problemler çıkarabileceğini düşünüyor.
Her neyse konumuza dönersek bu tarz animasyon ve ekran geçişleri gerektiren konularda, yüksek düzeyde animasyon performansı elde etmek için DOM’u senkronize etmeniz (layout değişimlerini en aza indirmeniz) veya ekran güncellemeleri görsel olarak algılanamayacağı şekilde atlamanız gerekir.
React Fiber bunun gibi sorunları çözme görevini üstleniyor. Render işini parçalara ayıran ve birden fazla kareye yayan “incremental rendering” adlı bir özellik getiriyor. Yeni render mantığı ile animasyon, layout ve gesture değişimlerini daha iyi şekilde karşılamayı sağlıyor.
ConcurrentMode, useTransition, useDeferredValue gibi React 18 ile gelen aşağıdaki kavramların birçoğunun temeli aslında 2016 yılındaki bu değişime dayanıyor.
- Concurrency
- Suspense
- Streaming
- Partial Hydration
- RSC
- Transition
Neden React Fiber Geçildi ?
React’te kullanılan önceki reconciler algoritması, özellikle büyük ve karmaşık kullanıcı arayüzlerini işlerken sınırlamalara sahipti. React Fiber bu sorunları şu şekilde ele alıyor:
- Incremental rendering: React Fiber, render işlemini daha küçük parçalara bölerek kullanıcı arayüzünü kademeli olarak render etmesine ve ana iş parçacığını bloke etmekten kaçınmasına olanak tanır. Bu, uygulamanın yanıt verebilirliğini artırır.
- Prioritization: React Fiber, kullanıcı arayüzünün kritik bölümlerinin işlenmesine öncelik vererek kullanıcının en önemli içeriği ilk önce görmesini sağlayabilir.
- Concurrent mode: React Fiber, uygulamanın kullanıcı arayüzünü oluşturmaya devam ederken kullanıcı etkileşimlerine yanıt vermesini sağlayan eşzamanlı mod kavramını sunar. Bu özellikle animasyonlar ve diğer etkileşimli özellikler için kullanışlıdır.
- Flexibility:React Fiber, React’in gelecekteki gelişimi için daha esnek bir temel sağlar. Aşağıdaki gibi özellikleri mümkün kılar:
- Time slicing: React Fiber, render işlemini daha küçük zaman dilimlerine bölerek uygulamanın sınırlı kaynaklara sahip cihazlarda bile daha sorunsuz çalışmasını sağlar.
- Parallel rendering: React Fiber, render için birden fazla çekirdeği kullanarak çok çekirdekli işlemcilerde performansı daha da artırabilir.
- Fine-grained control: React Fiber, geliştiricilere render işlemi üzerinde daha fazla kontrol sağlayarak uygulamalarını belirli ihtiyaçlar için optimize etmelerine olanak tanır.
Referanslar
- https://github.com/acdlite/react-fiber-architecture
- https://en.m.wikipedia.org/wiki/Fiber_(computer_science)
- Andrew Clark: What’s Next for React — ReactNext 2016
- https://raphamorim.io/understanding-react-fiber-incremental-rendering-feature/
LearnReactUI.dev
React Ekosisteminde kendi kariyerinizi daha ileriye götürmek için LearnReactUI.dev sitesine üye olmayı unutmayın. Bu site piyasada çalışan(real-world) Web Uygulaması geliştirmek isteyen React geliştiricileri için oluşturulmuş bir web sitesidir.
