ReactErrorUtils.invokeGuardedCallback in React fires event repeatedly in IE browser

Question

I am using react along with highchart in my application. And currently facing a strange issue with React. I have one menu item and on its click event it does some processing (lets say exports the chart as image). So currently I observed that its being fired on any setState operation in my react component. When I looked into the call stack I found ReactErrorUtils.invokeGuardedCallback is been sending this event repeatedly.

Does anyone faced similar issue with react component that clicks are getting triggered on any setState operation

Answer 1

It's been a while but I've faced such issues always when I had nested components with the same type of eventListener attached. For example an outer component with an onClick prop and an inner element with another onClick prop.

if the inner one gets clicked the event bubbles up to the outer and the onClick callback of the outer element gets called too. Within the stack trace you see now that it was invoked by the invokeGuardedCallback

to stop the event from bubbling up, call

event.stopPropagation();

within the callback function of the inner element.

There might be other scenarios where the ivokeGuardedCallback could invoke a callback - to make sure you could always go read the code.