JS thread overloads when pasting numerous times with RegEx mask

[blake-discover]

Describe the bug
I'm not sure if this is in scope of this project or not, but I'm experiencing performance issues on paste event. I found when either pasting numerous times or typing exceptionally fast, the JS thread locks up. I believe there is an iterator somewhere that is slowing down the formatting.

To Reproduce

1. Visit this fiddle: https://jsfiddle.net/286cvjdb
2. Paste valid email address (such as [email protected]) into the input field 3+ times

Expected behavior
JS thread should not lock up.

Environment:
System:
OS: macOS 13.4
CPU: (10) arm64 Apple M1 Pro
Memory: 868.27 MB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.1/bin/yarn
npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
Browsers:
Chrome: 114.0.5735.133
Edge: 113.0.1774.57
Safari: 16.5

Additional context
n/a

[uNmAnNeR]

hi @blake-discover,
thanks for reporting. I've been waiting for such kind of issues for a long time but it came unexpectedly since no changes have been made recently that could reduce performance.

Well, by design

1. mask validates input step by step per each symbol
2. do it synchronously within input event handler which makes it stable because of no races

general recommendations:

• to handle pasting you can use prepare callback to conditionally drop some parts of input before mask processes it
• try to make regexp as strict as possible
• limit maximum length
• do not use mask and validate input instead

From my side I will also check performance in general.

[Leland]

Hey @blake-discover it looks like this is just the result of a very slow moving regex being asked to do a lot at once.

If you pop open Chrome DevTools' performance view, we can see that what's blocking is literally just a RegExp call evaluating, and taking some milliseconds to finish when faced with strings like "[email protected]@[email protected]". But the time to evaluate it grows with its length, and so rapid pasting just saturates the thread.

I wish I knew enough regex-fu to tell you what about that is greedy/slow/whatever, and if it could be improved.

I have good news, though: the answer is debouncing! Just wait some small amount of time after a user finishes text entry to run and you should be fine. You can actually simulate this on your JSFiddle. Wait a little bit in between pasting and everything's hunky dory.

I imagine that's how tools like https://regexr.com/ can handle this just fine.

All the same, @uNmAnNeR I would posit that this is firmly not slowness from this library, and can probably be closed - although tracking perf sounds like a good idea too!