Exceptionally deep React stack traces

[danvk]

Looking at the CPU profile for a React app in Chrome, I get 65 layers deep into React without ever reaching my own code:

With every layer, I lose a little bit of performance. These deep call stacks also make it difficult to debug which parts of my code need more work.

1. Is this expected behavior? While this is a debug build of React, I don't see anything different in the production version. The call stacks are just as deep, only the names of the functions are mangled.
2. Is it possible to inline some of these function calls for production React?

I can't say whether this is genuinely a performance issue, but it certainly makes debugging performance issues unpleasant.

I'm on React 0.14.0.

[maddie927]

This would definitely be a nice to have. I heard someone from the RxJS team say last month that they managed to refactor for 1. less allocations and 2. shorter stack traces, and saw huge performance improvements (linearly with reduced allocations) in version 5. I'm sure the problems aren't exactly the same, but it's at least an example of a similar problem that was fixed. It's worth a look!

[quantizor]

@danvk Exclude the react stuff via blackboxing in your Chrome dev tools, should help a lot.

[gaearon]

This should probably get better when incremental rendering is implemented. If you’re interested in this work, you can track #6170.

There was also a suggestion about using a neat hack to “fake” the stack in #3586, and another suggestion to make Chrome async stack trace debugger “see” React components in #3586 (comment). You are welcome to explore those ideas if you’d like.

[STRML]

Just wanted to add onto this, our stacks are so deep, we're starting to see what looks like a bug in the Chrome profiler:

It's hard to see exactly, but it appears that the stack is getting so huge that it's just 'falling off' the flame graph and being placed over to the right. We have a pretty deep (sometimes 40-50+ deep) component tree.

This wouldn't bother me much, but it appears to also be causing the profiler itself to crash with Maximum Call Stack Exceeded errors, making it very difficult to get good performance metrics out of my application anymore.

[gaearon]

This might be better directed at the Chrome team though.
@paulirish might be interested in this.

Stack traces should get smaller after we start tackling #6170.

[gaearon]

We just released React 16 beta which doesn’t have deep stack traces.
I think we can close this now.