Getting weird flashing when navigating about react-async-component HOT 9 CLOSED

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.