I’m facing an unexpected issue with my React application. Initially, the application works fine, but after a while, API calls unexpectedly stop.

To provide more information about the issue, in my application, we facilitate data exchange between users, and for that purpose, we make a series of API calls. However, after a certain period of time, the API calls abruptly halt, and I receive no response. This significantly affects the user experience and undermines the reliability of the application.

What steps can I take to understand why the API calls are stopping, or does anyone have experience with a similar issue?

Thank you.

my app.jsx file

const HomePage = lazy(() => import("./pages/HomePage"));
const MainPage = lazy(() => import("./pages/MainPage"));
const UserProfile = lazy(() => import("./pages/UserProfilePage"));
const SpesificUserProfile = lazy(() => import("./pages/SpesificUserProfile"));
import { Routes, Route } from "react-router-dom";
import "./index.css";
import "bootstrap/dist/css/bootstrap.min.css";
import "react-toastify/dist/ReactToastify.css";
const MessagesPage = lazy(() => import("./pages/MessagesPage"));
const ChatDetailsPage = lazy(() => import("./pages/ChatDetailsPage"));
const PostDetailPage = lazy(() => import("./pages/PostDetailPage"));
const FollowingDetailPage = lazy(() => import("./pages/FollowingDetail"));
const FollowerDetailPage = lazy(() => import("./pages/FollowersDetailPage"));
const ImagePostDetailPage = lazy(() => import("./pages/ImagePostDetailPage"));
const DeactivatedPage = lazy(() => import("./pages/DeactivatedPage"));
const NotificationsPage = lazy(() => import("./pages/NotificationsPage"));
const Posts = lazy(() => import("./components/Posts/Posts"));

import { ThemeContext } from "./context/ThemeContext";
import { UserProvider } from "./context/UserContext";

import LoadingSpinner from "./components/ui/LoadingSpinner";

function App() {
  const [
    { theme, themeName, activeFontSizeOption },
    toggleThemeBetweenLightDarkMode,
  ] = useContext(ThemeContext);

  return (
    <UserProvider>
      <div
        className={
          themeName === "dark-theme"
            ? "dark-theme"
            : themeName === "light-theme"
            ? "light-theme"
            : null
        }
        style={{
          backgroundColor: theme.backgroundColor,
          color: theme.color,
        }}
      >
        <Suspense
          fallback={
            <LoadingSpinner
              isSuspense={true}
              strokeColor={"rgb(29, 155, 240)"}
            ></LoadingSpinner>
          }
        >
          <Routes>
            <Route path="/" element={<HomePage />} />

            <Route path="/home" element={<MainPage />}></Route>

            <Route
              path="/notifications"
              element={<NotificationsPage />}
            ></Route>
            <Route path="/messages" element={<MessagesPage />}></Route>
            <Route path="/profile" element={<UserProfile />}></Route>
            <Route
              path="/profile/:id"
              element={<SpesificUserProfile />}
            ></Route>
            <Route
              path="/:postOwner/status/:postId"
              element={<PostDetailPage />}
            ></Route>
            <Route
              path="/messages/:chatRoomId"
              element={<ChatDetailsPage />}
            ></Route>
            {/* new page start to check  INFO => CONTROL STYLING*/}
            <Route
              path="/:postOwner/status/:postId/photo/1"
              element={<ImagePostDetailPage />}
            ></Route>
            {/* new page finish to check INFO => CONTROL STYLING */}
            <Route
              path="/profile/:userId/following"
              element={<FollowingDetailPage />}
            ></Route>

            <Route
              path="/profile/:userId/followers"
              element={<FollowerDetailPage />}
            ></Route>

            <Route
              path="/settings/deactivated"
              element={<DeactivatedPage />}
            ></Route>

            {/* test pages start to check  */}
            <Route path="/posts-component-test" element={<Posts />}></Route>

            {/* test pages finish to check  */}
          </Routes>
        </Suspense>
      </div>
    </UserProvider>
  );
}

export default App;

my server.js file

const PORT = process.env.PORT || 3000;
const server = app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

const io = app.get("io");
io.attach(server);