onStop callback not refreshed on componentUpdate

[Heedster]

The function that I pass to on onStop changes because of changes in its internal dependency, but onStop always calls the first reference passed into .

I looked into the code and it seems to agree with my inference. MicrophoneRecorder instance is created on componentDidMount of ReactMic Component and not on subsequent rerenders, so its not getting new onSave functions.

Surprisingly, the componentDidUpdate invokes microphoneRecorder.stopRecording(onStop), but the stopRecording function in MicrophoneRecorder does not even accept a param.

Seems like onStop was supposed to changed, but got missed somewhere in the implementation

[riwu]

Ran into the same issue. Spent an hour debugging why the onStop callback is using old values...

[artemov34]

crutch

useEffect(() => {
        Object.assign(window, { globalFormChange: formData});
    }, [formData]);

    const recordStop = (data: any) => {
        handleSubmit({...(window as any).globalFormChange, audio_blob: blobToFile(data.blob, 'audio')})
    }

[adnakate]

Facing the same issue. Spent hours on it. I don't like the solution using global variable.

[HackerAIOfficial]

I'm new to React learning useEffect and hook stuff, this was very confusing guys :D I guess it's an optimization that you do, at least I had to learn more about React.