Anyone know of a good crash course of how to get started with debugging performance in React? I noticed my site is starting to get slow. It's very possible (or rather, likely) that's a result of rendering ~300 items into a list and that's simply never going to be fast (next to-do is lazy loading, like, grab the first 20 items and don't bother rendering the rest unless you scroll to the bottom) - but, it's probably not good that I don't currently have the knowledge to verify that's the issue. How do I measure, like, what my code is doing/if I'm using React badly/stuff like that?
I messed with Chrome dev tools for the first time and got this output:
Seems like this is all React stuff?
One other question along the lines of "how do I make this not ****ty" - the way my page works at the moment is, I have an app state with a few lists of data, and a main display list; you click buttons that change which list is in the main display list. Through the magic of state setting, everything Just Works but I assume a source of slowness is that every time you switch, it's probably re-rendering every item in the list over again, even if that list has been rendered before. Is there a way to, like, render all list views and store them somewhere, then (instantly, I hope?) swap out which one is currently displayed when the button is clicked, as opposed to recursively re-rendering the entire world? (I may be/am likely misunderstanding basic things about the nature of the DOM in asking such a question)