App is extremely laggy when navigating to sub routes

[hellofrontendxxx]

I am developing a project to make an app on the available source using create-react-app (“react”: “^18.2.0” “react-dom”: “^18.2.0”), react-router-dom : ^6.27.0 and I have integrated @noriginmedia/norigin-spatial-navigation for navigation on the application.

In the App I use createMemoryRouter, RouterProvider, the hierarchy is as follows:

<ErrorBoundary FallbackComponent={<></>}>
      <QueryClientProvider client={queryClient}>

        <AppRoutes /> // Define child routes, use createMemoryRouter, RouterProvider

        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
</ErrorBoundary>

When running on the Simulator, the application is very smooth when switching pages as well as navigating elements. But when building the application to run on a real TV, the index page is very smooth, but when switching to the child pages, it is extremely slow when navigating elements. All child pages are slow and very laggy except the index page (here also uses the navigation library like the child pages)

Hope to receive help from everyone

[xavi160]

Thanks for reaching out.

I don’t believe this issue is related to Norigin-Spatial-Navigation, especially since you mentioned that the initial render is fast.

Instead, I recommend focusing on how you’re rendering the child pages. Keep in mind that low-end devices can struggle if too many elements are rendered at once. Consider implementing lazy rendering for items as they enter the viewport to optimize performance.

I’m closing this issue for now, but don’t hesitate to contact us if you encounter any specific problems with our library.

[hellofrontendxxx]

I don't know why when using with useLocation the app lags, when I remove useLocation the app runs normally. I use useLocation in cases like getting pathname, or when I pass data into state when using useNavigate