2

While working in React, I'm noticing a specific UI action causes the app to freeze entirely, so I decided to profile it using the React Dev Tools Profiler.

Interestingly, there is a specific render that has massive 2145 millisecond duration for something called "Layout Effects". This coincides with the freezing I'm seeing.

DevTools Screenshot One

I tried looking into what exactly is causing this, but when hovering over specific yellow / blocks I never get any numbers for "layout effects" to tell me which component could be causing this. I only get a single number for what I assume is the render. For example:

DevTools Screenshot Two

Is there any way I could quickly find what could be causing these long layout effects using either the React or Chrome Devtools?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
sgarcia.dev
  • 5,671
  • 14
  • 46
  • 80

1 Answers1

0

One of the ways you can figure out which component is causing the slow performance is by commenting some of the components and rending the app to see if the performance improves . I found that approach to be easier than the React Profiler.

Rakesh Nallam
  • 235
  • 2
  • 6
  • 17