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:
The profiler displays which props changed but I actually want to see what the props look like as shown 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.