aidenybai / react-scan

Scan for React performance issues and eliminate slow renders in your app
https://react-scan.million.dev
MIT License
1.7k stars 12 forks source link

Possible integration with `@testing-library/react-render-stream` #15

Open phryneas opened 12 hours ago

phryneas commented 12 hours ago

Hi there, a few weeks ago I released @testing-library/react-render-stream, which, among other things, tracks which components rerendered during a single React render.

Thing is - right now, users have to do that tracking by hand by executing a hook in their components.

I'm aware of the hacks that this package is using, and it was a long-term goal to do something similar there. But now this seems to be around :)

Sooner or later I'll hopefully find the time to integrate with react-scan, but I already wanted to bring it up here - I'm currently swamped with work, and if you want to entertain the idea of playing around and making a PR on our side, it would be very welcome :)

aidenybai commented 3 hours ago

@phryneas package looks sick!

currently you can hook into lifecycle hooks, so if you know / have access to the functions itself, you can match the fiber in the onRender, and get the render data from there

import { setOptions } from 'react-scan';

setOptions({
  onCommitStart() {},
  onRender(fiber, render) {},
  onCommitFinish() {},
  onPaintStart(outline) {},
  onPaintFinish(outline) {},
});

console.log(getReport());