"Why did this render?" section's CSS hides the reason when there are lots of renders
justingrant opened this issue · 1 comments
When there's a very long list of renders, the "Why did this render?" section is collapsed so that it hides the reason (and sometimes even hides the label!). When I changed the CSS of that section from overflow-y:auto
to overflow-y:visible
, then the reason always shows up correctly regardless of how many renders are in the list below it.
When dev tools are docked on the bottom (label partially hidden):
When dev tools are docked on the right (reason hidden):
Repro steps:
git clone https://github.com/justingrant/why-render-repro.git
cd why-render-repro
npm install
npm start
- Open React Dev Tools, go to the profiler tab, enable the "why render" setting, and start profiling
- Scroll the calendar up ~10 rows and down ~10 rows (enough to cause a lot of renders)
- Stop profiling
- Click on the List component in the render tree
Expected: Reason shown under "Why did this render?"
Actual: "Why did this render?" apparently shown with blank reason... until you scroll the "Why did this render" label and then you'll find the reason was hiding under the "Rendered at:" heading but was hidden by the overflow-y: auto. If you change it to overflow-y: visible then the reason shows up normally.
BTW, the RDT version where I reproed this was from yesterday: React Developer Tools 5e8678a (6/13/2019)