Reactjs app slows down with open Chrome dev tools

Question

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?

Answer 1

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.