Performance

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.

Örnek çözümü göster

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>
  );
}

Kendini test et

Aracı rolüne eşle

React.Profiler

Render süresi
useMemo

Hesap önbelleği
useCallback

İşlev önbelleği
memo

Bileşen önbelleği

useMemo bağımlılık dizisi

const metricKeys = useMemo(() => Object.keys(metrics), ____);

Cevabı göster

const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);

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
Cevabı göster

Küçük hesaplarda — Küçük hesaplarda useMemo ek yük getirir.

Sıradaki ders: Monorepo

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler