Profiling results - listener/node growth when acting very quickly

[rosskevin]

I've been hunting leaks lately doing some stress testing, and I've found something quite odd concerning react formal. I'm no expert in the area of profiling but I have spent the last week doing so, familiarizing myself with the tools and react behaviors, and I can reproduce the scenario below.

Scenario 1 - Fast iteration (bad)

As fast as a human can, show/hide a sign-in dialog with a text and password field.

Screenshot 1

Screenshot 2

Same essential results.

Scenario 2 - Slow iteration (good)

With ~2 second delay between iterations, show/hide a sign-in dialog with a text and password field.

Screenshot

Methodology

Prerequisite: Tested the dialog fast and slow without react-formal to confirm no presence of node or listener growth.

1. Add in react-formal text and password fields
2. Reload the page
3. Show/hide dialog
4. Wait 1s, GC
5. Start recording
6. Iterate
   1. fast - as fast as I can click
   2. slow - click on, wait .5s, click off, wait 2s
7. Wait 8-10s (more than enough to allow dereferencing of old dom trees)
8. GC
9. Stop recording

Results

• Consistent node and listener growth with when interacted with quickly.
• No node/listener growth when interacted with slowly

Any ideas where to start looking for leaking listeners or nodes? I'm not finding any obvious problems in any detached dom trees.

[jquense]

i'm honestly not sure there...I'd imagine tho that the issue lies in the dialog implementation, not react-formal...but I could be wrong of course :)

I don't really know what node or listeners refers to here, but RF doesn't do any special dom manpipulation or manual event binding.

[rosskevin]

FYI I

Tested the dialog fast and slow without react-formal to confirm no presence of node or listener growth.

Only when I add react-formal do I see the node and listener growth. Nodes are any Dom nodes attached or detached, whereas I assume listeners are any event listeners or possibly even callbacks for timers (I haven't found a definitive answer from devtools docs).

[rosskevin]

Whereas I cannot explain the results from devtools in terms of listener and node growth, I have also created a local stress test that doesn't ever run the browser out of memory in the same automated situation. While reproducible manually, I can't automate the same result with any perceivable detriment.

I'm going to close this, but if someone else bumps into issues with what appears to be any leaks/node growth with react-formal, let me know and perhaps we can see if we can figure anything out.