Unexpected go back on react-navigation - reactjs

Question

I have a nested stack in my project. Everything works fine but when I click a button that takes you to a page where at first it has to load the user list with useEffect, the page does a navigation.goBack (). If I take useEffect off the page, when I click the button it goes to the right page.
listaUtenti: async () => {
setLoad(true);
getAuth().currentUser.getIdToken(true).then(function(idToken) {
fetch('http://ipipip/users', {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + idToken,
}
}).then((response) => {
return (response.json())
}).
then((response) => {
console.log(response);
if(response.status === 403){
throw new Error(response.message);
}
setLoad(false);
})
.catch(function(error) {
setLoad(false);
console.log(error);
showMessage({
message: "Attenzione",
description: String(error),
type: "danger",
backgroundColor: '#FF3D71',
color: '#FFFFFF',
statusBarHeight: 0,
style: { borderRadius: 10, marginTop: Constants.statusBarHeight + 10, width: '90%', alignSelf: 'center' }
});
})
}).catch(function(error) {
setLoad(false);
console.log(error);
showMessage({
message: "Attenzione",
description: error.message,
type: "danger",
backgroundColor: '#FF3D71',
color: '#FFFFFF',
statusBarHeight: 0,
style: { borderRadius: 10, marginTop: Constants.statusBarHeight + 10, width: '90%', alignSelf: 'center' }
});
})
},
In my HomePage i have a button that on press navigate to ListaUtentiScreen
<Button style={{marginVertical:10}} onPress={() => {navigation.navigate('ListaUtenti')}}>Lista utenti</Button>
I call "listaUtenti()" in useEffect
const BackIcon = (props) => (
<Icon {...props} name='arrow-back' />
);
export default function ListaUtentiScreen({navigation}) {
const { tema, listaUtenti } = useContext(AuthContext);
const [utenti, setUtenti] = useState({});
const ref = useRef(null);
useScrollToTop(ref);
const navigateBack = () => {
navigation.goBack();
};
const BackAction = () => (
<TopNavigationAction icon={BackIcon} onPress={navigateBack}/>
);
useEffect(() => {
const lista = async () => {
const users = await listaUtenti();
setUtenti(users);
};
lista();
return () => {
setUtenti({});
};
});
return (
<>
<TopNavigation title='Lista utenti' alignment='center' accessoryLeft={BackAction}/>
<Divider/>
<KeyboardAwareScrollView ref={ref} extraHeight={100} enableOnAndroid={true} scrollEnabled={true} contentContainerStyle={{flexGrow:1}} style={{backgroundColor: tema ? '#151A30' : '#EDF1F7'}}>
<Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: tema ? '#151A30' : '#EDF1F7' }}>
<Text>Hello</Text>
</Layout>
</KeyboardAwareScrollView>
</>
);
}
if I remove useEffect, it navigates to listaUtenti but if I use useeffect it goes back. If I try to use console.log () to see if the function is used, on the terminal it prints the user list but it goes back anyway
This is a video that show the error

Answer 1

Without a code snippet its pretty hard to answer, however my intuition tells me you're doing something like this
<Button onPress={navigation.goBack()}> {Back arrow in the top left corner} </Button>
When you should be doing something like this:
<Button onPress={(e)=>navigation.goBack()}> {Back arrow in the top left corner} </Button>
The difference here is the (e) => inside the onPress/onClick (depending on what framework you're using) without the (e) => the function is called immediately when the button is rendered. Again, not 100% sure without the code snippet