Questions tagged [react-suspense]
83 questions
15
votes
2 answers
React suspense prevent flashing of fallback spinner
I am wondering if there is a good way to prevent the flashing of the fallback in react. I am using react router and the issue is that when a component gets suspended the fallback loader flashes really quick and it is pretty annoying. I saw the…
Steve K
- 6,610
- 2
- 14
- 28
11
votes
1 answer
Keep the current page rendered until the new page is loaded with React.lazy and React.Suspense
I'm using React router to render my different pages according to a specific url. No I wanted to use React.lazy to lazy load all my page components:
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from…
johannchopin
- 7,327
- 6
- 22
- 62
10
votes
1 answer
Is it safe to use a useState "setter" function as a callback ref?
Is it safe to use the setter function of a useState hook as a callback ref function? Will this cause trouble with Suspense or other upcoming React changes? If "yes, this is OK", that's cool! If "no" why not? If "maybe" then when is it OK vs. not?…
Justin Grant
- 41,265
- 11
- 110
- 185
10
votes
2 answers
Use NProgress with "React.lazy"
I have the following component tree:
MyFallback}>
import('./pages/Auth/Login'))}
…
Luiz Felipe
- 579
- 7
- 15
9
votes
2 answers
Understanding Suspense and React Hooks
I'm struggling to find problems with using Suspense and React hooks.
There are several key problems with the React code below.
import { Suspense, useState, useEffect } from 'react';
const SuspensefulUserProfile = ({ userId }) => {
const [data,…
ecoplaneteer
- 1,555
- 1
- 4
- 23
7
votes
0 answers
Is there a way to apply a fade in/out transition with React suspense for the fallback component?
I have a react app using MUI and right now I've implemented suspense with a spinner which kicks in as the fallback component while the content is being loaded. I'd love to add a fade in/out transition to the fallback component since the change is…
guido732
- 101
- 1
- 8
7
votes
1 answer
Do nested Suspense components cause a sequential or a parallel load?
I understand that Suspense components are the React-ian approach to code splitting, which makes webpages load faster. Now, say you have a component hierarchy like this:
}>
Paul Razvan Berg
- 6,292
- 2
- 33
- 54
6
votes
5 answers
Can you deconstruct lazily loaded React components?
Using es6 imports, you can do this:
import { MyComponent } from "../path/to/components.js";
export default function () {
return
Paul Razvan Berg
- 6,292
- 2
- 33
- 54
6
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
- 12,525
- 14
- 42
- 71
6
votes
3 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
- 87
- 1
- 6
5
votes
1 answer
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
- 460
- 4
- 15
5
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
- 14,789
- 19
- 67
- 115
4
votes
1 answer
What is the React official position for throwing promises inside render functions?
There is a new cool feature in React — Suspense component. Currently it only officially supports components created using React.lazy function. But unofficially it well known that internally Suspense component is triggered by throwing a promise…
Alexandr Yushkov
- 41
- 3
4
votes
3 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 () =>…
Pureferret
- 6,477
- 14
- 72
- 149
3
votes
0 answers
How to use multiple react suspense fallbacks with reach router?
I'm using "@reach/router": "^1.2.1" and in my App.js file I've got a fallback component to show while my routes are loading:
Simpleton
- 5,889
- 10
- 48
- 83