<Profiler> programatik olarak bir React ağacınının performansını ölçmenizi sağlar.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

Referans

<Profiler>

Bir bileşen ağacını <Profiler> ile sarmalayarak render performansını ölçebilirsiniz.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

Prop’lar

  • id: Kullanıcı arayüzünün ölçtüğünüz bölümünü tanımlayan bir string.
  • onRender: Profilleme yapılan ağaçtaki bileşenler her güncellendiğinde React onRender callback’ini çağırır. Hangi bileşenlerin render edildiği ve ne kadar sürede render edildiği bilgilerini alır.

Uyarılar

onRender callback’i

React onRender callback`inizi neyin render edildiği bilgisi ile çağıracaktır.

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Render zamanlamalarını topla veya log'la...
}

Parametreler

  • id: Yeni commit edilmiş <Profiler> ağacının id string prop’u. Bu, birden fazla profilleyici kullanıyorsanız ağacın hangi bölümünün commit edildiğini belirlemenizi sağlar.
  • phase: "mount", "update" ya da "nested-update". Bu, ağacın ilk kez mi yüklendiğini yoksa prop, state veya hook’lardaki bir değişiklik nedeniyle mi yeniden render edildiğini bilmenizi sağlar.
  • actualDuration: Mevcut güncelleme için <Profiler> ve onun alt öğelerini render etmek için harcanan milisaniye sayısı. Bu, alt ağacın memoizasyondan ne kadar iyi yararlandığını gösterir (örneğin memo ve useMemo). İdeal olarak, bu değer ilk yüklemeden sonra önemli ölçüde azalmalıdır, çünkü alt öğelerin birçoğu yalnızca belirli prop’ları değiştiğinde yeniden render edilmedir.
  • baseDuration: Herhangi bir optimizasyon olmadan tüm <Profiler> alt ağacını yeniden render etmenin ne kadar zaman alacağını tahmin eden milisaniye sayısı. Ağaçtaki her bileşenin en son render süreleri toplanarak hesaplanır. Bu değer, render işleminin en kötü senaryo maliyetini tahmin eder (örn. ilk yükleme işlemi veya memoizasyon olmayan bir ağaç). Memoizasyonun çalışıp çalışmadığını görmek için actualDuration ile karşılaştırın.
  • startTime: React’in mevcut güncellemeyi ne zaman render etmeye başladığını gösteren sayısal bir zaman damgası.
  • commitTime: React’in geçerli güncellemeyi ne zaman commit ettiğini gösteren sayısal bir zaman damgası. Bu değer, istenirse gruplandırılabilmeleri için bir committeki tüm profilleyiciler arasında paylaşılır.

Kullanım

Render performansının programatik olarak ölçülmesi

Render performansını ölçmek için <Profiler> bileşenini bir React ağacının etrafına sarın.

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <PageContent />
</App>

<Profiler> iki prop alır: bir id (string) ve React’in ağaç içinde bir bileşen her güncelleme “commit” ettiğinde çağırdığı onRender callback’i (fonksiyon).

Tuzak

Profilleme, ekstra bir yük getirdiği için varsayılan olarak canlı ortamda devre dışı bırakılmıştır. Canlı ortamda profilleme yapmak için profilleme özelliklerinin etkin olduğu özel bir canlı ortam sürümünü etkinleştirmeniz gerekmektedir.

Not

<Profiler>, ölçümleri programatik olarak toplamanızı sağlar. Etkileşimli bir profilleyici arıyorsanız, React Developer Tools içindeki Profiler sekmesini deneyin. Benzer işlevselliği bir tarayıcı uzantısı olarak sunar.

Uygulamanın farklı bölümlerinin ölçülmesi

Uygulamanızın farklı bölümlerini ölçmek için birden fazla <Profiler> bileşeni kullanabilirsiniz:

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content />
  </Profiler>
</App>

Ayrıca <Profiler> bileşenlerini iç içe geçirebilirsiniz:

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content>
      <Profiler id="Editor" onRender={onRender}>
        <Editor />
      </Profiler>
      <Preview />
    </Content>
  </Profiler>
</App>

<Profiler> bileşeni hafif bir bileşen olsa da, sadece gerektiği zaman kullanılmalıdır. Her kullanım uygulamaya CPU ve bellek yükü ekler.

Previous<Fragment> (<>)
Next<StrictMode>