Choppy performance in a third party component after introducing axe-core

[ashishbairwa]

Product

react

Product Version

4.4.2

Latest Version

• [X] I have tested the issue with the latest version of the product

Issue Description

Expectation

• It should render the emoji picker without any lags
• It should not call axe run4 method continuously and should wait for the resolution

Actual

After introducing axe-core into our project which is using stream-chat-react, we are facing a visible lag in the performance of emoji picker. On profiling the performance, we can see a function is constantly getting invoked from axe without any specific errors in the console

How to Reproduce

Here is the reproducible demo link https://codesandbox.io/s/bold-tesla-3mtyhf Steps to reproduce the issue:

• Let the component load
• Click on the message bubble and find the input box
• Click on the emoji icon to open the emoji-picker
• Observe the visible lag in the performance

Demo video - https://youtu.be/tWQtOKuJlZ4

Please find all the traces in the attachments. It includes snapshot and traces from performance profiler Trace-with emoji picker opened.json

Additional context

Stream chat react - https://www.npmjs.com/package/stream-chat-react Stream chat official website - https://getstream.io/chat/docs/sdk/react/