Performance
- React Native kursu
- Uzman
- Ders 45/47
- 6 dk
Performance profiling ve optimizasyon eklersin.
Performance profiling
Performance profiling, uygulamanın nerede yavaşladığını ölçmektir. React Native'de React.Profiler bileşeni bir alt ağacın render süresini verir. useMemo ve useCallback ile gereksiz hesap ve işlev yeniden oluşturmayı engellersin.
Örnek: <Profiler id="dashboard" onRender={(id, phase, actualTime) => console.log(id, phase, actualTime)}>...</Profiler>. Bu, her render'da süreyi loglar. useMemo ağır hesapları önbelleğe alır: const sorted = useMemo(() => sort(metrics), [metrics]). Bu, metrics değişmedikçe yeniden sıralama yapmaz. Ölçmeden optimize etme; önce Profiler ile darboğazı bul.
useMemo kullanımı
useMemo ağır bir hesabı önbelleğe alır. İkinci parametre bir bağımlılık dizisidir; bağımlılıklar değişmedikçe hesap yeniden yapılmaz.
Örnek: const max = useMemo(() => Math.max(...values), [values]). Burada values değişmedikçe Math.max yeniden çağrılmaz. Bu, büyük dizilerde fark yaratır. Ama küçük hesaplar için useMemo ek yük getirir; her yerde kullanma. Yalnızca Profiler'ın yavaş gösterdiği yerlerde kullan. Aşırı optimizasyon kodu okunamaz hale getirir; ölç, sonra optimize et.
Uygulama useMemo ile önbelleğe al
Önceki kodun üstüne App bileşeninin içinde bir useMemo çağrısı ekle. metrics bağımlılık dizisi olsun. İçinde Object.keys(metrics) hesaplasın ve metricKeys değişkenine ata.
Başlangıç kodu
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [metrics, setMetrics] = useState({});
return (
<View>
<Text>İzleme Paneli</Text>
</View>
);
}
const MetricCard = memo(function MetricCard({ label, value }) {
return <Text>{label}: {value}</Text>;
});
// App içinde useMemo ile metricKeys hesaplaÖrnek çözüm
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [metrics, setMetrics] = useState({});
return (
<View>
<Text>İzleme Paneli</Text>
</View>
);
}
const MetricCard = memo(function MetricCard({ label, value }) {
return <Text>{label}: {value}</Text>;
});
function App() {
const [metrics, setMetrics] = useState({});
const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);
return (
<View>
<Text>İzleme Paneli</Text>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aracı rolüne eşle
| Kavram | Anlamı |
|---|---|
React.Profiler |
Render süresi |
useMemo |
Hesap önbelleği |
useCallback |
İşlev önbelleği |
memo |
Bileşen önbelleği |
2 useMemo bağımlılık dizisi
const metricKeys = useMemo(() => Object.keys(metrics), ____);const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);Açıklama: [metrics] bağımlılık dizisidir.
3 useMemo ne zaman kullanılmaz?
useMemo(() => x + 1, [x])- Profiler yavaş gösterdiğinde
- Büyük dizilerde
- Ağır sıralamada
- Küçük hesaplarda Doğru cevap
Açıklama: Küçük hesaplarda useMemo ek yük getirir.