ライブラリ紹介

why-did-you-render

コンポーネントが再 Rendering されたときに、何が起因で再 Rendering が起こったのかを console に出してくれる君。
Statefull な Component が多いときに入れておくと便利そう。

welldone-software/why-did-you-render

使い方は、Root となる箇所で以下のように書いとくだけ。
すべての Component で更新がかかったときにログを出してくれる。

import whyDidYouRender from "@welldone-software/why-did-you-render"
import React from "react"

if (__DEV__) {
  whyDidYouRender(React)
}

React Hooks を使っている場合は、useWhyDidYouUpdateなるものを見つけたので、こちらを使ってみると良いかも。

useWhyDidYouUpdate React Hook - useHooks

react-native-slowlog

処理に 16ms 以上かかりフレーム落ちが発生した際に Yellow Box や console.log を出して知らせてくれる君。

jondot/react-native-slowlog

こちらは、各 component の constructor で呼び出してやる必要がある。
whyDidYouRender のようにシュッといかないのがちょっと不便。

import slowlog from "react-native-slowlog"
import React from "react"

class Master extends Component {
  constructor(props) {
    super(props)
    // __DEV__を見て、よしなにログを出さないようにしてくれる
    slowlog(this, /.*/)
  }
}

React Profiler API

React 16.9 から導入された、Component の Rendering 時間を細かく出してくれる君。
公式なので追加ライブラリなしに使えて、とても良い気がしている。

Profiler API – React

チェックしたい Component を React.Profiler で Wrap してやると、実際に掛かった Rendering 時間をcallbackで返してくれる。

const component = props => (
  <React.Profiler id="MyComponent" onRender={onRenderCallback}>
    <MyComponent />
  </React.Profiler>
)

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime,
  interactions
) {
  console.log(
    `id: ${id}, phase: ${phase}, actualDuration: ${actualDuration}, baseDuration: ${baseDuration}, startTime: ${startTime}, commitTime: ${commitTime}, interaction: ${interaction}`
  )
}