DevForum
Ana Sayfa Frontend React 18'de Concurrent Rendering nasıl kullanılır?

React 18'de Concurrent Rendering nasıl kullanılır?

React JavaScript Çözüldü
2 saat önce oluşturuldu 234 görüntülenme 15 cevap
User

Ahmet Yılmaz

Senior Developer

2.5K puan • 156 katkı
42
User
Ahmet Yılmaz Senior Developer
2,543 puan • 156 katkı
2 saat önce

Merhaba arkadaşlar,

React 18 ile gelen concurrent rendering özelliklerini projemde kullanmak istiyorum. Özellikle useTransition ve useDeferredValue hook'larını doğru şekilde nasıl implement edebilirim?

Şu an elimde böyle bir kod var: 

import { useState, useTransition } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  const [results, setResults] = useState([]);

  const handleChange = (e) => {
    setQuery(e.target.value);
    
    startTransition(() => {
      // Expensive operation
      const filtered = filterResults(e.target.value);
      setResults(filtered);
    });
  };

  return (
    

      
      {isPending ?  : }
    

  );
}

Bu yaklaşım doğru mu? Yoksa useDeferredValue kullanmak daha mı iyi olur? Performance açısından hangisi daha avantajlı?

Deneyimlerinizi paylaşırsanız çok sevinirim. Teşekkürler!

Son düzenleme: 1 saat önce

15 Cevap

En İyi Cevap
87
User
Mehmet Demir Expert
8,234 puan • 423 katkı
45 dakika önce

Merhaba! Senin kullanımın genel olarak doğru ama birkaç önemli nokta var:

useTransition vs useDeferredValue

useTransition kullanırsan state güncellemelerini kontrol edebilirsin. useDeferredValue ise prop veya state değerini defer etmek için kullanılır.

Senin durumunda useDeferredValue daha uygun: 

import { useState, useDeferredValue } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  
  const results = useMemo(() => {
    return filterResults(deferredQuery);
  }, [deferredQuery]);

  return (
    

       setQuery(e.target.value)} 
      />
      
    

  );
}

Bu yaklaşımda input her zaman responsive kalır, filtreleme işlemi ise background'da yapılır.

Pro Tip: useTransition, kullanıcı etkileşimlerini (button click) optimize etmek için, useDeferredValue ise prop değişikliklerini optimize etmek için kullan.

23
User
Ayşe Kaya Frontend Dev
1,234 puan • 67 katkı
1 saat önce

Mehmet'in cevabına ek olarak, React 18'in Suspense özelliğini de kullanabilirsin: 

import { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    }>
      
    
  );
}

Bu sayede büyük componentler lazy load edilir ve concurrent rendering ile birlikte harika çalışır!

Cevap Yaz

Markdown formatı desteklenir