React

React Lab <Activity>, <ViewTransition> APIleri.

React API’ye her geçen gün daha fazla özellik ekleniyor. Bunlar 2 taneside ekran geçişleri ilgili Corousel, Tab veya ekranın gizlenmesi ve gösterilmesi kısımlarının daha Animated bir şekilde gerçekleşmesi.

3 min readMay 25, 2025

1. Activity

React Activity API, temelde bileşeni görsel olarak gizlerken(unmount), React ve DOM durumunu koruma yeteneği sağlar.

import {unstable_Activity as Activity} from 'react';

<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>

Bu şu açıdan önemlidir, eğer siz ilgili bileşeni göster, gizle yapıyorsanız bu aşamada oluşabilecek gecikmeleri önler. Bunun ile birlikte,

Pre-rendering: Bir UI bileşeninin, kullanıcının o an görmediği ancak yakın zamanda görmesi muhtemel olduğu durumlarda arka planda render edilmesini. Örneğin bir sekme kullanıcı henüz tıklamadığı sekmelerin içeriğini önceden render ederek, tıklama anında anında yükleme hissi sağlar.
State Preservation:Bir bileşen <Activity mode="hidden"> içine alındığında, görsel olarak gizlenir ancak React (state) ve DOM'daki karşılığı korunur. Örneğin Bir form dolduruyorsunuz ve başka bir sekmeye geçip geri döndüğünüzde form verilerinizin kaybolmamasını sağlar. Bu, bileşenin tamamen unmount (DOM’dan kaldırılıp yok edilmesi) olmasını engeller.
Performans Optimizasyonu:Gizli bileşenlerin useEffect’lerinin çalışmasını engeller. Bu durum gizlenen bileşenlerin arka planda gereksiz yere işlem yapmasını veya kaynak tüketmesini engeller.
Tekrar görünür hale geldiğinde, Effect’ler yeniden çalışır. Bu, özellikle sürekli çalışan animasyonlar veya veri dinleyicileri gibi durumlarda enerji ve kaynak tasarrufu sağlar.
Bu performans optimizasyonunu daha önceden Custom Hook’lar ile çözmeye çalışıyorduk. Örneğin Tab Visibility değişince..

https://learnreactui.dev/contents/react-tab-visibility-optimization

Veya CustomHook ile ilgili bileşenin ekranda gösterilip, gösterilmediğini dinliyorduk useVisibilityChange . Bunun sayfa içerisindeki bileşenlere uygulanmış hali.

Kullanıcı Deneyimi: Yükleme sürelerini ortadan kaldırır veya belirgin şekilde azaltır. Kullanıcıya kesintisiz ve hızlı bir navigasyon deneyimi sunar

2. ViewTransition

Bileşenlerin daha animated geçişler ile gösterilmesini sağlayan yeni bir React APIsi arkaplanda WebAPI’de bulunan startTransitionView ViewTransition APIsini kullanıyor.

// "what" to animate.
<ViewTransition>
  <div>animate me</div>
</ViewTransition>

veya

// "when" to animate.

// Transitions
startTransition(() => setState(...));

// Deferred Values
const deferred = useDeferredValue(value);

// Suspense
<Suspense fallback={<Fallback />}>
  <div>Loading...</div>
</Suspense>

Buda bize görsel olarak geçişlerde FadeIn — FadeOut uygulayabileceğimiz altyapıları bir Animation kütüphanesi olmadan doğal React APIleri ile gerçekleştirebilmemize olanak sağlıyor.

Aşağıdaki sayfadaki React’ın kendi hazırlamış olduğu örneklere bir göz gezdirmenizi öneririm. Bu örneklerde farklı UI için geçiş durumları denenmiştir.

- React

The library for web and native user interfaces

react.dev

enter: Bu Transition içerisinde bir ViewTransition eklendiğinde, bu tetiklenir.
exit: Bu Transition içerisinde bir ViewTransition silindiğinde, bu tetiklenir.
update, share..

Tabi bunların callback fonksiyonlarıda bulunuyor, bu sayede bu olayları dinleyip imperative olarak istediğiniz işlemleri gerçekleştirebilirsiniz.

onEnter, onExit, onShare, onUpdate gibi..

Sonuç

Activity ve ViewTransition API’leri, birbirini tamamlayan özelliklerdir. <Activity> ilgili bileşenin DOM üzerinden silinmeden state saklayarak performans ve altyapı sunarkan, <ViewTransition> ise bu geçişleri görsel olarak zenginleştirir ve kullanıcıya daha etkileşimli ve akıcı bir UI sunar.

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

Frontend Development With JS