TypeError: Cannot destructure property 'onListeningChange' of 'this.subscribers[id]' as it is undefined.

[thiagoss]

When adding multiple components that use react-speech-recognition, it seems like starting and stopping the listening can cause the error in the title. Looks like it is a race as it happens more frequently the more replicas of the component I add. With only 2 it happens more rarely for me, with 3 it happens almost all the time.

Reproduced on Windows 10 Chrome Version 85.0.4183.83 (Official Build) (64-bit)

[thiagoss]

https://github.com/thiagoss/react-speech-recognition/tree/example-issue-63

Example here adapted to reproduce the issue. Just start/stop a few times and it will happen. Or just add more replicas of the component and it gets easier to reproduce.

Sometimes I also get when transcripts are being created:

Uncaught TypeError: Cannot read property 'onTranscriptChange' of undefined
    at RecognitionManager.js:137
    at Array.forEach (<anonymous>)
    at RecognitionManager.emitTranscriptChange (RecognitionManager.js:136)
    at RecognitionManager.updateTranscript (RecognitionManager.js:207)

[thiagoss]

My original use case for this is that I have a rather large text area and I want buttons on top and bottom of it to start/stop the speech recognition. That's how I got into this issue. Is this a valid use case? (Having multiple hooks from react-speech-recognition).

[JamesBrill]

Thanks for the clear explanation and example @thiagoss Your use case is indeed valid and the example did highlight a race condition I previously wasn't aware of. I have attempted to fix this, please try version 3.2.3 and see how you get on.

[thiagoss]

I won't claim I understood the fix (still kind of new to reactjs and javascript) but it did fix my issue. Thanks!