You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> You can drag this toolbar to any corner of the page
114
+
115
+
### Render Outlines
116
+
By default, react scan will show outlines over components when they render.
117
+
> interact with your page to try it out!
118
+
119
+
If you want to turn the outlines off, you can use the toggle to turn them off through the toolbar. This will persist across page loads and will only re-enable when you toggle it back on:
If you want to find out why a component re-rendered, you can click the icon at the very left of the toolbar, and then click on the component you want to inspect
Anytime the component renders, React Scan will tell you what props, state, or context changed during the last render. If those values didn't change, and your component was wrapped in `React.memo`, it would not of rendered.
128
+
129
+
To the right of the of the "Why did this component render" view, you will see the component tree of your app. When a component re-renders, the count will be updated in the tree. You can click on any item in the tree to see why it rendered.
130
+
131
+
132
+
### Profiling slowdowns in your app
133
+
134
+
Re-render outlines are good for getting a high level overview of what's slowing down your app, and the "Why did this render" inspector is great when you know which component you want to debug. But, what if you don't know which components are causing your app to slowdown?
135
+
136
+
React Scan's profiler, accessible through the notification bell in the toolbar, is an always on profiler that alerts you when there is an FPS drop or slow interaction (click, type). Every slowdown and interaction has an easy to understand profile associated with it.
- This ranks how long it took to render your components. If the components are the same, the time it took to render those components will be added (if you render 1000 `ListItem`'s , and they each take 1s to render, we will say `ListItem` took 1000s to render )
- this table is telling you that there were 4 of this type of component rendered, and all 4 of them had their close, style, and hide props change. If those didn't change, and the component was React.memo'd, it would not have rendered
152
+
- If you click the arrow on the side of each bar, it will show you which component rendered it, and how long that component took to render. This is great for giving context to what component you're looking for.
- The overview gives you a high level summary of what time was spent on during the slowdown or interaction.
156
+
- This breaks down if the time spent was on renders, react hooks (or other javascript not from react), or the browser spending time to update the dom and draw the next frame
157
+
- This is great to find out if React was really the problem, or if you should be optimizing other things, like CSS
0 commit comments