0

In my dashboard component I am fetching all orders of a user inside useEffect hook. useEffect hook has a dependency of user & orders state.

useEffect(() => {
    let isMounted = true;
    fetch(`http://localhost:5000/allorders?email=${user?.email}`, {
      headers: {
        authorization: `Bearer ${localStorage.getItem("accessToken")}`,
      },
    })
      .then((res) => res.json())
      .then((data) => {
        if (isMounted) {
          setOrders(data);
        }
      })
      .catch((error) => console.log(error));
    return () => {
      isMounted = false;
    };
  }, [user?.email, orders]);

The problem is I am having infinite api request at /allOrders endpoint of my express server. How can I prevent frontend client from sending infinite request at my backend server?

GET /allorders?email=admin@admin.com 304 - - 59.084 ms
GET /allorders?email=admin@admin.com 304 - - 63.304 ms
GET /allorders?email=admin@admin.com 304 - - 58.676 ms
GET /allorders?email=admin@admin.com 304 - - 57.991 ms
GET /allorders?email=admin@admin.com 304 - - 57.935 ms
GET /allorders?email=admin@admin.com 304 - - 59.366 ms
GET /allorders?email=admin@admin.com 304 - - 61.231 ms
GET /allorders?email=admin@admin.com 304 - - 57.709 ms
GET /allorders?email=admin@admin.com 304 - - 59.637 ms
GET /allorders?email=admin@admin.com 304 - - 69.139 ms
GET /allorders?email=admin@admin.com 304 - - 58.118 ms
GET /allorders?email=admin@admin.com 304 - - 58.127 ms
GET /allorders?email=admin@admin.com 304 - - 61.101 ms
GET /allorders?email=admin@admin.com 304 - - 64.198 ms

I have tried to render the component using useMemo & React.memo(). As I don't have much knowledge of react hooks I encountered multiple error and eventually failed to stop infinite api request.

Sakib
  • 1
  • 1

0 Answers0