Questions tagged [react-suspense]
194 questions
2
votes
0 answers
React gives warning (Did not expect server HTML to contain a in ) when using React.Suspense
I am building a react app with the SSR feature and I am using React.Suspense for code-splitting on the client-side and I am getting this warning.
Warning: Did not expect server HTML to contain a in
I have my App.js file on the…
user8989
- 580
- 2
- 6
- 21
2
votes
1 answer
How to suspense the whole component before the image inside is loaded?
I have the following component:
In this component, there is an image.
When I load the page, I realize the page will be loaded first then the image will be loaded later. How can I suspense the whole page before the image is loaded?
I have tried to…
Eddie Lam
- 579
- 1
- 5
- 22
2
votes
3 answers
How to use React.Suspense with a api call?
I've read the doc about React.Suspense, it seems great, but how can I use it while performing an api call, with axios for example?
To be more specific, why this code doesn't work?
export default function Foo(){
const [state, setState] =…
DoneDeal0
- 5,273
- 13
- 55
- 114
2
votes
1 answer
Perform async with redux and react suspense together
Recently I had learnt react-redux, I use it to manage state in my website. But I find some interest in react suspense, but seem like suspense is a feature that killing redux. (Maybe) and might cause problem if using together.
For example, if I want…
Wesley Loh
- 153
- 2
- 11
2
votes
2 answers
What benefits does React suspense have?
I know React suspense is new and hasn't been officially released for production yet but I was wondering what the main benefits of it are/or using it would be?
I can't see anything it does as being "new" or replacing something that doesn't already…
Red Baron
- 7,181
- 10
- 39
- 86
2
votes
0 answers
How to use enzyme suspenseFallback to expect on Suspense and Lazy?
I am trying to use the new enzyme api for suspenseFallback introduced in enzyme 3.10.0.
Versions used:
enzyme-adapter-react-16: 1.14.0
enzyme: 3.10.0
react: 16.9.0
jest: 23.6.0
I can't get it to return my fallback or to trigger the import inside…
Pelle Tunell
- 33
- 4
2
votes
2 answers
Getting SCRIPT1028 error on Edge when using react lazy loading
My app works on other browsers but not (on v44)
If I remove the lazy-loading, it works fine.
I am using React.lazy and Suspense to split my code.
babel 7.5.0
webpack 4.28.3
react 16.7.0
Have tried messing with webpack and babel config.
It seems…
topman3284
- 81
- 1
- 4
2
votes
0 answers
How to add a minimum delay to a React Suspense component when you do not have control over the AJAX call because you are using a library?
I have the following component wrapped in a Suspense one:
// ...
render(
tonix
- 6,671
- 13
- 75
- 136
1
vote
0 answers
Nextjs Client Component with Suspense fallback not wokring
I am loading a client component inside a server component but trying to show a fallback loader until the data is fetched inside the client competent via API.
I have the following server component which contains a client component
import {…
Haseeb Khan
- 930
- 3
- 19
- 41
1
vote
0 answers
Suspense in NextJS in production is blocking rather than showing fallback UI
I have tried following the docs and tutorials to implement streaming in my project. To visualize it in development I've added artificial delays to my API calls to trigger the fallback loading UI. In development it works but in production it just…
frost2709
- 131
- 1
- 5
1
vote
1 answer
How to selectively apply lazy loading and suspense to specific routes with React Router?
I want apply lazy loading to specific routes. I want something like this:
import { lazy, Suspense } from "react";
import { Route, Routes } from "react-router-dom";
import NotLazyComponent from "./NotLazyComponent";
const LazyOne = lazy(() =>…
nz_19
- 61
- 5
1
vote
1 answer
Tanstack Query: how to reset error of all queries with the same key?
I'm trying to correctly handle query errors with Suspense and error boundaries in the situation where I have two parts of the app using the same query key.
They initially execute at the same time so they are batched with a single queryFn, which is…
Jeahel
- 1,012
- 2
- 13
- 30
1
vote
0 answers
Next.js Concurrent Config
I saw online with several answers on how to enable Next.js Experimental Config for React concurrent mode in Next.js 12.
However, It seems that most of them doesn't work in my case. I am using Next.js 13.1.6 and I wonder did this tag get removed. It…
Thomas
- 41
- 2
1
vote
1 answer
How can I suspend component on the server side but render it on the client side?
Is there a way to keep the component suspended on the server side and render it on the client with React 18? I tried using this pattern https://beta.reactjs.org/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content.…
zimex
- 713
- 1
- 5
- 10
1
vote
0 answers
Check whether React.Suspense is ready
I'm using the Intersection Observer API in React to add some animations. I am adding as Intersection Entries some elements.
The problem is that I have the app in multiple languages, and due to the implementation that the tool I am using to translate…
Genaro Bonavita
- 41
- 3
) when using React.Suspense
I am building a react app with the SSR feature and I am using React.Suspense for code-splitting on the client-side and I am getting this warning.
Warning: Did not expect server HTML to contain a
in
I have my App.js file on the…
user8989
- 580
- 2
- 6
- 21
2
votes
1 answer
How to suspense the whole component before the image inside is loaded?
I have the following component:
In this component, there is an image.
When I load the page, I realize the page will be loaded first then the image will be loaded later. How can I suspense the whole page before the image is loaded?
I have tried to…
Eddie Lam
- 579
- 1
- 5
- 22
2
votes
3 answers
How to use React.Suspense with a api call?
I've read the doc about React.Suspense, it seems great, but how can I use it while performing an api call, with axios for example?
To be more specific, why this code doesn't work?
export default function Foo(){
const [state, setState] =…
DoneDeal0
- 5,273
- 13
- 55
- 114
2
votes
1 answer
Perform async with redux and react suspense together
Recently I had learnt react-redux, I use it to manage state in my website. But I find some interest in react suspense, but seem like suspense is a feature that killing redux. (Maybe) and might cause problem if using together.
For example, if I want…
Wesley Loh
- 153
- 2
- 11
2
votes
2 answers
What benefits does React suspense have?
I know React suspense is new and hasn't been officially released for production yet but I was wondering what the main benefits of it are/or using it would be?
I can't see anything it does as being "new" or replacing something that doesn't already…
Red Baron
- 7,181
- 10
- 39
- 86
2
votes
0 answers
How to use enzyme suspenseFallback to expect on Suspense and Lazy?
I am trying to use the new enzyme api for suspenseFallback introduced in enzyme 3.10.0.
Versions used:
enzyme-adapter-react-16: 1.14.0
enzyme: 3.10.0
react: 16.9.0
jest: 23.6.0
I can't get it to return my fallback or to trigger the import inside…
Pelle Tunell
- 33
- 4
2
votes
2 answers
Getting SCRIPT1028 error on Edge when using react lazy loading
My app works on other browsers but not (on v44)
If I remove the lazy-loading, it works fine.
I am using React.lazy and Suspense to split my code.
babel 7.5.0
webpack 4.28.3
react 16.7.0
Have tried messing with webpack and babel config.
It seems…
topman3284
- 81
- 1
- 4
2
votes
0 answers
How to add a minimum delay to a React Suspense component when you do not have control over the AJAX call because you are using a library?
I have the following component wrapped in a Suspense one:
// ...
render(
tonix
- 6,671
- 13
- 75
- 136
1
vote
0 answers
Nextjs Client Component with Suspense fallback not wokring
I am loading a client component inside a server component but trying to show a fallback loader until the data is fetched inside the client competent via API.
I have the following server component which contains a client component
import {…
Haseeb Khan
- 930
- 3
- 19
- 41
1
vote
0 answers
Suspense in NextJS in production is blocking rather than showing fallback UI
I have tried following the docs and tutorials to implement streaming in my project. To visualize it in development I've added artificial delays to my API calls to trigger the fallback loading UI. In development it works but in production it just…
frost2709
- 131
- 1
- 5
1
vote
1 answer
How to selectively apply lazy loading and suspense to specific routes with React Router?
I want apply lazy loading to specific routes. I want something like this:
import { lazy, Suspense } from "react";
import { Route, Routes } from "react-router-dom";
import NotLazyComponent from "./NotLazyComponent";
const LazyOne = lazy(() =>…
nz_19
- 61
- 5
1
vote
1 answer
Tanstack Query: how to reset error of all queries with the same key?
I'm trying to correctly handle query errors with Suspense and error boundaries in the situation where I have two parts of the app using the same query key.
They initially execute at the same time so they are batched with a single queryFn, which is…
Jeahel
- 1,012
- 2
- 13
- 30
1
vote
0 answers
Next.js Concurrent Config
I saw online with several answers on how to enable Next.js Experimental Config for React concurrent mode in Next.js 12.
However, It seems that most of them doesn't work in my case. I am using Next.js 13.1.6 and I wonder did this tag get removed. It…
Thomas
- 41
- 2
1
vote
1 answer
How can I suspend component on the server side but render it on the client side?
Is there a way to keep the component suspended on the server side and render it on the client with React 18? I tried using this pattern https://beta.reactjs.org/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content.…
zimex
- 713
- 1
- 5
- 10
1
vote
0 answers
Check whether React.Suspense is ready
I'm using the Intersection Observer API in React to add some animations. I am adding as Intersection Entries some elements.
The problem is that I have the app in multiple languages, and due to the implementation that the tool I am using to translate…
Genaro Bonavita
- 41
- 3