I've got fairly large webapp built with React, Redux and React Router. It works fine until I open dev tools in Chrome and it noticeably slows down in 100 times. I've tryed to profile app in Chrome, but when I start profiling again using Chrome it starts working as fast as with dev tools closed and everything is OK.
Checked also Safari and Opera - their dev tools also slow down webapp. Why does React/Chrome affects performance so badly? Does it mean I misuse React or is this common issue for React+Chrome? Is there any workaround?
One thing I noticed today is that React Tools extension can significantly affect the performance of your React app in some cases. Since the purpose of the extension is to provide a realtime view of your React components, it tries to update its representation as your page changes, and on some heavy mutations this adds delays.
In my case I have a table with ~650 rows that can be sorted by clicking on column headers. Without dev tools pane open, all works pretty smoothly (page updates within a second), but once I open dev tools and switch to 'React' tab, the entire tab (both my page and dev tools pane) stays unresponsive to clicks for extra 3-4 seconds after table sort.
Per Igor's comment, I was able to resolve this issue by removing React Dev Tools.
My app generates many blocks of text on a single button click (took upwards of 400+ ms to load the state changes), and removing React Dev Tools brought it back down to practical levels.
Related
This makes the workflow a lot harder. Is there a way to use react dev tools?
I also notice constantly that the extension dev tools take some time to load, like 1 to 2s, and because of that, it misses network requests... is there a way to speed it up? I mean, speed up the development workflow, maybe some way to let the extension use more memory? the first few requests do not show in the network tab, but they are sent to the server.
I'm talking about the dev tools that open when you click on the (service worker) link in the chrome://extensions/ tab or when you open the **
** and do right click > inspect
The standalone version of React Devtools works https://github.com/facebook/react/tree/main/packages/react-devtools
Since you can't load the script from localhost you will have to include it in your extension.
To do that, go to http://localhost:8097 (or wherever your react devtools is running), save the JS to a file in your Chrome extension folder and add that with a script tag to your html.
Be sure to remove it before publishing.
I also notice constantly that the extension dev tools take some time to load, like 1 to 2s, and because of that, it misses network requests... is there a way to speed it up?
You can try to use the Incognito Mode. There will be no extensions used. So, it will not affect your network requests.
I have WordPress shared hosted server with Hostinger and wanted to deploy my react app there. I connected to the server with SFTP and copied and pasted the build folder's contents into public_html/test-gpu-app.
The app works, but I've experienced the strangest issue: when accessing the page, a blank page is displayed for 5 or so seconds, and full render takes nearly 8 seconds.
I've deployed the boilerplate react app to ensure it wasn't something I coded poorly/inefficiently, and it experiences the exact same issue. When deploying to Vercel, the app loads instantly, so it's clearly something to do with the server.
Server usage isn't anywhere close to maxed out, and every other page on the site loads quickly. I'm at a loss, can't figure out where to go from here.
The page:
https://artofpc.com/test-gpu-app/
GTMetrix test:
https://gtmetrix.com/reports/artofpc.com/e9IhhRzi/
Any help would be massively appreciated.
If you run the chrome performance profiler, you will see that the only function calls happening when the content loads are by a script called cmbv2.js, which appears to be a data tracking framework or something like that.
Your app code is downloaded only # 5 seconds or so, likely an arbitrary timeout by the lib. I'm guessing this is something like an analytics framework waiting to display content before JS initializes so that users don't see flashes of content. Do you have settings that automatically defer JS or anything like that by third party libs?
It reminds me of something like a layer that sits between HTML and the end user, auto deferring JS execution or something like that.
Be warned of this smell, future internet folks!
I made a PWA (progressive web app) a few weeks ago with React and some PWA configuration. From that moment, the name I gave the app still displays in the top bar when I try to run any other app on localhost:3000.
Apart from this, there were no issues with running applications on localhost:3000 for a long time, so it didn't bother me. But since last week, when I tried starting my React app (yarn start) on port 3000, my app won't render anymore.
I figured it might have something to do with the browser's cache settings, so I tried opening the app in another browser and it suddenly worked.
Notice that the name has now changed back to "React App" instead of the PWA name. Since it worked on the other browser I started testing some routes and tried to delete my cache in the browsers I normally use.
I tried adding something to the route (for example: localhost:3000/test) and this also redirected me to the right page (from the right application).
Is my PWA running somewhere in the background and causing issues or is there some browser configuration I am not setting right?
It is probably cache, it's not possible to run two apps under same port at the same time (at least by default).
You should have set that cache shouldn't work on dev environment to prevent that happening.
You can try incognito or open dev tools in Chrome => right click on refresh icon and select "Empty cache and hard reload".
Also try unregistering service worker in your app or in browser dev tools.
A way good way to resolve this error is -
Right-click and press inspect element to open the dev tools.
Under the dev tools, head on to the "Application" tab.
Here, on the left side, you'll find an option "Service Worker".
Click on it, and from the left side, press unregister.
After this, you can press "Empty Cache & Hard Reload" and your application would work just fine.
Empty cache and hard reload
you should press Ctrl + F5 together
I am trying to get my react extension working for local development, but "Components" and "Profiler" is missing in the Chrome developer tools. This only happens for local development, any other production code is displaying the two tabs in the developer tools as expected. I was wondering if this can be resolved somehow? I triple checked if the tabs are hidden on that occasion, and they are not. As said, this only happens for development version. When I click on the extension, I get the following message:
This page is using the development build of React. 🚧
Note that the development build is not suitable for production.
Make sure to use the production build before deployment.
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.
Based on this information I should have the tabs displayed.
When I go to a production app and click on the React extension, I can see the following displayed:
This page is using the production build of React. ✅
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.
And I also see those two tabs without a problem.
Any idea why this would happen? I searched for a solution, but did not encounter one. The only thing I found was someone mentioning you need to set the environment variable REACT_APP_ENV. I tried to set this value in the .env file where I defined REACT_APP_ENV='dev' as well as REACT_APP_ENV='development'. It did not resolve the issue, even with application and browser restart.
This happened to me as well. Looks like a bug in Chromium, but a temp solution is:
Change the chrome DevTools theme, only once it is required.
Now open devtools, you find the extension tab in DevTools.
You can again change the theme whatever you want to keep and this will fix your problem.
Check this out:
https://github.com/facebook/react/issues/19002#issuecomment-637462179
Was having the same issue, the Components and Profiler tabs weren't showing up, so I tried changing the theme as suggested by BobTheBuilder, that didn't work, so tried setting the debug levels to Default + Verbose (in addition to the others) in the console and they finally showed up.
The steps that helped me:
Remove React Developer Tools extension
Install React Developer Tools extension
Open a brand new tab containing react app
Open Dev Tools
React Developer Tools should be available
I had the same issue where Components and Profiler tabs were not showing. What worked for me was to open up the DevTools settings and to click the 'Restore defaults and reload' button (under the 'Sync' heading).
The steps that worked for me
Open chrome extensions
Disable the react dev tools extension
Enable the react dev tools extension
Enable Developer mode
Refresh target page
Where steps 1 and 2 are the little slide control at the bottom right of the extension in the extension manager.
Step 4 is the slider in the top right above all the extensions in the manager.
Below is the screenshot of my attempt to profile some React app.
As you can see, InspectionPage component is selected, but there is no information about children components displayed in the Bottom-Up tab, like, for example, we can see here - https://twitter.com/dan_abramov/status/994577100077191168.
What's weird - it's not always the case. Sometimes it's available and sometimes not given seemingly exact same conditions.
After struggling with this myself, my answer here is the only definite workaround I've been able to find.
It appears to be an issue with the current stable release of Chrome. Using a newer version of Chrome, such as Chrome Dev or Canary, will allow you to use the breakdown until the update makes its way into a stable release of Chrome.
Sources:
React Github
Associated Chromium Forum Post