Estoy desarrollando una aplicación de Android usando react-native y tengo una gran dificultad para descubrir por qué mi componente se vuelve a renderizar en cada página de navegación.

En mi caso, he creado un componente contenedor llamado Container.android.js

 const Container = props => { useEffect(() => { // fetching some data from async storage },[]) // Using my hook here const {code, error} = usePdaScan({ onEvent: (code) => { // setting state via useState }, onError: (error) => { Alert.alert('Error', error); }, trigger: 'always' }); return <View> {props.children} </View> }

Luego declaro rutas con Stack.Screen donde cada pila usa un componente envuelto con el componente Container.

 <Stack.Screen name="Overview" component={Overview} />

Y mi componente general es este

 const Overview = props => { return <Container> <Text>Overview page</Text> </Container> }

Mi problema es que dentro del componente Container hay un enlace llamado usePdaScan. Cada vez que navego a otra página y se llama al gancho, el componente Contenedor se vuelve a renderizar dos veces... No puedo obtener una pista sobre esto... ¡Alto!

ACTUALIZACIÓN: Mi página de inicio es un componente de clase donde parece funcionar bien (renderizar solo una vez)

 class Home extends Component { state = { productBarcodes: null } componentDidMount(){ // get data fetches data from async storage getData('@productBarcodes').then(res => { this.setState({ ...this.state, productBarcodes: JSON.parse(res) }) }) } render() { const { productBarcodes } = this.state; return ( <Container {...this.props}> <View style={{marginBottom: 20, flex:1}}> {productBarcodes.length} Products </View> </Container> ) }

}

El enlace usePdaScan en el componente Contenedor se llama una vez en mi página de inicio, pero dos veces en cualquier otra página, como Resumen, etc. Tanto la página de inicio como la descripción general están envueltas con mi componente Contenedor