CODEWITHSUNDEEP
reactjsreact-routerreduxreact-redux
dt_medicin
dt_medicin

Reputation: 183

Reactjs app slows down with open Chrome dev tools

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?

Upvotes: 6

Views: 2140

Answers (2)

Sean
Sean

Reputation: 1

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.

Upvotes: 0

Igor Afanasyev
Igor Afanasyev

Reputation: 581

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.

Upvotes: 4

Related Questions