Skip to content

useFrameProcessor missing onBarcodeScanned in dependency array #54

@jnsvu

Description

@jnsvu

The useFrameProcessor hook in useBarcodeScanner.ts is missing onBarcodeScanned from its dependency array.

This causes the frame processor to capture a stale onBarcodeScanned callback. When the consumer's callback changes (e.g. because its own dependencies changed), the frame processor continues to invoke the old reference.

Reproduction example

import { useCallback, useState } from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'

import { useBarcodeScanner } from '@mgcrea/vision-camera-barcode-scanner'
import { Camera, useCameraDevice } from 'react-native-vision-camera'
import { useRunOnJS } from 'react-native-worklets-core'

export const SelfScanner = () => {
  const [count, setCount] = useState(0)
  const device = useCameraDevice('back')

  const onScanned = useCallback(
    (code: string) => {
      // BUG: `count` is always 0 here because the frame processor
      // captured the initial `onBarcodeScanned` and never updates it.
      console.log(`Count at scan time: ${count}`) // always logs 0
      setCount(count + 1)
    },
    [count],
  )

  const onBarcodeScanned = useRunOnJS(
    (barcodes) => {
      if (barcodes[0]?.value) onScanned(barcodes[0].value)
    },
    [onScanned],
  )

  const { props: cameraProps } = useBarcodeScanner({
    fps: 5,
    barcodeTypes: ['ean-13'],
    onBarcodeScanned,
  })

  if (!device) return null

  return (
    <View style={styles.container}>
      {/* Count never goes above 1 because the stale callback always sees count=0 */}
      <Text>Scanned: {count}</Text>
      <Button title="Reset" onPress={() => setCount(0)} />
      <Camera device={device} {...cameraProps} isActive style={styles.camera} />
    </View>
  )
}

const styles = StyleSheet.create({
  camera: {
    height: 500,
    width: '100%',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions