Stack Overflow
Stack Overflow

Questions tagged [react-lazy-load]

95 questions
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
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
6
votes
1 answer

React lazy loaded route makes redirecting non-matching routes to /404 not work

I've been trying to make a 404 not found page and redirect all non-matched routes there, currently configured with whole context as: …
SebastianG
  • 8,563
  • 8
  • 47
  • 111
6
votes
0 answers

How can I test Lazy loaded component using jest + enzyme

In my react application I have implemented Lazy loading using React.lazy(() => import("...")). But I am not able to implement the testcase that will support Lazy load. Without React.lazy(() => import("...")) my testcases are working fine but only…
Bikram
  • 323
  • 5
  • 10
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
5
votes
0 answers

react lazy uncaught undefined Error occured

I'm trying to adopt react-lazy in my source. But I don't know what is wrong.. I Checked Two Things. Check export way of homeContainer Component. It's default export So It doesn't effect about using lazy component(export default HomeContainer) I did…
young ban
  • 169
  • 1
  • 12
4
votes
1 answer

Unable to access static properties of a component imported using React.lazy

i have a react functional component in a file like this - const Slot: React.ElementType = () => null; const Component = ({ children }): JSX.Element | null => { const childrenArr = React.Children.toArray(children) as React.ReactElement[]; const…
ghostCoder
  • 1
  • 9
  • 49
  • 72
3
votes
1 answer

Dynamically load components from server in React

Its not the common dynamic loading question. In our project, we do have some js files (with component) on the server and we want to load those components dynamically in the react app. I know about the import() but that takes a path of the file. In…
targhs
  • 1,477
  • 2
  • 16
  • 29
3
votes
1 answer

Debugging webpack code splitting with React.lazy

I am using React.lazy to try to split off some code from my main application, but it's not working the way I expect and I'm having trouble figuring out how to debug. My code looks something like: // index.js import React from 'react'; import {…
mariaines
  • 497
  • 1
  • 5
  • 17
3
votes
1 answer

Webpack and React.lazy not splitting out dynamic import. Why?

I'm obviously quite confused about this but, I have a module FileAttachments which imports (and no one else does) a fair number of other sizeable modules. I'd expect that when I changed that import to a dynamic import with React.lazy (React 18)…
Peter Gerdes
  • 2,288
  • 1
  • 20
  • 28
3
votes
2 answers

Implement lazy loading in nested routes

I'm trying to add implement lazy loading in react app which works well in top-level routes. But I also want the and provide a fallback for nested routes. According to react-router-dom, there must be only Fragment or Route as…
angel_dust
  • 121
  • 2
  • 10
3
votes
2 answers

Is it possible to inject a variable value into a javascript comment?

TL;DR: is it possible to inject constant variables (that won't change during runtime) in comments I've come across a very unique situation where I need my comments to have a specific value in them. I'm code splitting in React and the way to name…
Barry Michael Doyle
  • 9,333
  • 30
  • 83
  • 143
3
votes
0 answers

React Version Upgrade Throw Error on React Lazy or Suspense

So I am working on an ReactJs App which was using React@16.13.1 in the Start. But Recently we have to update our App to the latest version of React. By Upgrading I am facing issue with React Lazy and Suspense and that they are throwing Errors. It…
Muhammad Bilal
  • 113
  • 2
  • 8
3
votes
5 answers

React lazy recursive import

I have requirement where I need to load component from dynamic folders. For example I have following folders inside components components -default -component-one -component-two -component-three -custom …
scott
  • 3,112
  • 19
  • 52
  • 90
3
votes
1 answer

Lazy load util function in React

I want to run a JS function from a module that loaded asynchronously (that exposed by module federation) and to use the return value in a React component. For example, setting the visibility of some element by the value of a function that returns a…
Shlomy Z
  • 301
  • 2
  • 14
1
2 3 4 5 6 7