How to debug react performance on localhost

Question

I have react app running on localhost:3000. I have created very basic application (nothing I haven't did before), but my app performance is poor.

My button contains simple transition CSS attribute and as you can see above the performance results are very slow.

button{
    background: none;
    color: white;
    outline: none;
    border: 2px solid rgb(255, 153, 0);
    font-size: 20px;
    padding: 5px 20px;
    cursor: pointer;
    width: 200px;
    border-radius: 5px;
    transition: 300ms all ease-in-out;
}
button:hover{
    background: rgb(255, 153, 0);
}

I have tried using react performance tool chrome extension but the result are below:

Although I followed the documentation it refuses to work.

Step one: npm install react-perf-devtool

Step Two (index.js):

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const { registerObserver } = require('react-perf-devtool');
const options = {
  shouldLog: true,
  port: 8080,
  timeout: 12000 // Load the extension after 12 sec.
}

function callback(measures) {
  console.log(measures);
}

// assign the observer to the global scope, as the GC will delete it otherwise
window.observer = registerObserver(options, callback);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Also tried:

Deleting the app
Reinstall it
Remove components and check if they causing the problem
Run different app that works perfect

What can cause poor performance on so basic react application?

Did you try different browsers? Did you try classic react devtools? Are you sure you don't have something stupid (eg. a loop) somewhere in your code? — k-wasilewski
– k-wasilewski, Commented Mar 5, 2021 at 14:46
@k-wasilewski I'm sure, there is nothing but design and react router in my current project. Same on Edge browser — ExCluSiv3
– ExCluSiv3, Commented Mar 5, 2021 at 14:55

ExCluSiv3 · Accepted Answer · 2021-03-05 15:06:59Z

1

The problem was caused by image decoding, by using chrome dev tools I entered performance tab and was able to see image decoding value with hude loading and processing time.

So I figured out that probably because I converted Illustrator file from svg to jpg.

I solved that by uploading my file to online convertor tool and converted it to webp (could convert it to any extension and it probably would of worked).

Once I did that the performance was fast as usual.

answered Mar 5, 2021 at 15:06

ExCluSiv3

1842 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to debug react performance on localhost

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related