callstack / reassure

Performance testing companion for React and React Native
https://callstack.github.io/reassure/
MIT License
1.27k stars 28 forks source link

[BUG] 0.0 ms render duration #532

Open siddharthkul opened 1 week ago

siddharthkul commented 1 week ago

Describe the bug 👋 Hey team, I am experimenting with integrating reassure into my monorepo. We maintain 2 packages: web and mobile.

For mobile (react-native) we are seeing an issue where all benchmarks show 0.0 ms render duration for all tests. When I affect render counts, we are able to see changes show up in the mobile benchmarks.

This is not the case for web (react) package which shows correct render and duration info.

Screenshot 2024-10-11 at 2 14 44 PM
mdjastrzebski commented 5 days ago

@siddharthkul thanks for reporting this. As far as I can tell from the source code, it seem that the onRender callback from React.Profiler got called exactly one per each component (you have render count == 1). This is the first issue of such type, so I can guess that one of the following have happened:

  1. You are testing really small components and a relatively fast machine and they really render under 0.5ms, which gets rounded to 0.
  2. You have some mocking that effectively makes the components really cheap to render (see pt. 1)
  3. You are using Jest fake timers which might interfere with React.Profiler component

What you could do is to add artificial code to your component(s) with the purpose of slowing them down to detect if Reassure can pick it up. Something like:

function MyButton() {
  // Dummy code to make sure component has non-zero render time
  for (let i = 0; i < 10_000; i += 1) {
     console.log("AAA");
  }

  return <JSX... />
}