How to do perf analysis in React 16

Question

The React docs state that react-addons-perf does not work with React 16, but that Chrome's built-in tools provide equivalent functionality. I have not found this to be the case.

For instance, let's say that I've made the classic mistake of not including a proper key on a list of elements (demo code is on GitHub):

  render() {

    const items = this.state.items.map((item, index) => <ListItem key={index} name={item.name} />)

    return <div>
      <button onClick={this.addItem}>Add item</button>
      <ul>{items}</ul>
    </div>;
  }

The key={index} issue will cause every ListItem to re-render when I add an item to the list. Using React 15 perf tools, I can easily discover this:

Once I apply the fix, I can see that the problem has gone away:

However, with React 16 and the Chrome dev tools, I'm not sure how to get equivalent information. (Demo code with React 16.) Here's the profiling results from when the bug was present:

And here are the profiling results from when the bug was absent:

I don't know how I'd look at these profiling results and get the same information that react-addons-perf was providing. And, my results don't look anything like the React docs:

I'm on Chrome 63.0.3239.108. Is the React team on a different version of Chrome, or do you need to enable special flags to make this work?

Potentially related: How can I measure wasted renders in React 16?.

tl;dr

• How can I get useful information from the Chrome profiler?
• Why do my profiler sessions look different from the React docs?

Update

Thanks Rob. M! Turns out I was looking in the wrong tab in the dev tools. When I open the User Timing section, I see the difference between the good and the bad:

Bad, with many ListItem updates:

Good, with one ListItem update:

Answer 1

React events are logged under the "User Timing" label - if you expand that label instead of "Main" you should find the component performance data you are looking for.