mercredi 3 janvier 2018

How to do perf analysis in React 16

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:

image

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

image

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:

image

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

image

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:

image

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

Aucun commentaire:

Enregistrer un commentaire