State change detected only when screen is tapped - reactjs

Question

I have a few TouchOpacity components which fire a function when pressed. This function retrieves data and then sets state.
const Summary = () => {
const [timeSpan, setTimeSpan] = useState('Day');
const [derivedData, setDerivedData] = useState({
chartTimeSpan: 'Day',
sales: [],
totalSales: 0,
orders: 0,
logins: 0,
});
const _fetchSummary = async (timeSpan) => {
console.log(`_fetchSummary HIT : ${timeSpan}`);
try {
const res = await axios.get(`/summary/${timeSpan.toLowerCase()}`);
const { loginCount, orderQty, sales, totalSales } = res.data;
await setDerivedData({
chartTimeSpan: timeSpan,
sales,
totalSales,
orders: orderQty,
logins: loginCount,
});
await setTimeSpan(timeSpan);
console.log(timeSpan, loginCount, orderQty, sales, totalSales);
} catch (err) {
console.log(err);
}
};
const _switchTimeSpan = (newTimeSpan) => {
console.log(`TimeSpan : ${timeSpan}`);
console.log(`NewTimeSpan : ${newTimeSpan}`);
if (timeSpan !== newTimeSpan) {
_fetchSummary(newTimeSpan);
}
};
const { chartTimeSpan, sales, totalSales, orders, logins } = derivedData;
console.log(derivedData);
return (
<>
<TouchableOpacity onPress={() => _switchTimeSpan('Day')}>
<Text style={dropDownItemStyle}>Day</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => _switchTimeSpan('Week')}>
<Text style={dropDownItemStyle}>Week</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => _switchTimeSpan('Month')}>
<Text style={dropDownItemStyle}>Month</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => _switchTimeSpan('Year')}>
<Text style={dropDownItemStyle}>Year</Text>
</TouchableOpacity>
</>
);
};
Everything works fine. The data gets fetched when i click the buttons too. However state doesn't get updated after the data is fetched. I know this because console.log(derivedData); just above the return statement doesn't run. When i tap anywhere on the screen the console.log(derivedData); gives the expected output. Note that i have not set any function which detects this event when i touch the screen.
I have used the derivedData in some other components but did not include those for simplicity sake.

Answer 1

The console.log(derivedData) will be run, when the components need to be rerendered. This depends on the injected state and props variables. Since state variables are not used in JSX, there is no need to rerender the component and log the new derivedData.
You could bypass this by using import { useEffect } from 'react'. Try to log derived data with:
useEffect(() => {
console.log(derivedData);
});

Answer 2

This issue was caused because I have included the following lines of code in App.js file.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest
? GLOBAL.originalXMLHttpRequest
: GLOBAL.XMLHttpRequest;
// fetch logger
global._fetch = fetch;
global.fetch = (uri, options, ...args) => (global._fetch(uri, options, ...args)
.then((response) => {
console.log('Fetch', { request: { uri, options, ...args }, response });
return response;
}));
The above code allows to detect the network requests. I don't know why but although the above code shows the network requests it also delays the data passed from requests to go into the component unless the screen is tapped.
Commenting out the above lines in production lets the code work as it should.