Questions tagged [react-suspense]
194 questions
1
vote
1 answer
Uncaught TypeError: init is not a function at mountLazyComponent
I am trying to add a suspense to my reactjs app and I got this error. Not really sure what I am doing wrong. It looks like previous Suspense that I have used but this time it is erroring. I'm not sure if it has to do with the index.js file but I…
Jacqueline
- 21
- 7
1
vote
0 answers
React lazy() - lazy load component when sibling component is loaded
(Simplified example): I have Component A and Component B, which are sibling components and are both lazy-loaded in App.js:
import { lazy, Suspense } from 'react';
const A = lazy(() => import('./A'));
const B = lazy(() => import('./B'));
const App =…
aryanm
- 1,183
- 14
- 26
1
vote
2 answers
UseRef in Suspense data fetching
I'm trying to use the experimental new React feature Suspense for data fetching.
Here's my simple useApi hook which (if I understand Suspense correctly) either returns the result of an fetch call or throws the suspender promise. (slightly modified…
laggingreflex
- 32,948
- 35
- 141
- 196
1
vote
1 answer
How to check for components from a chrome extension tool?
I am working on a tool in the form of a chrome extension that checks the timing metrics for components wrapped in the Suspense component to check how long they were suspense for. Here's an example of what I am referring to.
Verde92
- 49
- 6
1
vote
2 answers
404 route issues with React Router and Suspense
I'm trying to use lazy loading, with Suspense, from React 16.12.0. I'm also using React Router 5.1.2.
It's the first time I'm using Suspense and I haven't managed to find a proper way to load a 404/NoMatch without causing other issues.
My code looks…
cornelc
- 21
- 3
1
vote
2 answers
React re-renders entire function when state changes
I'm look at implementing a loading screen that checks if all components are loaded, but came across this weird pattern. With the code below, I get App false in console to start, after 2000ms when the delayHTML function returns back data, I get…
David Min
- 1,246
- 8
- 27
1
vote
1 answer
Multiple Suspense declaration in React
For example I have this declaration:
Scenario 1:
const ComponentA = lazy(() => import('pages/ComponentA'));
const ComponentB = lazy(() => import('pages/ComponentB'));
ajbee
- 3,511
- 3
- 29
- 56
1
vote
1 answer
Components After React Suspense Not Loading?
I had to break up some of my routes with suspense and react.lazy to ensure that my bundle file wasn't ridiculous. But after doing so, the routes after my first suspense bracket are no longer working?
In the following example, the routes for Links 1…
Buckyx55
- 434
- 5
- 23
1
vote
2 answers
Passing String to Import Function React
I'm trying to create a helper method to lazily import modules with a delay in react.
This first version, when I have the path in the import fixed, it works:
import { lazy } from 'react';
export function lazyLoaderWithDealy() {
return lazy(async…
Nelson Larios
- 312
- 3
- 14
1
vote
1 answer
What causes the component to render again if it was already suspended in concurrent react mode?
I was checking the new concurrent mode in react docs and came across this example.
Loading profile...}>
Here the component gets suspended if the data we are trying to load is…
Rahil Ahmad
- 3,056
- 1
- 16
- 21
1
vote
1 answer
Getting React concurrent promise wrapper to inherit returned interface object
I am experimenting with concurrent mode and suspense in React and am getting a type error when I am trying to drill some mock data from a parent component to a child component because my promise wrapper does not inherently know about the type that…
Jimmy
- 3,090
- 12
- 42
- 99
1
vote
1 answer
Determine initial page bundle size programmatically
My team wrote a web application with create-react-app and we want to keep the bundle size small for the initial page load. Right now we're just running gzip and wc on the outputted javascript files in build/ to get a sense of the size of the bundle…
osdiab
- 1,972
- 3
- 26
- 37
1
vote
2 answers
Unable to find node on an unmounted component while code splitting with React.lazy and Suspense
I have added Code splitting with React.lazy and Suspense and after adding them its renders the components as expected but when i navigate from one component to another it throws an error
Unable to find node on an unmounted component.
import…
TRomesh
- 4,323
- 8
- 44
- 74
1
vote
1 answer
Suspense component gets called before the data actually loads
I'm trying to add react lazy in my application, and for some reason, it doesn't seem to work.
The component in which I want the lazy load to work on, fetches its data from a server, then it renders the data. The problem is, the component in which…
Jessica
- 9,379
- 14
- 65
- 136
1
vote
1 answer
What problem is React Suspense trying to solve?
I've seen some examples in reactjs.org, but I want to know the problem that they are trying to solve and/or what's the magic behind it. And how can I use it in real projects aside from what's already in the react docs.
GIlbert Lucas
- 17
- 4