Version
3.6.0-beta.12
Reproduction link
github.com
Steps to reproduce
- Open packages/runtime-core/src/hydration.ts
- Find the while loop inside hydrateElement at line 431
- Observe that isMismatchAllowed() and logMismatchError() are both
called on every iteration of the loop, once per excess DOM node
- Compare with the isMismatchAllowed() or logMismatchError() pattern used
elsewhere in the same file like hydrateChildren at line 608 where
the same redundancy exists
What is expected?
isMismatchAllowed() and logMismatchError() should each be called once per mismatch event, regardless of how many excess nodes need to be removed.
What is actually happening?
Both are called N times where N is the number of excess DOM nodes. The console.error only appears once due to the hasLoggedMismatchError guard inside logMismatchError(), but the calls themselves are redundant. The fix is to hoist the check outside the loop:
Version
3.6.0-beta.12
Reproduction link
github.com
Steps to reproduce
called on every iteration of the loop, once per excess DOM node
elsewhere in the same file like hydrateChildren at line 608 where
the same redundancy exists
What is expected?
isMismatchAllowed() and logMismatchError() should each be called once per mismatch event, regardless of how many excess nodes need to be removed.
What is actually happening?
Both are called N times where N is the number of excess DOM nodes. The console.error only appears once due to the hasLoggedMismatchError guard inside logMismatchError(), but the calls themselves are redundant. The fix is to hoist the check outside the loop: