Video flickers/updates when state outside of <video> updates

[matthiasprieth]

Hey,
so whenever my state outside of the <video> updates, also the <video> updates, so I see a quick flickering and it resets the height of the video, video goes black and reloads. Is this normal? Maybe it has something to do with the ref being passed to <video ref={ref} />, but I don't get it? Does the default example have the same problem for you, cause it also has a state?
Cheers

[adamalfredsson]

Hi, thanks for posting this issue!

Are the callbacks passed to the onSuccess and onError memoized?

I should investigate, but think that they should be as it currently stands. Although it does makes sense to change this behavior.

[adamalfredsson]

Released in version 1.0.4, please try it out and see if it works!

[matthiasprieth]

Hey @nomadoda,
thx so much for your fix!
I tested it with the new version & still had the same problem. Therefore I tried your example and it seemed to be fixed there. Later on I found out, that the problem still persists when I provide the hints parameter.

This doesn't work (flickering bug appearing):

    const hints = new Map();
    hints.set("POSSIBLE_FORMATS", ["CODE_128"])
    const { ref } = useZxing({
        hints: hints,
        onResult(result) {

This works (flickering fixed):

    const { ref } = useZxing({
        onResult(result) {

Cheers!

[adamalfredsson]

Basically the flickering is due to the reader restarting when given a new hints value. I could also make sure to do a deep comparison of the hints value to prevent restarts, but on initial consideration I thought the value is likely to be static and should be defined outside the render function, e.g.:

const hints = new Map();
hints.set("POSSIBLE_FORMATS", ["CODE_128"]);

const Component = () => {
  const { ref } = useZxing({ hints });
  
  return <>{ /* ... */ }</>;
};

Or, in the rare case that hints would be dynamic, use useMemo() to memoize it.

I'm not very confident about this design decision, so please let me know if you think it makes sense to change this behavior too!

[matthiasprieth]

@nomadoda oh, thx for the clarification. For me it is fine as it is. Let's see if more people are running into the same problem, then you could still change it. Thx!