watchSyncEffect causes the Maximum call stack size to exceeded.

[cc-hearts]

Vue version

3.4.30

Link to minimal reproduction

https://play.vuejs.org/#eNp9VNtum0AQ/ZXRVgpEIhgr7YtL0qZtpKYPaZTmESmiMNgkyy7aXRxbiH/v7HIxUeK+MRdmzpyZsy27qutw2yBbsVhnqqwNaDRNfZmIsqqlMvBdVjUUSlbghQtr2HRvCregsAigVnJb5gjdkNrnJCKTQhvIU5PCBVwple5Dm+C3wFGszWYFy09RBN1pWKW17z8GUIocd6dwcTl8jTW0SZW5sS6qRD39s+UUQ5G/iSSCowFTVqjILRrOPydigOl7rrYXQJsImJUOrDlWc4YUP+UWle9yAgqd9v8AZBxT9UD1ZWN814e62sDYk4gcw74baPhx3jDcprxBm2xdY3xEMEXJ0ce6AJZR5Bp1iejoI170e6ONkWGwqnlqkCyA2O1ue1ZIdZGwkmLEqVtGwmD1jPvBay1HyMFeUIF4MavGAmY0sV2U6/BJS0EH48ZJWEZNSo7qd21K2kbCVuOgCUs5ly+/nM+oBh2j7p8NZs/v+J/0zvoSdqdQo9piwqYYEbRG04ev/9zijr6nYCXzhlP2f4L3qCVvLMY+7VsjcoI9y3Nob9xdl2L9oK93BoUeh7JAHe8uP2F04pbfY6Mf4J6HH8d9EYujhI4rroWX1GSb66LAzAS9vpwnKMWTdemNQ3qPxRG90ZnXms4mx6IUeGct3wFzW55Amn2NsILbpvpLPAyj2Zsa6/T9fvTq7Y2j0lnBAZZV4CspvRscpLWCQR3DQY/N6QIabgZJFynXSMEZM3NR9bmTXA64wzdSi3t2QjcGnJy8MuP5r69VSOCGmQveaHq4PL0XGZHeY3bABkhzNMGE0ubRYRwXbJyXWyJ0z5F02GaSS+JmYOELeApzj7blfYiiyOtIo18r2WisiEOr2wPu8clyI9HNuFd0TKdH61j+2TKwLydzb0fb9scCHa0lXhC0d16ER/rN6oNumY48PI9Y9w/GGSAe

Steps to reproduce

1. Scroll down to the bottom
2. Quickly hover 1490-1499 div element
3. 

What is expected?

Will not cause the maximum call stack size to be exceeded

What is actually happening?

An error: "Maximum call stack size exceeded"

System Info

No response

Any additional comments?

1. The error occurs in version 3.4.x
2. Reason for triggering (the resetScheduling call is triggered again by the scheduler call in queueEffectSchedulers)

function resetScheduling() {
  pauseScheduleStack--
  while (!pauseScheduleStack && queueEffectSchedulers.length) {
    queueEffectSchedulers.shift()!()
  }
}

[linzhe141]

WatchEffect and renderEffect call each other too many times, causing the stack to overflow.

[cc-hearts]

Whether or not it is possible to control queueEffectSchedulers not to be called recursively.🤔

For example:

let schedulerFlag = false
// ...
function resetScheduling() {
  pauseScheduleStack--
  if (schedulerFlag) {
    return
  }

  try {
    schedulerFlag = true
    while (!pauseScheduleStack && queueEffectSchedulers.length) {
      queueEffectSchedulers.shift()!()
    }
  }  finally {
    schedulerFlag = false
  }
}

[Doctor-wu]

Whether or not it is possible to control queueEffectSchedulers not to be called recursively.🤔

For example:

let schedulerFlag = false
// ...
function resetScheduling() {
  pauseScheduleStack--
  if (schedulerFlag) {
    return
  }

  try {
    schedulerFlag = true
    while (!pauseScheduleStack && queueEffectSchedulers.length) {
      queueEffectSchedulers.shift()!()
    }
  }  finally {
    schedulerFlag = false
  }
}

PR welcome

[Doctor-wu]

I'm afraid that we can't just simply ignore the resetScheduling when it's already resetting since it would cause sync scheduler not be invoked immediately which caused this error

[cc-hearts]

Is it possible to walk a ci in my pr?

[Doctor-wu]

Is it possible to walk a ci in my pr?

Just checked your PR and run ci test. But since I have been deeply debugged I'm afraid the fix won't work as well

[cc-hearts]

You're right. My program failed. 🤔

[Doctor-wu]

So I think this is not a Bug, since resetScheduling just worked as expected. In your case, triggerEffects invoked recursively and eventually caused the Maximum call stack size since queueEffectSchedulers are backlogged many jobs and each job will call triggerEffects again.

[Doctor-wu]

3.5.0-alpha.2 had refactored reactivity system, I tried this case in 3.5.0-alpha.2 and it works well, so this error won't occur after that

[cc-hearts]

ok, thanks