Comments (9)
Hey @rubencodes this is certainly not expected behaviour.
Can you please share a bit more about your setup? i.e. version, SSR/browser etc. Also how you are creating the AsyncComponent. Thanks!
from react-async-component.
Sure! I'm on Beta 3, no SSR, using the latest Google Chrome. Also using [email protected], and [email protected] for routing. My code looks like:
const MessengerPage = (props) => {
const AsyncMessenger = asyncComponent({
resolve: () => import('./Messenger'),
LoadingComponent: () => {
console.log('loading');
return (<div><Spinner /></div>);
}
});
return (
<AsyncMessenger { ...props } />
);
};
What I'm seeing is whenever my route changes (which, fwiw, causes the props to my above MessengerPage component to change), my Messenger component is unmounted, the loading component function is hit, and then the Messenger component is re-mounted. These unmount/re-mounts do not happen if I do not use asyncComponent.
from react-async-component.
Hey @rubencodes!
Yeah, it's an anti-pattern to create your async components within another component as you have done. Basically some "global" state is created for each instance. Also, your wrapping component does nothing but create an async component, so there is no need for it.
Try the following instead:
const MessengerPage = asyncComponent({
resolve: () => import('./Messenger'),
LoadingComponent: () => {
console.log('loading');
return (<div><Spinner /></div>);
}
});
<MessengerPage foo="bar" baz="bob" />
from react-async-component.
RE: the "Also", yeah the actual component is slightly more involved, I just tried to simplify it here to the simplest example that still gave me the issue. I will try creating it outside the component! Thanks 😃
from react-async-component.
I thought that might be the case. Okay, sure thing. If you can describe the nature of the configuration you are trying to achieve I am happy to advise. 😊
from react-async-component.
I think I got it figured out! I just moved the asyncComponent
calls outside of my main component, and it looks like it's working perfectly now! Thanks so much!
from react-async-component.
I'm running into the same problem. On the client side, I thought if I use
// note: This prevents the "flash" from happening.
asyncBootstrapper(app)
.then(function () {
ReactDOM.render(app, document.getElementById('root'));
});
Then the rendering of the app should only happen after the app has been "walked" by the react-tree-walker
. By then all of the bundles should already been loaded.
But this doesn't seems to be the case. The child link still flashes between the server-rendered page and the client-side code replacing it with the identical html node.
@rubencodes I'm using the asyncComponent
to wrap the sub-pages (child routes). What do you mean exactly by "move [...] calls outside of my main component"?
Thanks in advance.
from react-async-component.
@rubencodes @ctrlplusb Hey guys do you guys have any intuition on the source of the flash? I am using the asyncBootstrapper
call back already, which I thought should defer the ReactDOM rendering until the entire tree has been walked (and resolved).
from react-async-component.
but the flash seem still there. So I'm a bit baffled.
from react-async-component.
Related Issues (20)
- if more the one same async components are rendered in same page, only one will be rendered
- Chunk rendered in the server is requested in the client again HOT 1
- Need Help : How can I solve "System is not defined" HOT 5
- Error walking your react tree HOT 1
- No-match routes rendered during async loading HOT 1
- Combining with <link rel="prefetch" /> results in loading async components twice
- Upgrade to support react-async-bootstrapper 2
- App component rendered twice because of AsyncComponentProvider wrapper in RU
- Solved : Flashing LoadingComponent and render twice
- getErrors missing after migration to 2.0.0
- When used with react-hot-loader, async component gets stuck on the loader HOT 3
- Async component not rendering on directly open page
- Client error: Failed to resolve asyncComponent on Safari 11.1
- React.Children.only seems to fail on IE11 HOT 1
- Is it possible to load the async'd components from a custom URL? HOT 1
- Two same simultaneously async components HOT 5
- Informing about React.lazy() HOT 2
- Cannot read property 'helmetInstances' of undefined HOT 3
- migrate to New Context API
- Error async-component, state not reloaded after error
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-async-component.