tree-shaker icon indicating copy to clipboard operation
tree-shaker copied to clipboard

RangeError: Maximum call stack size exceeded

Open barvian opened this issue 1 year ago • 1 comments

Repro

I was using the playground and somehow crashed it 😅 . Thanks so much for working on this by the way, it seems like it has the potential to dramatically improve the web 👋

barvian avatar Dec 05 '24 06:12 barvian

I just tried to fix this problem but found it harder than I thought. Here is the memo:

For ordinary function calls, the two following cases are considered recursion:

  1. One function instance is called while it's already in the call stack.
  2. One function instance is created while another instance of this function is in the call stack.

However, for the React component function, it's currently hard to detect whether two tags are equal/non-equal/both-possible, to apply rule 1 above.

If we change the two rules into "one jsx constructs itself", then we will get a poor tree-shaking result in the following case:

function wrapper(Comp) {
  return function Wrapped() {
    return <Comp />
  }
}

const C1 = wrapper(function () {
  return <div />
})
const C2 = wrapper(function () {
  return <C1 />
})

export function App() {
  return <C2 />
}

Because the jsx <Comp /> will be considered as recursion.

btw, thank you for your interest in this project~

kermanx avatar Dec 06 '24 09:12 kermanx