fix(258): improve useEffect call

[spaudanjo]

• add missing dependencies
• add additional effect which stops the scanner when the component unmounts

Closes #258

HINT: I only tested this roughly on my Chrome (Mac) and Chrome (Android) the new expected behaviour works. Not sure about potential breaking changes or performance drops (e.g. because of missing stop calls to previous versions of BrowserQRCodeReader).

[spaudanjo]

Please let me know your thoughts on this @JodusNodus :)

[Corneliuus]

Can we have this merged into master please? @JodusNodus

[victorrseloy]

it would be pretty nice to have this merged @JodusNodus.

[Mistifiou]

Hi,

with this commit and this update on file I was able to fix #258 for my case.

      codeReader
        .decodeFromConstraints({ video }, videoId, (result, error, controls) => {
          controlsRef.current = controls
          if (isValidType(onResult, 'onResult', 'function')) {
            onResult(result, error, codeReader, controls);
          }
        })
        .catch((error: Error) => {
          if (isValidType(onResult, 'onResult', 'function')) {
            onResult(null, error, codeReader, controlsRef.current);
          }
        });
    }

[JayWelsh]

Hi @spaudanjo , I was wondering if you have any thoughts about your method of stopping the camera on mount vs the method used here?

https://github.com/react-qr-reader/react-qr-reader/pull/279

I've merged the linked PR into my fork ( https://github.com/JayWelsh/react-qr-reader ), and would like to merge more improvements into my fork (such as your dependency enhancement) which is why I am asking.