3

I'm using the npm packages for React:

"react": "^16.8.4",
"react-dom": "^16.8.4"

and React Dev tools version 4.2.0

I want to use React profiler to analyze the performance of my app however I don't see the actual content of the props nor state between commit phases:

enter image description here

The profiler displays which props changed but I actually want to see what the props look like as shown here:

enter image description here

In addition I wrapped my component with unstable_Profiler in order to log the interactions set using onRender callback as follows:

import React, { Component, Fragment, unstable_Profiler as Profiler } from 'react';

class MyApp extends Component {
  onRender = (
    id, // the "id" prop of the Profiler tree that has just committed
    phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
    actualDuration, // time spent rendering the committed update
    baseDuration, // estimated time to render the entire subtree without memoization
    startTime, // when React began rendering this update
    commitTime, // when React committed this update
    interactions // the Set of interactions belonging to this update
    ) => {
      console.log(`id=${id} phase=${phase} actualDuration=${actualDuration} baseDuration=${baseDuration}
      startTime=${startTime} commitTime=${commitTime}`)
      console.log('interactions', interactions)
  }

  render() {
    return (
      <Profiler id="123" onRender={this.onRender}>
        //MyApp component
      <Profiler>
  }
}

While I do see the logs for all onRender params the log for interaction displays always an empty set (while there actually are props).

Did anyone experience any issues like mine? I couldn't find any similar issues.

hitchhiker
  • 1,099
  • 5
  • 19
  • 44

0 Answers0