I am developing an android app using react-native and i have a but of a struggle of figuring out why my component re-renders on each page navigation.

In my case i have created a wrapper component called 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>
}

Then i declare routes with Stack.Screen where each stack uses a component wrapped with the Container component.

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

And my Overview compnent is this

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

My problem is that inside the Container component, there is a hook called usePdaScan. Each time i navigate to another page and the hook gets called, the Container component re-renders twice... I cant get a lead on this... Halp!

UPDATE: My homepage is a class component where it seems to work ok (render only once)

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>
    )
}

}

The usePdaScan hook in the Container component gets called once on my Homepage but twice on every other page like Overview etc... Both Homepage and Overview are wrapped with my Container component