Kullanıcı Arayüzünü Engellemeyi Durdurun: React'ta Kesilebilir Render İşlemi

React render işlemleri kullanıcı arayüzünüzü dondurabilir.

Ağır hesaplamalar ana iş parçacığını (main thread) bloke eder. Kullanıcılarınız donmuş bir ekran görür. Bu da deneyimi mahveder.

Kesilebilir render (interruptible rendering) bu sorunu çözer. React'ın kullanıcı girişlerini işlemek için çalışmaya ara vermesini sağlar.

Nasıl çalışır:

  • React, işi küçük parçalara böler.
  • Tıklama veya yazma gibi yüksek öncelikli görevleri kontrol eder.
  • Eğer bir kullanıcı etkileşime girerse, React arka plan görevini duraklatır.
  • React önce girişi işler.
  • React arka plan görevine daha sonra devam eder.

Bunu yönetmek için geçişleri (transitions) kullanırsınız. Acil olmayan güncellemeleri işaretlemek için useTransition kullanın. Bu, React'a UI'ı duyarlı tutmasını söyler.

Ağır veri işlemlerinin uygulama performansınızı bitirmesine izin vermeyi bırakın.

Kaynak: https://dev.to/iprajapatiparesh/stop-blocking-the-ui-interruptible-rendering-in-react-32mb