Stack Overflow
Stack Overflow

Questions tagged [react-suspense]

194 questions
25
votes
3 answers

"This Suspense boundary received an update before it finished hydrating." Error when using suspense and dynamic import in Nextjs

I'm trying to lazy load a list of data with suspense and dynamic import in Nextjs. But getting following error: Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering.…
Hashem Mashem
  • 317
  • 1
  • 5
  • 11
23
votes
7 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 ; } Can I do it with React.lazy too? const { MyComponent } = lazy(() =>…
Paul Razvan Berg
  • 16,949
  • 9
  • 76
  • 114
20
votes
2 answers

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
  • 200
  • 1
  • 7
19
votes
3 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
  • 8,505
  • 2
  • 20
  • 35
18
votes
4 answers

React Suspense lazy loading without fallback

I want to lazy load my components to decrease my initial bundle size and get components on the fly using code splitting using react router. However, when using React Suspense, they force you to use a fallback for loading. This wouldn't work: const…
html_programmer
  • 18,126
  • 18
  • 85
  • 158
17
votes
3 answers

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. Now 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
  • 13,720
  • 10
  • 55
  • 101
16
votes
1 answer

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
  • 441
  • 1
  • 4
  • 10
12
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,918
  • 1
  • 8
  • 29
12
votes
2 answers

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
  • 44,807
  • 15
  • 124
  • 208
12
votes
4 answers

Use NProgress with "React.lazy"

I have the following component tree: MyFallback}> import('./pages/Auth/Login'))} …
Luiz Felipe
  • 869
  • 12
  • 21
11
votes
2 answers

How to correctly wait for Translation with react-i18next

I'm using react-18next to load translations throughout my react app. I have a problem making my app waiting for translations. This breaks our tests in Jenkins as they are searching for translated keys in many…
Master117
  • 660
  • 6
  • 21
11
votes
4 answers

How to fix 'no fallback UI was specified' in react i18next using hooks

I am trying to implement i18next in my react component using the useTranslation hook, but it keeps saying: Uncaught Error: Test suspended while rendering, but no fallback UI was specified. Add a component higher in the tree…
Micah Gideon Modell
  • 586
  • 1
  • 9
  • 24
11
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
  • 16,949
  • 9
  • 76
  • 114
10
votes
1 answer

Trigger React Suspense State while developing

Say I have a setup that looks like this: function App() { return ( }> ); } Is there an easy way during development that I can trigger…
Jack Gore
  • 3,874
  • 1
  • 23
  • 32
9
votes
2 answers

How to use Suspense with RouterProvider in react-router-dom v6.4

These are the two components i am having, My question is where do i place the component to load the routes as required? Navagtion/index.jsx import React from "react"; import { RouterProvider, createBrowserRouter, …
Amandeep Kochhar
  • 91
  • 1
  • 1
  • 3
1
2 3
…
12 13