Hooks call stack broken on Chromium based browsers

[alloy]

I’m on macOS 12.0.1 (x86_64) and am using this example app.

I have tested this on:

• MS Edge 96.0.1054.62 (Official build) (x86_64)
• Chromium 85.0.4183.102 (Developer Build) (64-bit)

It does, however, work correctly with Firefox.

[lahmatiy]

The problem arises because the example uses RRT in conjunction with WhyDidYouRender, which patches hook functions, thereby adding an additional entry to the stack trace. Furthermore, SpiderMonkey (Firefox) and V8 generate stack traces differently, which resulted in the WhyDidYouRender wrapper over the hook not being included in the path in Firefox. Path construction in RRT was based on the assumption that all function names in the path should start with "use", which is not always the case. I have revamped this functionality so as not to rely on function names. Now, paths are generated consistently across all browsers.

Chrome:

Firefox:

You may notice the difference in paths across browsers in a "hook" name before "useState". That's a WDYR wrapper over the React's hook. WDYR tries to set a name for the wrapper function which works for SpiderMonkey but ignored by V8.

Also you may notice a component name in the beginning of a path. That's because of WDYR wraps component functions as well. If you disable WDYR then a path will be shorter by 2 entries and consistent across browsers:

Fixes will be available in next release of RRT.