Performans için useMemo ve useCallback
Pahalı hesaplamaları useMemo ile, kararlı işlev başvurularını useCallback ile önbelleğe alarak gereksiz alt bileşen yeniden oluşturmalarını önleyin.
Performans için useMemo ve useCallback, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Varsayılan React Davranışı
Varsayılan olarak React, durumu veya üst bileşeni yeniden oluşturulduğunda bir bileşeni yeniden oluşturur. Özellikleri değişmemiş olsa bile alt bileşenler de yeniden oluşturulur. Çoğu bileşen için bu sorun değildir — React hızlıdır.
useMemo — Maliyetli Değerleri Önbelleğe Alma
useMemo(fn, deps), bir hesaplamanın sonucunu önbelleğe alır. İşlev yalnızca bağımlılıklar değiştiğinde çalışır. Her oluşturma sırasında tekrarlanması gereksiz olacak maliyetli hesaplamalar için kullanın.
const expensiveResult = useMemo(() => {
return items.filter(item => item.category === category).sort((a, b) => a.price - b.price);
}, [items, category]);
// Only recalculates when items or category changesuseCallback — İşlevleri Önbelleğe Alma
useCallback(fn, deps), bağımlılıklar değişmediği sürece aynı başvuruyu koruyan, önbelleğe alınmış bir işlev döndürür. Geri çağırma işlevlerini derin iç içe geçmiş veya önbelleğe alınmış bileşenlere aktarırken kullanın.
const handleDelete = useCallback((id: string) => {
setItems(prev => prev.filter(item => item.id !== id));
}, []); // stable reference — empty deps because only setItems is used
<ItemList items={items} onDelete={handleDelete} />React.memo — Yeniden Oluşturmayı Atlayın
React.memo(Component), bir bileşeni özellikleri değiştiğinde (yüzeysel karşılaştırmaya göre) yeniden oluşturulacak şekilde sarar. Sabit geri çağırma özellikleri için useCallback ile birleştirin.
const MemoItem = React.memo(function Item({ text, onDelete }: ItemProps) {
console.log('Item rendered:', text); // only logs when props change
return <li>{text} <button onClick={onDelete}>×</button></li>;
});
// onDelete must be stable (from useCallback) for memo to helpNOT Ne Zaman Optimize Edilmemeli
Erken optimizasyon bir tuzaktır. useMemo ve useCallback'ın bir maliyeti vardır: kapanım ve bağımlılıkların karşılaştırılması. Ucuz işlemlerde (10 öğeyi filtrelemek gibi) ek yük, faydadan ağır basar. Gerçek bir performans sorununu ölçtüğünüzde optimizasyon yapın.
Optimize Etmeden Önce Profil Oluşturma
Önbelleğe alma eklemeden önce gerçek oluşturma sürelerini ölçmek için React DevTools profil oluşturucusunu kullanın. Profil oluşturucu, hangi bileşenlerin en uzun sürdüğünü ve kaç kez oluşturulduklarını gösterir. Varsayımlara göre değil, kanıtlara göre düzeltme yapın.
Sabit Başvurular için useMemo
useMemo, hesaplamanın kendisini hızlandırmak için değil, bir alt bileşenin önbelleğinin veya etkinliğinin gereksiz yere yeniden çalışmasını önlemek amacıyla bir başvuruyu sabit tutmak için de kullanışlıdır.
// Without useMemo, this creates a new array every render:
const config = useMemo(() => ({ endpoint: '/api', timeout: 5000 }), []);
// Without memoization, useEffect would re-run on every render:
useEffect(() => { initSDK(config); }, [config]);useCallback Bağımlılıkları
useCallback, useEffect ile aynı bağımlılık kurallarını izler. Geri çağırma işlevinin kullandığı dış kapsamdaki her değişkeni ekleyin. Durum ayarlayıcıları (useState'ten gelenler) her zaman sabittir ve bağımlılıklarda yer almaları gerekmez.
useMemo ve useCallback İlişkisi
useCallback(fn, deps), useMemo(() => fn, deps) ile eşdeğerdir. Aynı mekanizmayı kullanırlar — useCallback, özellikle işlevleri önbelleğe almak için kullanılan bir kısayoldur.
Liste Öğesi Önbelleğe Alma
Yaygın bir desen şudur: liste büyükse ve sık sık yeniden oluşturuluyorsa liste öğesi bileşenlerini önbelleğe alın. Önbelleğe almayı etkisiz hâle getirmemek için useCallback ile sabit geri çağırma işlevleri aktarın.
const MemoRow = React.memo(Row);
const handleEdit = useCallback((id) => edit(id), []);
const handleDel = useCallback((id) => remove(id), []);
{rows.map(row => (
<MemoRow key={row.id} row={row} onEdit={handleEdit} onDelete={handleDel} />
))}Bağlam Değerini Önbelleğe Alma
Sağlayıcının üst bileşeni yeniden oluşturulduğunda tüm tüketicilerin yeniden oluşturulmasını önlemek için bir Bağlam Sağlayıcısına aktarılan değeri önbelleğe alın.
const value = useMemo(() => ({ user, login, logout }), [user]);Kısa Kontrol
useCallback ne amaçla kullanılır?
Özet: useMemo ve useCallback
useMemo, maliyetli hesaplanmış değerleri önbelleğe alır. useCallback, işlev başvurularını önbelleğe alır. React.memo, özellikler yüzeysel olarak değişmediğinde yeniden oluşturmayı atlar. Bileşen düzeyinde performans için üçünü birleştirin. Önce profil oluşturun — erken önbelleğe alma, fayda sağlamadan karmaşıklık ekler. Sabit başvurular, alt etkinliklerin ve önbelleklerin gereksiz yere yeniden çalışmasını önler.
Sıkça Sorulan Sorular
“Performans için useMemo ve useCallback” dersi ücretsiz mi?
Evet — “Performans için useMemo ve useCallback” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Performans için useMemo ve useCallback” dersinde ne öğreneceğim?
Pahalı hesaplamaları useMemo ile, kararlı işlev başvurularını useCallback ile önbelleğe alarak gereksiz alt bileşen yeniden oluşturmalarını önleyin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Performans için useMemo ve useCallback” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Genel Durum için useContext
- Karmaşık Durum için useReducer
- Performans için useMemo ve useCallback
- Özel Hook'lar: Yeniden Kullanılabilir Mantığı Çıkarma