I am trying to solve a performance issue with a component that is nested within a few layers. When using the React Profiler (React 16.5.2) I can see timings and commits, but I'm see a surprising number of 100% grey commits between active ones. In the following picture there are 16 blank commits for every one meaningful commit:
How can I determine where these extra commits originate from? I see a ~1-2s lag time before the component visually updates, and I am trying to nail down if it is these large gaps of grey commits that might be delaying meaningful commits.
Edit: More Info -
All components in the chain are pure. Only one component makes use of additional lifecycle methods and it's componentDidUpdate to add/remove a listener to the document.