Questions tagged [react-suspense]

194 questions
0
votes
3 answers

using React 18 and suspense, do search from form and populate div with search results on button click

I'm new to React 18 and Suspense. Nearly all of my previous web development was done in asp.net mvc. I want to click a button on a form, pass the form input values to a web api HttpGet method with the [FromQuery] attribute, and render the return…
Tom Regan
  • 3,580
  • 4
  • 42
  • 71
0
votes
0 answers

Triggering sibling data refetch in react with suspense

I have 2 components, 1 showing a calendar with some events on it, another next to it showing the detail component of a day of the calendar when we click on it. So, to get them to work together (saving the detail component should trigger a calendar…
TanguyB
  • 1,954
  • 3
  • 21
  • 40
0
votes
0 answers

React suspense wouldn't work on latest Next 12 despite configuration

So I have this file called AuthHeader.js in which I am attempting to render children surrounded by a Suspense boundary with a fallback. I added a 5 second delay on the API hoping to see a loader, but it shows blank. I hope someone may be able to…
Ali Gajani
  • 14,762
  • 12
  • 59
  • 100
0
votes
1 answer

How to make React Suspense and pending promise working

Many articles writing about how to return pending promise and work with React suspense but it's not working in real world. They don't consider if the component got visited second time, and it won't refetch the data from the server. e.g. =>…
newBike
  • 14,385
  • 29
  • 109
  • 192
0
votes
0 answers

Is there a part of Suspense between when a component is ready to render and when it does where you can tie into?

Just a general question about Suspense - I'm looking at an infinite scroll feed that currently uses react-window. The feed items would normally take a lot of memory. I am wondering if Suspense can only help with lazy loading those components or if…
Steph
  • 443
  • 2
  • 4
  • 15
0
votes
0 answers

Always stay in suspense fallback with react-query

Whenever browser is refreshed, the screen using react-query stay suspense fallback and doesn't go to lazy loading screen. and when routing from another screen, It shows. react : 18.2.0 react-router : 6.4.2 react-query: 3.39.2 Example) lazy(() =>…
nyc
  • 11
  • 1
0
votes
1 answer

React Suspense with React Router - CSS properties not working after using Suspense and Lazy

My code is working fine and the css properties is working normally but whenever I change wrap the code with suspense the page loads and the suspense works but the css properties attached to them aren't working but if I remove the suspense it's…
Richard
  • 1
  • 2
0
votes
0 answers

Components still disjointedly loading despite using React Suspense

The behavior I'm trying to fix: Unless I'm misunderstanding something, Suspense should be good to use here. How I implemented it in my app.js const ChatContainer = React.lazy(() => import('./components/ChatContainer'))
0
votes
2 answers

react useEffect not trigger when deps change in concurrent/suspense mode

clearly line 67 log the count in functional component, in line 69 count is logged in effect, from my understanding count in functional component and effect should be synced forever, However it is not the case When count change from 3 to 4,…
Guichi
  • 2,150
  • 1
  • 19
  • 27
0
votes
1 answer

Next/React lazy load not working as expected for components

Hi all I am new in Next/react I am trying to lazy load one component. What my expectation is that component must loads when it is visible in user view port or once a page is fully rendered. Its html code should not come in the first response. But…
Vivek Singh
  • 646
  • 3
  • 10
  • 25
0
votes
1 answer

How to resolve React suspense on the server

In my web app I would like to render most of my content on the server and serve complete HTML. Also, I would like for each React component to fetch its own data. I don't like the Next.js' approach of "fetch the data for the whole page". React…
lishaak
  • 416
  • 2
  • 11
0
votes
1 answer

react-i18n useSuspense never ends if backend loading fails

In my react app, I am using i18next-http-backend to load translation data from backend response. Currently my app works fine in the below configuration: config.js import i18n from 'i18next'; import {initReactI18next} from 'react-i18next'; import…
0
votes
1 answer

How to lazy load route with react location?

I am quite new to React, and I have a project that uses react-location I would like to load some routes lazily only if the path is activated. My current config is: my base routing module export const routes: Route[] = [ ...HomeModuleRoutes, // I…
Bobby
  • 4,372
  • 8
  • 47
  • 103
0
votes
1 answer

React.lazy and custom protectedRoute with router-react-dom, how do I get it to work?

I'm new to react and is trying out the React.lazy and Suspense imports, and I just have to say, I love them!!! My website went from 45% in performance up to 50-60% and that is without optimizing images! Google search results, here I come! However, I…
Marty
  • 1
  • 1
0
votes
1 answer

React 18: Executing Code When Suspense Completes Promise

I want to be able to make my own state change when when the return from useTransition completes. That is, currently, in the example below, isPending toggles from true to false, but that's not enough. I want to be able to execute code on that…
Peter Kellner
  • 14,748
  • 25
  • 102
  • 188