Questions tagged [react-suspense]
194 questions
9
votes
2 answers
Is there a way to check if a lazy-loaded component (with React.Lazy) has finished loading?
I'm working on an app where we have transitions between pages that we want to delay if the next page has any lazy-loaded components that haven't been loaded yet. So I'm trying to figure out if there's any way to reliably check whether a lazy-loaded…
Jan
- 848
- 7
- 17
8
votes
0 answers
how to test fallback using react testing library
I'm looking for a way to test a React.Suspense fallback using react-testing-library. Consider this example:
const MyLazyThing = lazy(() => import('./index'));
export default function MyThing(props) {
return (
Ben
- 16,124
- 22
- 77
- 122
7
votes
2 answers
How can I get webpack-dev-server to stop downloading incorrect chunks on content change with React lazy/Suspense code splitting?
Here is my set up:
const DesktopApp = lazy(() => import(/* webpackChunkName: "DesktopApp" */'./DesktopApp'));
const MobileApp = lazy(() => import(/* webpackChunkName: "MobileApp" */'./MobileApp'));
type Props = { shouldServeMobile: boolean…
thisissami
- 15,445
- 16
- 47
- 74
7
votes
4 answers
React lazy components not loaded on dynamic routes
I used react lazy and suspense on dynamic routes but somehow I cannot render the lazy loaded components.
I've already searched about the use of lazy on routes but I haven't seen anyone use it on dynamic(localhost:8080/dynamic/dynamic)…
jhimanjhi
- 97
- 1
- 6
6
votes
4 answers
Mock out imported Lazy React component
Here's my lazy component:
const LazyBones = React.lazy(() => import('@graveyard/Bones')
.then(module => ({default: module.BonesComponent}))
export default LazyBones
I'm importing it like this:
import Bones from './LazyBones'
export default () =>…
AncientSwordRage
- 7,086
- 19
- 90
- 173
5
votes
1 answer
How does react suspense determine if a component is ready to render
I am using for data fetching like in this blog post.
From the react docs
Suspense lets your components wait for something before they can render.
And even better explained in this docs
React.Suspense lets you specify the loading…
hane Smitter
- 516
- 3
- 11
4
votes
0 answers
React Suspend: provide abort fetch cleanup
Using the new React Suspend API, a promise can be thrown during component Render to tell Suspend to wait for that promise to complete before rendering the tree.
How can cancellation be provided so that if the Suspend component unmounts (e.g. parent…
Mattia Manzo Manzati
- 586
- 1
- 3
- 13
4
votes
1 answer
In React 18, is useEffect's function guaranteed to run AFTER a Suspense promise completes?
I have a simple master-detail scenario where on the left side, I load a list of cities using useSwr with a REST service, then on the right side I have a city detail windows that also uses useSwr to load a single city (either from clicked on left, or…
Peter Kellner
- 14,748
- 25
- 102
- 188
4
votes
4 answers
With React 18 and suspense, how to display specific errors, not just fallback in ErrorBoundary
I have a component structured like this with my ErrorBoundary wrapping my Suspense element.
function App() {
return (
Could not fetch cities.}>
Loading..
}>
Peter Kellner
- 14,748
- 25
- 102
- 188
4
votes
0 answers
i18n with Suspense is not loading in React Testing Library
I am using i18n so that my app is multilingual. This seems to work fine, except for when I'm testing the app.
I render a component named ProjectNavigation in my test. This component uses the useTranslation hook to translate some words in my project…
Henrik Moe Wæhre
- 41
- 3
4
votes
0 answers
Cannot update a component while rendering a different component - Environment / React- Three-Fiber
My App.jsx
import "./App.css";
import { Canvas } from "@react-three/fiber";
import React, { Suspense } from "react";
import { Html, useProgress } from "@react-three/drei";
const Scene = React.lazy(() => import('./components/Scene.jsx'));
function…
Aaron
- 176
- 3
- 14
4
votes
0 answers
Can I use react suspense in production?
In this page, they use Suspense with React.lazy for lazily loading components. However, Suspense itself is listed under the experimental Conccurrent mode which is not stable yet as they note here. I don't understand. Can I use Suspense in production…
just human
- 51
- 1
- 3
3
votes
2 answers
Suspense fallback is not showing in NextJS 13
I am building an application to showcase the usage of the Suspense in Nextjs 13. But the Suspense fallback is not showing while loading.
Here is the page.js
import React, { Suspense } from "react";
import Loading from "./loading";
const Trending =…
Suraj Vishwakarma
- 31
- 1
- 2
3
votes
2 answers
React - Error boundary not catching error
I have a component where I am fetching mock data. I am doing a query by using react-query with Suspense. I was following their docs. This is the component:
export const WorkHistory = () => {
const { caseId } = useContext();
const { api:…
Leff
- 1,968
- 24
- 97
- 201
3
votes
1 answer
Conditionally returning a React component to satisfy a Suspense fallback
Normally when I'm returning a component (I'm using nextjs 13) that relies on fetched data, I conditionally render elements to ensure values are available:
TableComponent:
export const Table = ({ ...props }) => {
const [tableEvents,…
biscuitstack
- 11,591
- 1
- 26
- 41