React Profiler

React Profiler ve render sürelerini öğrenirsin.

React Profiler

React, bileşen başına render süresini ölçen Profiler bileşeni verir. <Profiler> ile sarılan her bileşen için onRender callback'i çağrılır ve ayrıntılı süre bilgisi verir.

Callback; bileşen kimliği, aşama (mount/update) ve geçen süreleri alır. Bu, hangi bileşenin yavaş olduğunu görmeyi sağlar. React DevTools'ta görsel Profiler da vardır; grafik olarak süreleri çizer.

Render aşamaları

Profiler phase parametresi iki değer alır: mount (ilk render) ve update (state/props değişti). Her aşamanın süresi farklıdır; mount genelde daha uzundur ve tüm alt bileşenleri çizer.

actualDuration bu render'ın gerçekte aldığı süredir. baseDuration memoization olmadan alacağı süredir. İkisi arasındaki fark memo kazancını gösterir.

Uygulama Profiler ile sarma

Bir List bileşenini Profiler ile sar. onRender callback'i (id, phase, actualDuration) => console.log(id, phase, actualDuration) olsun. Profiler'ı React'ten içe aktar.

Örnek çözümü göster

import React, { Profiler } from 'react';

function List() {
  return null;
}

const WrappedList = () => (
  <Profiler id="list" onRender={(id, phase, actualDuration) => console.log(id, phase, actualDuration)}>
    <List />
  </Profiler>
);

export default WrappedList;

Kendini test et

Profiler callback adı

<Profiler ____={(id, phase, actualDuration) => console.log(id, phase)}>

Cevabı göster

<Profiler onRender={(id, phase, actualDuration) => console.log(id, phase)}>

actualDuration neyi ölçer?
- Bu render'ın gerçek süresini
- Toplam uygulama boyutunu
- Ağ istek sayısını
- Bellek kullanımını
Cevabı göster

Bellek kullanımını — actualDuration bu render'ın gerçek süresidir.
Profiler parçalarını eşleştir

mount

İlk render
update

State/props değişti
actualDuration

Gerçek süre
baseDuration

Memoization'sız süre

Sıradaki ders: Bottleneck

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler