fix(271): invalidate the ref in order to fix camera running in the background issue

[culda]

Fix for https://github.com/react-qr-reader/react-qr-reader/issues/258

There is an issue in the following scenario:

1. decodeFromConstraints is called
2. Component unmounts while controlsRef.current is falsy, therefore controlsRef.current.stop doesn't run
3. decodeFromConstraints resolves initialising controlsRef
4. Camera is kept on running in the background although the user has closed the page

My solution improves the possible states the ref can be in, making sure that when the component is unmounted, the ref is actually invalidated.

[tbreeding]

Please merge this!

[culda]

@JodusNodus @JonatanSalas could you guys help push this along?

[isneverdead]

@culda do you have another alternative to solve this issue? mine also running in the background ☹️

[culda]

@isneverdead this worked for me and I don't really plan to revisit

[isneverdead]

@isneverdead this worked for me and I don't really plan to revisit

okay then, i also have other solution like just refresh the page when the camera is closed, and the camera doesn't run in the background anymore 😅

i just running this for reload the app window.location.reload(false);

[culda]

@isneverdead yeah screw the UX :)

[JayWelsh]

Please merge this change 👍 @isneverdead this thread is to fix the issue, the work is literally done, this isn't the right place to detract from the subject with a hacky way that barely solves the issue, most quality applications can't just reload after every QR scan.

[JayWelsh]

Won't be maintaining this but if anyone needs a temporary fix until this repo is maintained again I've deployed this package to npm. Kudos to @culda for solving the issue. https://www.npmjs.com/package/fork-react-qr-reader

[tcjeff]

@JonatanSalas was kidnapped? I like this library but there are a lot of pull request and no one to do review.

[MikepdXRider]

Won't be maintaining this but if anyone needs a temporary fix until this repo is maintained again I've deployed this package to npm. Kudos to @culda for solving the issue. https://www.npmjs.com/package/fork-react-qr-reader

@JayWelsh

This isn't working for me. I uninstalled the other package and installed yours. Leaving everything as is, I get an error about the import. When I update the import to include "fork-react-qr-reader", the page renders. I get a new error related to the mounting state of the component. Can you provide any insight here?

[cperdiansyah]

please merge this PR, I have the same problem on v.3 @JodusNodus

[JayWelsh]

Won't be maintaining this but if anyone needs a temporary fix until this repo is maintained again I've deployed this package to npm. Kudos to @culda for solving the issue. https://www.npmjs.com/package/fork-react-qr-reader

@JayWelsh

This isn't working for me. I uninstalled the other package and installed yours. Leaving everything as is, I get an error about the import. When I update the import to include "fork-react-qr-reader", the page renders. I get a new error related to the mounting state of the component. Can you provide any insight here?

You would indeed need to change it to fork-react-qr-reader since that's the name of the forked version (I couldn't name it the same thing as npm doesn't allow duplicate package names).

[ETCasual]

Won't be maintaining this but if anyone needs a temporary fix until this repo is maintained again I've deployed this package to npm. Kudos to @culda for solving the issue. https://www.npmjs.com/package/fork-react-qr-reader

it yells component is not mounted on my end tho

[dominikvaradi]

It's not working while using with react strict mode turned on, because strict mode react makes two renders for a page, and the cleanup kills the video stream before the last render.