react-hotkeys icon indicating copy to clipboard operation
react-hotkeys copied to clipboard

[BUG] Slow unmount with many usages / larger component tree

Open hejtmii opened this issue 4 years ago • 1 comments

Describe the bug When HotKeys component gets unmounted, it internally calls this line of code

this.logger.verbose(this.logger.nonKeyEventPrefix(componentId), 'De-registered component. Remaining component Registry:\n', "".concat(printComponent(this.componentTree.toJSON())));

Even that .verbose is noop, the serialization of the component tree is non-trivial with larger component tree and many instances of HotKeys are consuming a lot of browser resources.

Here is a screenshot from the profiler spammed with printComponent calls

image

How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc) We use HotKeys and GlobalHotkeys on multiple components, some of them are very large (e.g. rich text editor)

Expected behavior I would expect more lazy logging, not calling such costly operations when the logging is disabled

Platform (please complete the following information):

  • react-hotkeys 2.0.3 (but same code is in 2.0.4)
  • Chrome
  • Windows

Are you willing and able to create a PR request to fix this issue? I could, but I would first like to discuss some best practice how to do that

hejtmii avatar Apr 13 '22 15:04 hejtmii

Here is a PR that fixes the issue https://github.com/ibash/react-hotkeys/pull/8

hejtmii avatar Apr 14 '22 12:04 hejtmii