In my React Native app, I have a system where customer orders are fetched and displayed on the restaurant side in a specific screen. I'm using the Fetch API to retrieve this data. The workflow is as follows: the customer places an order, which is then stored in the database. On the restaurant side, there's a function:
const loadData = async () => {
const response = await fetch(`${API_URL}/getActiveOrders?ID=${id}`);
const result = await response.json();
if (result.auth === true) {
setCurrentOrders(result.data)
} else {
setCurrentOrders([])
}
}
useEffect(() => {
const interval = setInterval(() => {
loadData();
}, 1000)
return () => clearInterval(interval)
}, [id]);
This function runs every second, making an API call to an Express server to fetch data from the database so that the restaurant can receive orders without delay. However, I've noticed that when the interval is set to 1 second, the app lags due to frequent calls to the server.
My question: Is this the best approach for fetching orders instantly after they're placed by customers? Is there a better way to do this without causing lag, especially with large amounts of data? Will performance be impacted when handling extensive data?