CODEWITHSUNDEEP
reactjs
Tony Jen
Tony Jen

Reputation: 663

How to display performance in a react render function

I have a react render function and I would like to print out how long it takes to run the function. My code stub is here. I'm using performance-now library and ES6+.

Now the last line I'm suppose to print out how long it took to run the render function, but nothing shows. If I just show the last line, then it works. But I want to show the performance in the top of the app and not on the bottom.

const start = now();
    const {list,load} = this.props; // eslint-disable-line
    return (
      <div className="container">
      <Helmet title="Experient Page"/>
      <h1>Experiment Page</h1>
      <button onClick={() => {load(Math.floor((Math.random() * 100) + 1));}}>
       Click to reload.
      </button>
      <p id="result"></p>
      {
        list.map((foo) => {
          return <div>Hello, {foo}!</div>;
        })
      }
      {() => {
        document.getElementById("result").innerHTML = 'Total time rendered is ' + (now() - start); // eslint-disable-line
      }}
      </div>
    );

Upvotes: 1

Views: 1667

Answers (2)

Inacio Schweller
Inacio Schweller

Reputation: 1986

Just use the React.js Perf API, here. Don't forget to use development's React bundle and not the production one.

Upvotes: 2

Tucker
Tucker

Reputation: 588

I don't why it's not showing for you but have you tried using componentDidMount() rather than inside of your render?

Also, React's performance tools do a great job detecting wasted renders: https://facebook.github.io/react/docs/perf.html

Upvotes: 0

Related Questions