React Devtools - How do i find what proses running between each rendered when using profiler?

Question

I'm struggle to track why my Home page taking so long to navigating into Wishlist page, I'm using React Devtools and click record while pressing Wishlist Icon, and here's the result

I don't know how to trace the gap between initial render (134.3ms) and 2nd render (843.4ms), why it takes so much time. The result makes my screen stuck at homepage for 843ms and then navigate to Wishlist when pressing Wishlist Icon.

Any idea how do i track the gap for each Rendered?

Answer 1

You're not saying if you're using React of react native but anyway, normally in react dev tools you can use the flame graph to see which component re-renders and how long did it take to render.

Here's the documentation : https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html

See the image below: