Skip to content

v0.2.0
Compare
Choose a tag to compare
@RobPruzan RobPruzan released this 25 Feb 15:38
· 97 commits to main since this release
v0.2.0
164ba1c

Release v0.2.0

Introducing React Scan Notifications


Notifications is React Scan's solution to giving you context on which renders were problematic, and how to optimize them.

Notifications always run in the background, and scan your app for:

  • Slow Interactions
  • FPS Drops

If a slow interaction or large FPS drop is detected, React Scan will alert you in the toolbar that a slowdown was detected and a performance report was generated.

Note: It's possible to turn on audio alerts everytime there is a report generated through the Notifications panel

The Notifications panel provides you with:

  • A list of slowdown events collected in the sidebar
    • Note, React Scan will also collect data and generate reports even about fast interactions. It will just not explicitly notify you when fast interactions are collected.
  • A breakdown of what happened during the slow down

The breakdown contains of a ranked chart of component render times, and the time it took to run things outside of renders, like external JavaScript, React Hooks, or internal browser work after mutating the dom.

If a component could of been memoized and would of not rendered at all if it was, React Scan will show a "Memoizable" tag on the component bar

Highlighting a component bar in the chart will outline all instances of that component that rendered on the screen purple.

image

Clicking a component bar will tell you the props, state, and context that changed for those components during the slowdown.

If there are no props, state, or context changes, and the component is memoized, the render would be avoided.

The overview section provides a breakdown of what the browser spent time on. Which consists of:

  • Renders
  • Other javascript (like event handlers) and react hooks (like useEffect)
  • The time it took to actually paint and draw the screen after the javascript updated the DOM
image

Each section comes with a customized explanation of how you can optimize each based on the data collected.

If you don't want to optimize the problem yourself, or need a better explanation, you can use the "Prompts" tab to export the data as a prompt to an LLM in different formats:
image

These prompts contain more data than we actually visualize since some data was too hard to contextualize that a model could understand. These prompts also act as a guide on how to interpret the data we collect, since we have to explain in excruciating detail each piece of data we are providing the LLM with.

We hope you enjoy the new feature, we have found internally this acts as a massive speedup to debugging React performance issues compared to existing solutions (React Profiler, Chrome Profiler)

PR: #273

Assets 2
Loading