React Scan 0.1.0
React scan 0.1.0 has arrived, with it comes new features, performance improvements, and stability improvements:
- Re-architected outline drawing w/ Offscreen Canvas to eliminate cases react-scan would appear choppy under high cpu load
- Introduces an improved "whats changed" view to component inspector, which provides exactly what data changed inside a component that caused a re-render
- Added the ability to copy the props and state of a component you are inspecting to clipboard
- When enabling/disabling react-scan through the toolbar, the selection will persist across page reloads, preventing react-scan from unintentionally re-enabling
- No longer draw outlines around the part of the component that is not visible
- This change is noticeable when components re-render inside of scroll areas
- Reduced time spent by react scan to detect renders by 2x
- Condensed react-scan toolbar UI to lower footprint on websites
- Improved UI and animation consistency of toolbar
Removals:
Options:
- playAudio
- maxRenders
- renderCountThreshold
- resetCountTimeout
- report
- alwaysShowLabels
- smoothlyAnimateOutlines
- trackUnnecessaryRenders
To be added back in a future release
- withScan
- playAudio
Offscreen canvas
On the previous version of react-scan, we would draw all outlines on the main thread when we detected component renders. When the main thread became blocked due to large tasks (for example, lots of components re-rendering), we would not be able to complete ongoing render outline animations, giving the appearance of the outlines "freezing".
We now perform all drawing and animations on a separate thread using the Offscreen Canvas worker API. This allows us to smoothly complete our animations even if the main thread is completely blocked.
Whats changed
Our new version of what's changed will allow you to track all changes happening inside a component when selected using the component selector tool on the toolbar.
After detecting the state/props/context changes, we will tell you exactly what part of the data changed, and if the previous and current states are structurally the same.
Copying props/state to clipboard
Hover over the value you want to copy in the component inspector and click the copy icon, the value will be copied to your clipboard
Enabling disabling persisting
We don't want react-scan to get in your way, so we will persist the toolbar enabled/disable state of the react-scan outlines to your local storage, and always give that precedence over your local react-scan configuration when using the toolbar
Improved react scan render detection
We've modified our render detection logic to run less code unrelated to tracking if a component instance re-rendered, and instead deferring the unrelated computation to when the browser is under less load. This, along with minor lower level optimizations, results in a ~2x speed up in the code react scan runs every time your components re-render.