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):
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.
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
tooverflow-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
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.