Fetch data from api every second

Question

I have a react native app where i am fetching orders made by customer and display them in restaurant side in a specific screen, I am using fetch api to get the data, so THE WORKFLOW is customer first place order and store it in database and in the restaurant side i have this 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]);

as in this function it runs every second and it makes api call to express server to fetch the data from database so i keep restaurant receiving orders without delay. But i noticed that the app is lagging when the interval set to 1 second and it keep making frequent calls to the express server.

my question: Is this the best approach to perform same as this scenario (fetching the orders the moment they been placed by the customer) or Is there a better way to do it without lagging as well as when fetching large data will the performance remain the same or there will be some issues?

Answer 1

If I had to guess what the cause of the lagging issue was it would be because you have a dependency on the useEffect hook. Each time the state updates it triggers another render and the effect runs again, and sets up another interval, and your app is doing this once every second.

I suggest removing the dependency and run the effect only once when the component mounts, and clearing the interval when unmounting.

useEffect(() => {
  const interval = setInterval(() => {
    loadData();
  }, 1000)
  return () => clearInterval(interval)
}, []);

If the id for the GET requests updates and you need the latest value, then use a React ref to store the id value and use this in the request URL.

const idRef = React.useRef(id);

useEffect(() => {
  idRef.current = id;
}, [id]);

const loadData = async () => {
  const response = await fetch(`${API_URL}/getActiveOrders?ID=${idRef.current}`);
  const result = await response.json();
  setCurrentOrders(result.auth ? result.data : []);
}