Questions tagged [react-suspense]
194 questions
1
vote
0 answers
make Custom Hook "suspense ready"
So i have a custom hook that may or may not call the API
import { useState, useEffect } from 'react'
import { get } from 'resources/client'
const useAuth = () => {
const [user, setUser] = useState(null)
useEffect(() => {
const lsUserStr =…
André Alçada Padez
- 10,987
- 24
- 67
- 120
1
vote
0 answers
How to lazy load icons with React.lazy and Suspense
I have all my icons in icons.ts. Currently they are all put into main.bundle.js during build time.
I have an idea of lazy loading the icons in the file so I change them into dynamic import style. This time, the main.bundle.js is 30kb less than…
LY Hooi
- 165
- 1
- 9
1
vote
0 answers
React Lazy loading with old UI in place along with loading spinner
I am using lazy loading in React, when lazy load starts, along with loading spinner that is used inside Suspense, I also need to keep the old UI in place and update the UI when the loading is done.
Right now I am losing the old UI but able to see…
gopinath krm
- 69
- 1
- 8
1
vote
1 answer
Lazy chunk Failed: Restore/Reload failed split chunk with react lazy and suspense in react 18.2.0
I have migrated my code in react 18.2.0. I am using
Code splitting using suspense and lazy.
Single page application
Split chunk loaded perfetly and Happy flow is working. Below is the code
let LoginPageM = React.lazy(() => import('./LoginPageM'…
Himanshu Gupta
- 382
- 4
- 15
1
vote
1 answer
React Suspense not working as expected when fetching data
I have a react component in which I am fetching data from the pokeapi. I am trying to render it with Suspense using browser's fetch but I am not able to figure out where I am going wrong.
function FirstPageIndex() {
const [pokemon, setPokemon] =…
Sarthak Batra
- 487
- 2
- 10
- 24
1
vote
1 answer
React router with lazy and Suspense always falls back on wildcard route on page refresh
I implemented lazy loading routes with lazy and suspense in order to reduce the main bundle size.
However, I run into the issue that, when refreshing the page, the app always end up in the wildcard route instead of reloading at the current location…
Pierre Burton
- 1,954
- 2
- 13
- 27
1
vote
0 answers
Suspense not working in NEXTJS - How to convert to i18next then?
I want to use Suspense in my nextjs project but I get such an error whenever I use it:
Then I got to know that a solution does exist, the error can be rectified by modifying the next-i18next-config.js file like
react: {
useSuspense: false,
…
sbunn
- 33
- 1
- 6
1
vote
2 answers
Module '"react"' has no exported member 'SuspenseList'. TS2305
I'm trying to learn some of the new features in React 18, such as the SuspenseList and new useId hook, but I seem to be getting the same error over and over:
Module '"react"' has no exported member 'SuspenseList'. TS2305
This is what my…
DNH
- 47
- 1
- 8
1
vote
0 answers
How to detect react concurrent mode?
How to detect that the current used React (stable/release) version in an application supports concurrent mode ? Let's say you are authoring a library that should target several react versions, and only add concurrent features if they are…
Incepter
- 2,711
- 15
- 33
1
vote
1 answer
How can I use useEffect with Suspense in React?
Hello I want to auto focus to input when my page loaded. I have to use Suspense because I using i18n. I have auto focus code but not working well.
}>
const Input = () => {
const inputRef…
Fırat Kaya
- 87
- 1
- 5
1
vote
0 answers
Suspense fallback takes very little time with react router v6
In my project I' m using react-router and Suspence for rendering multiple lazy pages.
The only problem id that the LoadingSpinner, that is the fallback prop of the Suspence component, loads for only 0.2ms when you go from one page to another. This…
Saverio Randazzo
- 217
- 1
- 7
- 19
1
vote
1 answer
In .tsx, this works as expected:
const LazyComponent = lazy(() => import("path-to-my-lazy-component"));
const SuspenseComponentTSX = (
Loading
}>
user6118986
- 341
- 2
- 15
1
vote
1 answer
When is the promise executed for suspense in React?
I'm playing with React suspense example. Everything makes sense to me except I don't know how to hide a promise from executing.
export function fetchProfileData() {
let userPromise = fetchUser();
return {
user: wrapPromise(userPromise),
…
windmaomao
- 7,120
- 2
- 32
- 36
1
vote
2 answers
Using react suspense to load asynchronously from Firebase
I am trying to use suspense to load a GLTF model from Firebase storage. To do so I need to first get the URL for the model asynchronously using a getDownloadURL method before I can load it. What I am seeing is that the loader is repeatedly getting…
Alex Whittaker
- 39
- 5
1
vote
0 answers
Lazy loading images in React
I have an Image component that receives a name for an image, and uses some logic to determine where the assets folder is located.
My Image component looks something like this:
export default function Image({
basename,
fallbackBasename,
…
rnarcos
- 86
- 1
- 2
- 12