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.
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:
Is there any way I could quickly find what could be causing these long layout effects using either the React or Chrome Devtools?