React Native Unmount component before navigation goBack() - react-native

Question

I have a screen that has content that is updated by and api call. Whenever I leave the screen, I want to unmount the component so that the next time it is rendered again, because the api is called with different data. Right now, if I enter for the first time, everything works fine (activity indicator shows that it is loading and info is display), but if I go back and then enter again to view the info for another id, it shows the previously loaded information and only after a time it reloads (without the activity indicator displaying). I don't mind the delay, but at least I would like the activity indicator to be displayed while loading.
const AllReservationsScreen = ({navigation, route}) => {
const isFocused = useIsFocused();
const [data, setData] = React.useState({
tableHead: ['Car Number', 'Reserved From', 'Expiration Time', 'Reserved By'],
reservations: "",
isLoading: true
});
useEffect(() => {
setTimeout(async() => {
ReservationService.getReservationsByParkingSpot(route.params.parkingSpotId, route.params.token).then(
(response) => {
if (response.status !== 200) {
return;
}
setData({
... data,
isLoading: false,
reservations: convertReservationsToArray(response.data)
});
}
);
}, 1000);
}, [isFocused]);
const convertReservationsToArray = (reservations) => {
let reservationsArray = [];
reservations.map(
(reservation) =>
reservationsArray.push(
[
reservation.registrationPlateNumber,
moment(reservation.startTime).format('MMMM Do YYYY HH:mm'),
moment(reservation.endTime).format('MMMM Do YYYY HH:mm'),
reservation.user
]
)
);
return reservationsArray;
};
return (
<View style={styles.modal}>
<View style={styles.titleView}>
<View style={styles.titleDetails}>
<Icon
name='ios-arrow-back'
size={30}
color='#8ea7f8'
onPress={() => {
setData({
... data,
isLoading: true,
reservations: []
});
navigation.goBack()
}}
/>
</View>
</View>
<Text style={styles.modalTitle}>All Reservations</Text>
<View style={styles.modalForm}>
{
data.isLoading ? (
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<ActivityIndicator size="large"/>
</View>
) : (
<View style={styles.container}>
<Table borderStyle={{borderWidth: 1, borderColor: 'transparent'}} style={{borderRadius: 10}}>
<Row data={data.tableHead} style={styles.headStyle} textStyle={styles.headText}/>
<ScrollView>
{
//console.log(data.reservations)
data.reservations.map(
(reservation, i) => {
if (i % 2 === 0) {
return <Row
key={i}
data={reservation}
style={styles.evenRow}
textStyle={styles.tableText}
/>
} else {
return <Row
key={i}
data={reservation}
style={styles.oddRow}
textStyle={styles.tableText}
/>
}
}
)
}
</ScrollView>
</Table>
</View>
)
}
</View>
</View>
);
};

Answer 1

You can use navigation.pop() instead of the goBack(), they are exactly the same the only difference is that pop removes the current component.
see: https://reactnavigation.org/docs/stack-actions/#pop
And because you use useEffect you should in the beginning of that function set loading to true again! useEffect works like componentDidMount and componentDidUpdate so you want to be loading everytime you're calling the api. Or just use componentDidMount.