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'))
…

user17817249
- 83
- 7
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…

Ahashan Alam Sojib
- 77
- 1
- 7
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